@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Barlow+Condensed:wght@500;600&family=Mrs+Saint+Delafield&display=swap');

  :root{
    --cream:#F6F1E7;
    --cream-deep:#EFE7D8;
    --ink:#211D18;
    --ink-soft:#4A433B;
    --gold:#A9803D;
    --gold-bright:#C79A4B;
    --crack:#8C6A33;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--cream);}
  body{
    font-family:'EB Garamond', serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  .page{
    max-width:760px;
    margin:0 auto;
    padding:90px 56px 120px;
    position:relative;
  }

  /* ---------- Eyebrow / running head ---------- */
  .running-head{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-size:11px;
    color:var(--gold);
    text-align:center;
    margin-bottom:48px;
  }
  .running-head span{ color:var(--ink-soft); font-weight:500; }

  /* ---------- Sketch portrait (kintsugi line art) ---------- */
  .sketch-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:8px;
  }
  .sketch-wrap img{
    width:380px;
    max-width:100%;
    display:block;
    -webkit-mask-image:radial-gradient(ellipse 72% 80% at 50% 42%, #000 60%, transparent 100%);
    mask-image:radial-gradient(ellipse 72% 80% at 50% 42%, #000 60%, transparent 100%);
  }

  .crack-line{
    fill:none;
    stroke:var(--crack);
    stroke-width:1.4;
    stroke-linecap:round;
    opacity:0.85;
  }
  .gold-fill{ fill:var(--gold-bright); opacity:0.9; }

  .portrait-caption{
    text-align:center;
    margin-top:22px;
  }
  .portrait-name{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:500;
    font-size:28px;
    letter-spacing:0.01em;
    margin:0 0 6px;
  }
  .portrait-role{
    font-family:'Barlow Condensed', sans-serif;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 14px;
  }
  .portrait-link{
    font-family:'EB Garamond', serif;
    font-style:italic;
    font-size:15px;
  }
  .portrait-link a{
    color:var(--gold);
    text-decoration:none;
    border-bottom:1px solid var(--gold-bright);
    padding-bottom:1px;
  }

  .divider{
    width:64px;
    height:1px;
    background:var(--gold-bright);
    margin:46px auto 46px;
    position:relative;
  }
  .divider::after{
    content:"";
    position:absolute;
    left:50%; top:-3px;
    width:7px; height:7px;
    background:var(--gold-bright);
    border-radius:50%;
    transform:translateX(-50%);
  }

  /* ---------- Preface-style intro note ---------- */
  .intro-note{
    font-style:italic;
    font-size:16px;
    line-height:1.75;
    color:var(--ink-soft);
    text-align:center;
    max-width:520px;
    margin:0 auto 64px;
  }

  /* ---------- Q&A ---------- */
  .qa-block{ margin-bottom:46px; }
  .qa-tag{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:10px;
  }
  .qa-question{
    font-family:'Playfair Display', serif;
    font-weight:500;
    font-size:19px;
    line-height:1.45;
    margin:0 0 16px;
    color:var(--ink);
  }
  .qa-answer{
    font-size:17.5px;
    line-height:1.8;
    margin:0;
    text-align:justify;
  }
  .qa-answer + .qa-answer{ margin-top:14px; }

  /* ---------- Editorial suggestion (kintsugi seam) ---------- */
  .edit-note{
    margin-top:18px;
    padding-left:20px;
    border-left:2px solid var(--gold-bright);
    position:relative;
  }
  .edit-note::before{
    content:"";
    position:absolute;
    left:-4px; top:2px;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold-bright);
  }
  .edit-tag{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    font-size:10.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:8px;
  }
  .edit-suggestion{
    font-style:italic;
    font-size:16.5px;
    line-height:1.7;
    color:var(--ink);
    margin:0 0 8px;
  }
  .edit-why{
    font-family:'Barlow Condensed', sans-serif;
    font-size:13px;
    letter-spacing:0.01em;
    color:var(--ink-soft);
    margin:0;
    text-transform:none;
  }
  .edit-insert{
    background:linear-gradient(transparent 60%, rgba(199,154,75,0.28) 60%);
  }

  /* ---------- Manifest / closing permission ---------- */
  .closing{
    margin-top:80px;
    padding-top:54px;
    border-top:1px solid var(--cream-deep);
    text-align:center;
  }
  .closing-label{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:18px;
  }
  .closing-text{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:21px;
    line-height:1.6;
    color:var(--ink);
    max-width:480px;
    margin:0 auto 36px;
  }
  .closing-link{
    font-family:'Barlow Condensed', sans-serif;
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .closing-link a{
    color:var(--gold);
    text-decoration:none;
    border-bottom:1px solid var(--gold-bright);
    padding-bottom:2px;
  }

  .page-number{
    text-align:center;
    font-family:'Barlow Condensed', sans-serif;
    font-size:11px;
    letter-spacing:0.1em;
    color:var(--ink-soft);
    margin-top:60px;
  }

  @media (max-width:600px){
    .page{ padding:60px 24px 90px; }
    .qa-question{ font-size:17px; }
    .qa-answer{ font-size:16px; }
  }

  /* ---------- Kintsugi parallax intro ---------- */
  .intro-stage{
    position:relative;
    will-change:transform;
  }
  .parallax-portrait{ will-change:transform; transition:transform 80ms linear; }
  .parallax-caption{ will-change:transform; transition:transform 80ms linear; }
  .parallax-divider{ will-change:transform, opacity; transition:transform 80ms linear; }

  /* Kintsugi gold seams flanking the divider */
  .kintsugi-seam{
    display:block;
    margin:0 auto;
    overflow:visible;
  }
  .kintsugi-seam .seam-path{
    fill:none;
    stroke:var(--gold-bright);
    stroke-width:1.1;
    stroke-linecap:round;
    opacity:0.85;
    stroke-dasharray:240;
    stroke-dashoffset:240;
    animation:seam-draw 2.2s ease-out 0.4s forwards;
  }
  .kintsugi-seam .seam-fleck{
    fill:var(--gold-bright);
    opacity:0;
    animation:fleck-in 0.6s ease-out forwards;
  }
  .kintsugi-seam .seam-fleck.f2{ animation-delay:1.6s; }
  .kintsugi-seam .seam-fleck.f3{ animation-delay:1.9s; }
  .kintsugi-seam .seam-fleck.f4{ animation-delay:2.1s; }

  @keyframes seam-draw{
    to{ stroke-dashoffset:0; }
  }
  @keyframes fleck-in{
    from{ opacity:0; transform:scale(0.4); }
    to{ opacity:0.95; transform:scale(1); }
  }

  /* Tiny gilded cracks under the portrait name */
  .name-kintsugi{
    display:block;
    margin:2px auto 0;
    opacity:0.9;
  }
  .name-kintsugi path{
    fill:none;
    stroke:var(--gold-bright);
    stroke-width:0.9;
    stroke-linecap:round;
    stroke-dasharray:80;
    stroke-dashoffset:80;
    animation:seam-draw 1.8s ease-out 0.8s forwards;
  }

  /* Kintsugi tick before each Q&A tag */
  .qa-tag{ position:relative; padding-left:14px; }
  .qa-tag::before{
    content:"";
    position:absolute;
    left:0; top:50%;
    width:8px; height:1px;
    background:var(--gold-bright);
    transform:translateY(-50%) rotate(-12deg);
    box-shadow:0 2px 0 -0.5px var(--gold);
  }

  /* Subtle gold corner flecks on edit-note */
  .edit-note::after{
    content:"";
    position:absolute;
    right:-2px; bottom:-2px;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--gold-bright);
    opacity:0.55;
  }
  .edit-note{ position:relative; }

  @media (prefers-reduced-motion: reduce){
    .parallax-portrait,
    .parallax-caption,
    .parallax-divider{ transform:none !important; transition:none !important; }
    .kintsugi-seam .seam-path,
    .name-kintsugi path{ animation:none; stroke-dashoffset:0; }
    .kintsugi-seam .seam-fleck{ animation:none; opacity:0.9; }
  }

  /* ---------- Semnatura ---------- */
  .signature{
    margin-top:56px;
    text-align:center;
  }
  .signature .sig-name{
    font-family:'Mrs Saint Delafield', cursive;
    font-size:60px;
    line-height:1;
    color:var(--ink);
    opacity:.88;
    display:inline-block;
    transform:rotate(-3.2deg) skewX(-2deg);
    letter-spacing:.01em;
  }
  .signature .sig-rule{
    width:190px;
    height:1px;
    margin:14px auto 0;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:.55;
    transform:rotate(-1.1deg);
  }