@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,420;9..144,480&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --paper:      #E7E3D8;   /* stone / parchment ground */
    --paper-edge: #DAD5C6;   /* slightly deeper paper for the case */
    --panel:      #3F5B52;   /* deep pine endpaper colour-block */
    --panel-deep: #324A43;
    --panel-vein: #587266;
    --rose:       #AE7A6C;   /* muted clay-rose accent */
    --gilt:       #9C8248;   /* brushed brass rule */
    --ink:        #26251F;
    --muted:      #6B6558;
  }

  *{ box-sizing: border-box; }

  body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 48px 20px;
    background: var(--paper-edge);
    background-image:
      radial-gradient(ellipse at 50% -10%, rgba(0,0,0,0.05), transparent 60%);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--ink);
  }

  .case{
    position:relative;
    width:100%;
    max-width: 980px;
    background: var(--paper);
    border-radius: 3px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 30px 60px -20px rgba(20,20,15,0.35),
      0 4px 10px rgba(20,20,15,0.12);
    overflow:hidden;
  }

  /* gilt-edge hairline framing the whole board, like the edge of a page block */
  .case::before{
    content:"";
    position:absolute;
    inset: 10px;
    border: 1px solid rgba(156,130,72,0.55);
    pointer-events:none;
    z-index: 3;
  }

  .spread{
    position:relative;
    display:flex;
    min-height: 560px;
  }

  .panel,
  .content{
    min-width: 0;
  }

  .panel{
    position:relative;
    background: var(--panel);
    display:flex;
    align-items:center;
    justify-content:center;
    width: 41.86%;
    padding: 56px 40px;
    flex-shrink: 0;
  }

  /* centre gutter shadow — the crease where the cover meets the page */
  .spread::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left: calc(41.86% - 1px);
    width: 26px;
    transform: translateX(-50%);
    background: linear-gradient(to right,
      rgba(0,0,0,0.10), rgba(0,0,0,0.03) 40%, transparent 70%);
    pointer-events:none;
    z-index: 2;
  }

  /* ---------- Left: endpaper panel ---------- */
  .bookplate{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 22px;
  }

  .photo-frame{
    width: 188px;
    height: 188px;
    border-radius: 50%;
    background: linear-gradient(155deg, #EDE9DD, #D9D3C1);
    border: 2px solid rgba(231,227,216,0.9);
    outline: 1px solid rgba(156,130,72,0.65);
    outline-offset: 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .photo-frame img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 32%;
  }

  .plate-rule{
    width: 46px;
    height: 1px;
    background: rgba(231,227,216,0.55);
  }

  /* ---------- Right: bio panel ---------- */
  .content{
    flex: 1;
    padding: 64px 56px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight: 480;
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1.05;
    margin: 0 0 6px;
    color: var(--ink);
  }

  .role{
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 420;
    font-size: 17px;
    color: var(--rose);
    margin: 0 0 28px;
  }

  .bio{
    max-width: 46ch;
  }

  .bio p{
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink);
    margin: 0 0 18px;
  }

  .bio p:last-child{ margin-bottom:0; }

  .signature{
    margin-top: 34px;
    font-family:'Fraunces', serif;
    font-style: italic;
    font-size: 26px;
    color: var(--panel-deep);
  }

  .signature span{
    display:block;
    font-family:'Inter', sans-serif;
    font-style:normal;
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    letter-spacing: 0.01em;
  }

  /* ---------- Ribbon bookmark ---------- */
  .ribbon{
    position:absolute;
    top:0;
    right: 86px;
    width: 22px;
    height: 92px;
    background: var(--rose);
    z-index: 4;
    transform-origin: top center;
    animation: sway 7s ease-in-out infinite;
  }
  .ribbon::after{
    content:"";
    position:absolute;
    bottom:-13px;
    left:0;
    width:0; height:0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 13px solid var(--rose);
  }

  @keyframes sway{
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(1.2deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .ribbon{ animation: none; }
  }

  @media (max-width: 760px){
    .spread{
      display:block;
      min-height: auto;
    }
    .spread::after{ display:none; }
    .panel{
      width:100%;
      padding: 44px 32px 36px;
    }
    .content{ padding: 40px 32px 48px; }
    .ribbon{ right: 40px; }
  }