:root{
    /* ─── BRAND PALETTE (canonical, exactly 8) ─── */
    --cloud-cream:    #F6F0E6;
    --sage-mint:      #A9C9A4;
    --soft-moss:      #7FA27B;
    --caramel:        #D4A373;
    --milk-chocolate: #7A5A46;
    --cocoa-bean:     #4E382C;
    --strawberry-milk:#E7B6BE;
    --sky-mist:       #BFE7E8;

    /* ─── Semantic aliases ─── */
    --cream:     var(--cloud-cream);
    --sage:      var(--sage-mint);
    --moss:      var(--soft-moss);
    --milk-choc: var(--milk-chocolate);
    --cocoa:     var(--cocoa-bean);
    --strawberry:var(--strawberry-milk);
    --sky:       var(--sky-mist);

    --ink:      var(--cocoa-bean);
    --ink-soft: var(--milk-chocolate);
    --rule:      rgba(78,56,44,0.20);
    --rule-soft: rgba(78,56,44,0.10);

    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background: #9B7960;
    color: var(--ink);
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding: 28px;
    min-height: 100vh;
  }

  /* ───── Outer frame (the brown/tan rounded outer card) ───── */
  .frame{
    background: var(--cream);
    border-radius: 26px;
    box-shadow:
      0 2px 3px rgba(40,24,14,0.10),
      0 6px 10px rgba(40,24,14,0.16),
      0 14px 22px rgba(40,24,14,0.18);
    max-width: 1020px;
    margin: 0 auto;
    overflow: visible;
  }

  .page{
    padding: 10px 10px 0;
  }

  /* ───── Header ───── */
  header.top{
    position: relative;
    display:flex;
    align-items:center;
    gap: 18px;
    padding: 14px 28px 18px 22px;
    margin: 6px 0 0;
  }
  /* dashed frame uses SVG so it matches the page-divider's dash pattern exactly */
  .dash-frame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    display: block;
  }
  .dash-frame path{
    fill: none;
    stroke: var(--caramel);
    stroke-width: 1.5;
    stroke-dasharray: 9 3 6 4 8 3.5 5 4;
    stroke-linecap: round;
  }
  /* full-width horizontal dashed line that completes the header bottom and extends past it */
  .page-divider{
    display: block;
    width: calc(100% + 20px);
    margin: 0 -10px;
    height: 4px;
    overflow: visible;
  }
  .page-divider line{
    fill: none;
    stroke: var(--caramel);
    stroke-width: 1.5;
    stroke-dasharray: 9 3 6 4 8 3.5 5 4;
    stroke-linecap: round;
  }
  /* single tiny sparkle flanking the header on the far left */
  .header-spark{ color: var(--caramel); fill: currentColor; display:block; }
  .logo-mark{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    text-decoration:none;
  }
  .logo-svg{ display:block; }
  .logo-img{ display:block; height: 72px; width:auto; }

  nav.primary{
    position: relative;
    display:flex;
    gap: 20px;
    margin-left: 6px;
  }
  nav.primary a{
    font-family:'Nunito', sans-serif;
    font-weight: 800;
    letter-spacing: 0.22em;
    font-size: 12.5px;
    color: var(--milk-choc);
    text-decoration: none;
    padding: 6px 2px;
    position: relative;
  }
  nav.primary a.active{ color: var(--cocoa); }
  .nav-indicator{
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 36px;
    height: 10px;
    pointer-events: none;
    background: no-repeat center/100% 100%
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' fill='none'><line x1='2' y1='5' x2='34' y2='5' stroke='%237A5A46' stroke-width='1.6' stroke-linecap='round'/><path d='M18 0 L20 4 L24 5 L20 6 L18 10 L16 6 L12 5 L16 4 Z' fill='%237A5A46'/></svg>");
    transform: translate(0, 0);
    transition: transform 0.42s cubic-bezier(.5,.05,.2,1), opacity .2s;
    will-change: transform;
  }
  .socials{
    margin-left:auto;
    display:flex;
    gap: 8px;
  }
  .socials a{
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--cocoa);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color: var(--cream);
    text-decoration:none;
    transition: transform .15s ease, background .15s ease;
  }
  .socials a:hover{ transform: translateY(-2px); background: var(--milk-choc); }
  .socials svg{ width: 15px; height: 15px; fill: currentColor; display:block; }

  /* ───── Section card ───── */
  .card{
    background: var(--cream);
    border: 1.5px dashed var(--rule);
    border-radius: var(--radius-lg);
    padding: 34px 38px;
    margin-top: 22px;
    position: relative;
  }
  /* small sparkles peppered on cards */
  .card::before, .card::after{
    content:"";
    position:absolute;
    width: 8px; height: 8px;
    background: var(--caramel);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    opacity: .8;
  }
  .card::before{ top: 14px; left: 16px; }
  .card::after{ bottom: 14px; right: 16px; }

  /* Section label like "✦ ABOUT ✦" */
  .eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 12px;
    font-family:'Nunito', sans-serif;
    font-weight: 800;
    letter-spacing: 0.34em;
    font-size: 13px;
    color: var(--milk-choc);
    margin: 0 0 22px;
  }
  .eyebrow svg{ fill: var(--caramel); }

  /* ───── Hero ───── */
  .hero{
    padding: 0;
    overflow: hidden;
    border: none;
    background: transparent;
    margin-top: 22px;
    border-top-left-radius: 0;
  }
  .hero::before, .hero::after{ display: none; }
  .hero-inner{
    position: relative;
    border-radius: var(--radius-lg);
    border-top-left-radius: 0;
    overflow: hidden;
    aspect-ratio: 980 / 520;
    box-shadow: inset 0 0 0 1.5px var(--rule-soft);
    isolation: isolate;
  }
  /* dashed outline around hero — same colour + dash pattern as the header frame */
  .hero-dash-frame{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 6;
    display: block;
  }
  .hero-dash-frame path{
    fill: none;
    stroke: var(--caramel);
    stroke-width: 1.5;
    stroke-dasharray: 9 3 6 4 8 3.5 5 4;
    stroke-linecap: round;
  }
  /* bottom is raised slightly (in JS) so the full stroke clears the
     overflow:hidden clip; same 1.5px weight as the other sides. */
  /* sparse decorative dashes that trail toward the corners —
     square caps keep them as crisp little rectangles instead of pill-shaped. */
  .hero-dash-frame path.sparse{
    stroke-dasharray: none;
    stroke-linecap: square;
  }
  /* Soft sky gradient (the commissioned art will sit on top of this) */
  .hero-sky{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--sky) 60%, var(--cream)) 0%,
        var(--sky) 38%,
        color-mix(in srgb, var(--cream) 70%, var(--sky)) 92%,
        var(--cream) 100%);
    z-index: 0;
  }
  /* faint, soft cloud silhouettes to hint at the illustration */
  .hero-clouds{
    position:absolute; inset:0;
    z-index: 1;
    opacity: .92;
  }
  /* very subtle stripe overlay so it still reads as placeholder */
  .hero-art-slot{
    position:absolute; inset:0;
    z-index: 2;
    background:
      repeating-linear-gradient(135deg,
        rgba(122,90,70,0.025) 0 18px,
        rgba(122,90,70,0) 18px 36px);
    pointer-events:none;
  }
  .art-tag{
    position:absolute;
    z-index: 5;
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--cocoa);
    background: rgba(246,240,230,0.94);
    border: 1px dashed var(--milk-choc);
    border-radius: 8px;
    padding: 7px 10px;
    line-height: 1.45;
  }
  .art-tag b{
    display:block;
    letter-spacing:0.12em;
    font-size:9.5px;
    color: var(--caramel);
    margin-bottom: 2px;
  }
  .hero-art-tag{
    right: 16px;
    bottom: 16px;
    max-width: 300px;
  }

  .hero-copy{
    position:absolute;
    inset: 0;
    padding: 56px 56px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width: 62%;
    z-index: 4;
  }
  .hero h1{
    font-family:'Newsreader', serif;
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--cocoa);
    margin: 0 0 20px;
    text-wrap: balance;
  }
  .hero-tag{
    display:flex;
    align-items:center;
    gap: 10px;
    font-family:'Nunito', sans-serif;
    font-weight: 800;
    letter-spacing: 0.28em;
    font-size: 13px;
    color: var(--milk-choc);
    margin-bottom: 28px;
  }
  .hero-tag .dot{ color: var(--caramel); }

  /* sparkle overlay (SVG) — pure decoration, no commissioned art */
  .hero-sparkles{
    position:absolute; inset:0;
    pointer-events:none;
    z-index: 3;
  }

  /* ───── Buttons (brand stitched pill) ───── */
  .btn{
    /* defaults: EXPLORE variant (strawberry) */
    --bg: var(--strawberry);
    --fg: #ffffff;
    --stitch: rgba(255,255,255, 0.85);

    position: relative;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    white-space: nowrap;
    font-family:'Nunito', sans-serif;
    font-weight: 900;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--fg);
    background: var(--bg);
    border: none;
    border-radius: 24px;
    padding: 14px 24px;
    text-decoration:none;
    cursor:pointer;
    box-shadow:
      0 2px 3px rgba(78,56,44, 0.18),
      0 4px 6px rgba(78,56,44, 0.10);
    text-shadow: 0 1px 0 rgba(78,56,44, 0.18);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  /* SVG dashed stitch — thin stroke + long dashes via stroke-dasharray */
  .btn .stitch{
    position: absolute;
    top: 5px; left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    pointer-events: none;
    overflow: visible;
    display: block;
  }
  .btn .stitch rect{
    fill: none;
    stroke: var(--stitch);
    stroke-width: 1.2;
    stroke-dasharray: 9 3 6 4 8 3.5 5 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .btn > span, .btn > .arrow{ position: relative; z-index: 1; }
  .btn:hover{
    transform: translateY(-1px);
    box-shadow:
      0 3px 4px rgba(78,56,44, 0.20),
      0 6px 8px rgba(78,56,44, 0.12);
  }
  .btn:active{
    transform: translateY(1px);
    box-shadow:
      0 1px 2px rgba(78,56,44, 0.18),
      0 2px 3px rgba(78,56,44, 0.10);
  }
  .btn .arrow{ width:16px; height:16px; }

  /* Variants — white text everywhere; light dashes everywhere */
  .btn.adventure{ --bg: var(--milk-choc);  --fg: #ffffff; --stitch: rgba(246,240,230, 0.80); }
  .btn.dream    { --bg: var(--moss);       --fg: #ffffff; --stitch: rgba(255,255,255, 0.85); }
  .btn.explore  { --bg: var(--strawberry); --fg: var(--cocoa); --stitch: rgba(78,56,44, 0.40); text-shadow: none; }
  .btn.create   { --bg: var(--sky);        --fg: #ffffff; --stitch: rgba(255,255,255, 0.90); }
  .btn.caramel  { --bg: var(--caramel);    --fg: #ffffff; --stitch: rgba(255,255,255, 0.85); }
  .btn.ghost    { --bg: var(--cream);      --fg: var(--cocoa); --stitch: rgba(78,56,44, 0.35); }

  /* ───── About ───── */
  .about-card{ position: relative; }
  .about-dash-frame{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    display: block;
  }
  .about-dash-frame path{
    fill: none;
    stroke: var(--caramel);
    stroke-width: 1.5;
    stroke-dasharray: 9 3 6 4 8 3.5 5 4;
    stroke-linecap: round;
  }
  .about-grid{
    display:grid;
    grid-template-columns: 230px 1fr;
    gap: 36px;
    align-items: center;
  }
  .about-portrait-wrap{
    position: relative;
    width: 230px; height: 230px;
  }
  .about-portrait{
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px dashed var(--milk-choc);
    background:
      repeating-linear-gradient(45deg,
        rgba(122,90,70,0.06) 0 12px,
        rgba(122,90,70,0) 12px 24px),
      color-mix(in srgb, var(--cream) 88%, var(--caramel));
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 18px;
    position: relative;
  }
  .about-portrait .label{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--cocoa);
  }
  .about-portrait .label b{
    display:block;
    letter-spacing: 0.16em;
    font-size: 9.5px;
    color: var(--caramel);
    margin-bottom: 4px;
  }
  .about-body{ text-align:center; }
  .about-body h2{
    font-family:'Newsreader', serif;
    font-weight: 700;
    font-size: 36px;
    margin: 4px 0 14px;
    color: var(--cocoa);
  }
  .about-body p{
    color: var(--milk-choc);
    max-width: 460px;
    margin: 0 auto 22px;
    font-size: 15.5px;
  }

  /* ───── Featured Work ───── */
  .work-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 8px 0 24px;
  }
  .work-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 14px;
  }
  .work-thumb{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    border: none;
    background:
      repeating-linear-gradient(135deg,
        rgba(122,90,70,0.07) 0 12px,
        rgba(122,90,70,0) 12px 24px),
      color-mix(in srgb, var(--cream) 88%, var(--caramel));
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
    text-align:center;
    transition: transform .15s ease;
    overflow: hidden;
  }
  /* signature caramel dashed frame, matching the site's other panels */
  .work-thumb::after{
    content:"";
    position:absolute;
    inset: 0;
    border-radius: 22px;
    pointer-events: none;
    z-index: 4;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect x='0.75' y='0.75' width='98.5' height='98.5' rx='8' ry='8' fill='none' stroke='%23D4A373' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='9 3 6 4 8 3.5 5 4' vector-effect='non-scaling-stroke'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .work-card:hover .work-thumb{ transform: translateY(-3px); }
  /* coloured wash hint to suggest the artwork direction — palette only */
  .work-thumb.wash-sky{ background:
      repeating-linear-gradient(135deg, rgba(122,90,70,0.05) 0 12px, rgba(122,90,70,0) 12px 24px),
      linear-gradient(180deg,
        color-mix(in srgb, var(--sky) 55%, var(--cream)),
        color-mix(in srgb, var(--cream) 80%, var(--sky))); }
  .work-thumb.wash-leaf{ background:
      repeating-linear-gradient(135deg, rgba(122,90,70,0.05) 0 12px, rgba(122,90,70,0) 12px 24px),
      linear-gradient(180deg,
        color-mix(in srgb, var(--sage) 70%, var(--cream)),
        color-mix(in srgb, var(--sage) 40%, var(--cream))); }
  .work-thumb.wash-world{ background:
      repeating-linear-gradient(135deg, rgba(122,90,70,0.05) 0 12px, rgba(122,90,70,0) 12px 24px),
      linear-gradient(180deg,
        color-mix(in srgb, var(--sage) 40%, var(--cream)),
        color-mix(in srgb, var(--sage) 70%, var(--cream))); }
  .work-thumb .label{
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--cocoa);
    background: rgba(246,240,230,0.92);
    border-radius: 8px;
    padding: 7px 10px;
    max-width: 80%;
  }
  .work-thumb .label b{
    display:block;
    letter-spacing: 0.16em;
    font-size: 9.5px;
    color: var(--caramel);
    margin-bottom: 4px;
  }
  .work-card .cap{
    font-family:'Nunito', sans-serif;
    font-weight: 800;
    letter-spacing: 0.22em;
    font-size: 12px;
    color: var(--milk-choc);
    display:flex;
    flex-direction: column;
    align-items:center;
    align-self: stretch;
    gap: 6px;
  }
  .work-card .cap .cap-rule{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap: 8px;
    width: 80%;
  }
  .work-card .cap .cap-rule .line{
    flex: 1;
    height: 1px;
    background: var(--caramel);
    opacity: 0.85;
  }
  .work-card .cap svg{ fill: var(--caramel); display:block; }
  .work-card .cap .label{ white-space: nowrap; }
  .work-cta{ text-align:center; }

  /* ───── Let's Connect ───── */
  .connect{
    background: linear-gradient(180deg, #CDD0B7 0%, #B7BCA0 100%);
    border: none;
    color: var(--cocoa);
    overflow:hidden;
    padding: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .connect::before, .connect::after{ display:none; }
  .connect-inner{
    position:relative;
    padding: 52px 40px 56px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height: 280px;
  }
  /* cloud silhouettes at the base, like the mockup */
  .connect-clouds{
    position:absolute; left:0; right:0; bottom:0;
    z-index: 1;
    opacity: .9;
    pointer-events:none;
  }
  .connect-art-tag{
    position:absolute;
    left: 16px; bottom: 16px;
    z-index: 5;
    max-width: 280px;
    text-align:left;
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--cocoa);
    background: rgba(246,240,230,0.94);
    border: 1px dashed var(--milk-choc);
    border-radius: 8px;
    padding: 7px 10px;
    line-height: 1.45;
  }
  .connect-art-tag b{ display:block; letter-spacing:0.12em; font-size:9.5px; color: var(--caramel); margin-bottom: 2px; }

  .connect h2{
    font-family:'Newsreader', serif;
    font-weight: 700;
    font-size: 40px;
    margin: 0 0 12px;
    color: var(--cocoa);
    position:relative;
    z-index: 3;
  }
  .connect p{
    color: var(--cocoa);
    margin: 0 0 22px;
    position:relative;
    z-index: 3;
  }
  .connect .mail-btn{
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #D88E84;
    border: none;
    box-shadow:
      0 2px 3px rgba(78,56,44, 0.18),
      0 4px 6px rgba(78,56,44, 0.10);
    color: #ffffff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index: 3;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .connect .mail-btn .stitch{
    position: absolute;
    top: 5px; left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    pointer-events: none;
    overflow: visible;
    display: block;
  }
  .connect .mail-btn .stitch circle{
    fill: none;
    stroke: rgba(255,255,255, 0.85);
    stroke-width: 1.2;
    stroke-dasharray: 7 3 5 4 6 3.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .mail-btn:hover{
    transform: translateY(-1px);
    box-shadow:
      0 3px 4px rgba(78,56,44, 0.20),
      0 6px 8px rgba(78,56,44, 0.12);
  }
  .mail-btn > svg.icon{ width: 22px; height: 22px; fill: none; stroke: currentColor; position:relative; z-index:1; }

  /* small flanking illustration placeholders inside the connect panel */
  .connect-side{
    position:absolute;
    top: 50%; transform: translateY(-50%);
    width: 110px; height: 110px;
    border-radius: 16px;
    border: 1.5px dashed var(--milk-choc);
    background: rgba(246,240,230,0.55);
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding: 8px;
    z-index: 2;
  }
  .connect-side.left{ left: 36px; }
  .connect-side.right{ right: 36px; }
  .connect-side .label{
    font-family:'JetBrains Mono', monospace;
    font-size: 9.5px;
    line-height: 1.4;
    color: var(--cocoa);
  }
  .connect-side .label b{
    display:block;
    letter-spacing: 0.14em;
    font-size: 9px;
    color: var(--caramel);
    margin-bottom: 3px;
  }

  /* inset dashed caramel border for the Let's Connect panel (matches footer) */
  .connect-dash-frame{
    position: absolute;
    top: 14px;
    left: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 14px);
    pointer-events: none;
    overflow: visible;
    display: block;
    z-index: 6;
  }
  .connect-dash-frame path,
  .connect-dash-frame rect{
    fill: none;
    stroke: rgba(0,0,0,0.15);
    stroke-width: 1.4;
    stroke-dasharray: 9 3 6 4 8 3.5 5 4;
    stroke-linecap: round;
    opacity: 1;
    mix-blend-mode: multiply;
  }

  /* ───── Wooden bar between Let's Connect & Footer ───── */
  .wood-bar{
    position: relative;
    height: 20px;
    margin: 0 -14px;
    border-radius: 999px;
    /* sharp, offset drop shadow — like a wooden brace casting a hard shadow */
    filter:
      drop-shadow(0 3px 0 rgba(32,18,10,0.15))
      drop-shadow(0 1px 0 rgba(0,0,0,0.1));
    background:
      /* knots — small dark elliptical specks */
      radial-gradient(ellipse 10px 3px at 12% 55%, rgba(40,20,10,0.45), transparent 70%),
      radial-gradient(ellipse 14px 3px at 38% 35%, rgba(40,20,10,0.35), transparent 70%),
      radial-gradient(ellipse 8px 2.5px at 64% 65%, rgba(40,20,10,0.4),  transparent 70%),
      radial-gradient(ellipse 18px 3px at 86% 45%, rgba(40,20,10,0.32), transparent 70%),
      /* warm vertical falloff — top edge highlight, bottom shadow */
      linear-gradient(180deg,
        #8E6038 0%,
        #7A4F2E 18%,
        #6A4226 55%,
        #553523 88%,
        #4A2E1E 100%);
    overflow: hidden;
    z-index: 2;
  }
  /* organic wavy wood grain lines — replaces the straight streaks */
  .wood-bar::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='40' viewBox='0 0 1000 40' preserveAspectRatio='none'>\
<g fill='none' stroke-linecap='round'>\
<path d='M0,5 C120,3 240,9 360,6 C500,3 640,10 780,6 C880,3 960,8 1000,6' stroke='%23a87a4d' stroke-width='0.6' opacity='0.55'/>\
<path d='M0,11 C160,14 320,8 480,12 C640,16 800,10 1000,13' stroke='%23c89868' stroke-width='0.5' opacity='0.42'/>\
<path d='M0,17 C140,15 300,21 460,18 C620,15 780,21 1000,18' stroke='%23633e22' stroke-width='0.7' opacity='0.7'/>\
<path d='M0,22 C200,25 400,19 600,23 C800,27 920,22 1000,24' stroke='%23a87a4d' stroke-width='0.5' opacity='0.45'/>\
<path d='M0,28 C160,26 340,31 520,28 C700,25 860,31 1000,28' stroke='%23512f1a' stroke-width='0.7' opacity='0.7'/>\
<path d='M0,34 C180,36 360,32 540,35 C720,38 880,34 1000,36' stroke='%23a87a4d' stroke-width='0.5' opacity='0.4'/>\
</g></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    mix-blend-mode: overlay;
    opacity: 0.95;
  }
  /* a faint plank join — a thin vertical seam to suggest two boards */
  .wood-bar::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg, transparent 49.7%, rgba(0,0,0,0.28) 49.85%, rgba(0,0,0,0.28) 50.15%, transparent 50.3%);
    z-index: 0;
    opacity: 0.6;
  }
  /* the torn / rough top edge — slightly lighter strip with an irregular bottom */
  .wood-bar-edge{
    position: absolute;
    left: 0; right: 0; top: 0;
    width: 100%;
    height: 6px;
    display: block;
    pointer-events: none;
    z-index: 2;
  }
  .wood-bar-edge path{ fill: #a07349; }
  /* hand-drawn stitched squiggle running across the top of the bar */
  .wood-bar-stitch{
    position: absolute;
    left: 0; right: 0; top: 1px;
    width: 100%;
    height: 8px;
    display: block;
    pointer-events: none;
    z-index: 3;
  }
  .wood-bar-stitch path{
    fill: none;
    stroke: var(--caramel);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 6 10 4 12 7 11 5 13;
    opacity: 0.9;
  }

  /* ───── Footer ───── */
  footer{
    margin-top: 0;
    background: #3E2B21;
    color: var(--cream);
    padding: 22px 44px 10px;
    position:relative;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  /* leather-grain texture overlay — fractal noise blended over cocoa */
  footer::after{
    content:"";
    position:absolute;
    inset: 0;
    pointer-events: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-image:
      radial-gradient(140% 100% at 50% 0%, rgba(255,220,180,0.08), transparent 70%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='400' preserveAspectRatio='none'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='400' preserveAspectRatio='none'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='3' stitchTiles='stitch' seed='12'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='400' preserveAspectRatio='none'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='2' stitchTiles='stitch' seed='21'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: auto, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-blend-mode: normal, overlay, soft-light, soft-light;
    mix-blend-mode: overlay;
    opacity: 0.6;
    z-index: 0;
  }
  /* keep footer content above the texture overlay */
  footer > *{ position: relative; z-index: 1; }
  /* scalloped/torn top edge so the footer reads like stitched leather under the sky panel */
  .footer-edge{
    position:absolute;
    left: 0; right: 0; top: -1px;
    width: 100%;
    height: 22px;
    display: block;
    pointer-events: none;
    color: var(--cocoa);
  }
  .footer-edge path{ fill: currentColor; }
  /* inset dashed border, caramel, hugging the footer (no top — verticals run flush to top) */
  .footer-dash-frame{
    position: absolute;
    top: 0;
    left: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 14px);
    pointer-events: none;
    overflow: visible;
    display: block;
  }
  .footer-dash-frame path,
  .footer-dash-frame rect{
    fill: none;
    stroke: var(--caramel);
    stroke-width: 1.4;
    stroke-dasharray: 9 3 6 4 8 3.5 5 4;
    stroke-linecap: round;
    opacity: 0.85;
  }
  .footer-grid{
    position: relative;
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 36px;
    align-items:start;
    padding: 6px 18px 2px;
  }
  /* dashed vertical rules between the first three columns */
  .footer-col{ position: relative; }
  .footer-col::before{
    content:"";
    position:absolute;
    left: -18px;
    top: 4px; bottom: 4px;
    width: 0;
    border-left: 1.4px dashed rgba(212,163,115,0.55);
  }
  .footer-brand{ text-align: left; }
  .footer-brand .logo-img{ height: 92px; max-width: 100%; }
  .footer-brand small{
    display:block;
    margin-top: 14px;
    color: rgba(246,240,230,0.78);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    max-width: 260px;
  }
  .footer-brand .heart{
    text-align: center;
    width: 200px;
    margin: 10px auto 0;
    color: var(--strawberry);
    font-size: 18px;
    line-height: 1;
  }
  .footer-col h4{
    font-family:'Nunito', sans-serif;
    font-weight:800;
    letter-spacing:0.22em;
    font-size:12px;
    color: var(--cream);
    margin: 8px 0 14px;
  }
  .footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
  .footer-col ul a{
    color: rgba(246,240,230,0.78);
    text-decoration:none;
    font-size: 14px;
  }
  .footer-col ul a:hover{ color: var(--caramel); }
  .footer-socials{ display:flex; gap: 12px; margin-top: 6px; }
  .footer-socials a{
    width: 40px; height: 40px; border-radius: 50%;
    background: transparent;
    color: #ffffff;
    border: 1.4px solid var(--caramel);
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none;
    transition: background .15s ease, color .15s ease;
  }
  .footer-socials a:hover{ background: var(--caramel); color: var(--cocoa); }
  .footer-socials svg{ width:24px; height:24px; fill: currentColor; display:block; }

  .stamp{
    width: 150px;
    height: 116px;
    overflow: visible;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
  }
  .stamp .label{
    font-family:'JetBrains Mono', monospace;
    font-size: 9.5px;
    line-height: 1.4;
    color: rgba(246,240,230,0.8);
  }
  .stamp .label b{
    display:block;
    letter-spacing: 0.14em;
    font-size: 9px;
    color: var(--caramel);
    margin-bottom: 4px;
  }

  .copyright{
    position: relative;
    margin: 8px 18px 0;
    padding-top: 2px;
    font-size: 12px;
    color: rgba(246,240,230,0.6);
    display:flex; gap: 12px;
    align-items:center;
  }
  .copyright .dot{ opacity: .5; }

  .sparkle-abs{ position:absolute; pointer-events:none; }

  @media (max-width: 820px){
    body{ padding: 14px; }
    .page{ padding: 18px 18px 0; }
    .card{ padding: 26px 22px; }
    /* header wraps: logo + socials on the top row, primary nav beneath them */
    header.top{ flex-wrap: wrap; gap: 12px; padding: 12px 18px 16px; }
    .logo-img{ height: 56px; }
    .socials{ order: 1; gap: 6px; }
    nav.primary{
      order: 2;
      flex-basis: 100%;
      width: 100%;
      justify-content: center;
      gap: 32px;
      margin: 4px 0 0;
    }
    .hero-copy{ max-width: 100%; padding: 40px 30px; justify-content: flex-end; }
    .hero-inner{ aspect-ratio: auto; min-height: 380px; }
    .hero h1{ font-size: clamp(34px, 8.6vw, 50px); margin-bottom: 16px; }
    .hero-tag{
      flex-wrap: wrap;
      gap: 6px 9px;
      letter-spacing: 0.16em;
      font-size: 12px;
      margin-bottom: 0;
    }
    .about-grid{ grid-template-columns: 1fr; justify-items:center; }
    .work-grid{ grid-template-columns: 1fr; }
    footer{ padding: 22px 24px 10px; }
    .footer-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-col::before{ display:none; }
    .stamp{ display:none; }
    .connect-side{ display:none; }
  }

  /* ───── Narrow phones: stack header tight, collapse footer to one column ───── */
  @media (max-width: 520px){
    header.top{ gap: 10px; padding: 10px 14px 14px; }
    .logo-img{ height: 46px; }
    .socials a{ width: 28px; height: 28px; }
    .socials svg{ width: 14px; height: 14px; }
    nav.primary{ gap: 26px; }

    .hero-inner{ min-height: 340px; }
    .hero-copy{ padding: 30px 20px; }
    .hero-tag{ letter-spacing: 0.06em; font-size: 10px; gap: 4px 6px; }

    footer{ padding: 20px 16px 12px; }
    .footer-grid{
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 20px;
    }
    .footer-brand{ text-align: center; }
    .footer-col{ text-align: center; }
    .footer-socials{ justify-content: center; }
    .copyright{
      margin: 8px auto 0;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
    }
  }

  /* ═══════════ BLOG POST ═══════════ */
  /* bottom margin gives breathing room before the footer on blog pages,
     which (unlike the home page) have no Let's Connect panel above it. */
  .post{ padding: 42px 46px 46px; margin-bottom: 22px; }
  .post-head{ max-width: 740px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
  .cat-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 0 0 22px; }
  .chip{
    font-family:'Nunito', sans-serif; font-weight:800; letter-spacing:0.16em;
    font-size:11px; color: var(--cocoa); text-decoration:none;
    background: color-mix(in srgb, var(--caramel) 26%, var(--cream));
    border: 1.4px dashed color-mix(in srgb, var(--caramel) 70%, var(--milk-choc));
    border-radius: 999px; padding: 7px 15px 6px; line-height:1;
    transition: transform .15s ease, background .15s ease;
  }
  .chip:hover{ transform: translateY(-1px); }
  .chip.sky{ background: color-mix(in srgb, var(--sky) 55%, var(--cream)); border-color: color-mix(in srgb, var(--sky) 50%, var(--milk-choc)); }
  .chip.sage{ background: color-mix(in srgb, var(--sage) 55%, var(--cream)); border-color: color-mix(in srgb, var(--moss) 60%, var(--cream)); }
  .chip.berry{ background: color-mix(in srgb, var(--strawberry) 55%, var(--cream)); border-color: color-mix(in srgb, var(--strawberry) 45%, var(--milk-choc)); }

  .post-title{
    font-family:'Newsreader', serif; font-weight:700;
    font-size: clamp(34px, 5vw, 52px); line-height:1.08; letter-spacing:-0.01em;
    color: var(--cocoa); margin: 0 0 16px; text-wrap: balance;
  }
  .post-dek{
    font-family:'Newsreader', serif; font-style:italic; font-weight:500;
    font-size: 20px; line-height:1.45; color: var(--milk-choc);
    margin: 0 auto 26px; max-width: 560px; text-wrap: pretty;
  }
  .post-meta{
    display:flex; gap: 12px; align-items:center; justify-content:center;
    font-family:'Nunito', sans-serif; font-weight:700; letter-spacing:0.06em;
    font-size: 13px; color: var(--milk-choc);
  }
  .post-meta .who{ display:flex; align-items:center; gap:10px; }
  .post-meta .avatar{
    width: 40px; height: 40px; border-radius:50%;
    border: 1.6px dashed var(--milk-choc);
    background: color-mix(in srgb, var(--cream) 86%, var(--caramel));
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .post-meta .dot{ color: var(--caramel); }

  /* hero image */
  .post-hero{
    position: relative; margin: 32px 0 4px;
    aspect-ratio: 980 / 430; border-radius: var(--radius-lg);
    overflow:hidden; isolation:isolate;
    box-shadow: inset 0 0 0 1.5px var(--rule-soft);
  }
  .edge-frame{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; overflow:visible; z-index:6; display:block;
  }
  .edge-frame path{
    fill:none; stroke:var(--caramel); stroke-width:1.5;
    stroke-dasharray:9 3 6 4 8 3.5 5 4; stroke-linecap:round;
  }
  .post-hero .hero-sky{ z-index:0; }
  .post-hero .hero-clouds{ z-index:1; }
  .post-hero .scene{ position:absolute; inset:0; z-index:2; }

  /* body */
  .post-body{ max-width: 680px; margin: 34px auto 0; position:relative; z-index:2; }
  .post-body p{ font-size: 17px; line-height: 1.78; color: var(--cocoa); margin: 0 0 20px; text-wrap: pretty; }
  .post-body > p:first-of-type::first-letter{
    font-family:'Newsreader', serif; font-weight:700; font-size: 66px;
    float:left; line-height:0.78; padding: 8px 12px 0 0; color: var(--caramel);
  }
  .post-body h2{
    font-family:'Newsreader', serif; font-weight:700; font-size: 30px;
    color: var(--cocoa); margin: 38px 0 14px; display:flex; align-items:center; gap:12px;
  }
  .post-body h2 svg{ fill: var(--caramel); flex:none; }
  .post-body ul{ list-style:none; padding:0; margin: 6px 0 24px; display:flex; flex-direction:column; gap: 13px; }
  .post-body li{ position:relative; padding-left: 30px; font-size: 17px; line-height: 1.6; color: var(--cocoa); }
  .post-body li::before{
    content:""; position:absolute; left:2px; top: 4px; width:15px; height:15px;
    background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 C12.6 7.4 16.6 11.4 22.5 12 16.6 12.6 12.6 16.6 12 22.5 11.4 16.6 7.4 12.6 1.5 12 7.4 11.4 11.4 7.4 12 1.5 Z' fill='%23D4A373'/></svg>");
  }
  .post-body li b{ color: var(--milk-choc); }

  .pullquote{
    position: relative; text-align:center; margin: 34px 0;
    padding: 26px 40px;
    font-family:'Newsreader', serif; font-style:italic; font-weight:500;
    font-size: 26px; line-height: 1.42; color: var(--milk-choc); text-wrap: balance;
  }
  .pullquote::before, .pullquote::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    width: 56px; height: 12px;
    background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12'><g fill='%23D4A373'><path d='M28 1 C28.4 4 30.6 6.2 33.6 6.6 30.6 7 28.4 9.2 28 12.2 27.6 9.2 25.4 7 22.4 6.6 25.4 6.2 27.6 4 28 1 Z'/><circle cx='12' cy='6.5' r='1.4'/><circle cx='44' cy='6.5' r='1.4'/></g></svg>");
  }
  .pullquote::before{ top: -6px; }
  .pullquote::after{ bottom: -6px; }

  figure.post-fig{ margin: 30px 0; }
  figure.post-fig .fig-img{
    position:relative; aspect-ratio: 16/9; border-radius: var(--radius-md);
    overflow:hidden;
    background:
      repeating-linear-gradient(135deg, rgba(122,90,70,0.05) 0 12px, rgba(122,90,70,0) 12px 24px),
      linear-gradient(180deg, color-mix(in srgb, var(--sky) 45%, var(--cream)), color-mix(in srgb, var(--cream) 82%, var(--sage)));
  }
  figure.post-fig figcaption{
    font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--milk-choc);
    text-align:center; margin-top: 12px; letter-spacing: 0.02em;
  }

  /* author bio + pager */
  .author-bio{
    display:flex; gap: 22px; align-items:center; max-width: 680px;
    margin: 40px auto 0; padding-top: 30px; border-top: 1.5px dashed var(--rule);
  }
  .author-bio .ab-portrait{
    width: 92px; height: 92px; flex:none; border-radius:50%;
    border: 1.8px dashed var(--milk-choc);
    background: color-mix(in srgb, var(--cream) 86%, var(--caramel));
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .author-bio .ab-text h4{
    font-family:'Nunito', sans-serif; font-weight:800; letter-spacing:0.18em;
    font-size: 12px; color: var(--milk-choc); margin: 0 0 6px;
  }
  .author-bio .ab-text .name{
    font-family:'Newsreader', serif; font-weight:700; font-size: 22px;
    color: var(--cocoa); margin: 0 0 8px;
  }
  .author-bio .ab-text p{ margin:0; font-size: 14.5px; line-height:1.6; color: var(--milk-choc); }

  .post-pager{
    display:flex; justify-content:space-between; gap: 18px; flex-wrap:wrap;
    max-width: 680px; margin: 34px auto 4px;
  }
  .pager-link{
    text-decoration:none; color: var(--milk-choc); display:flex; flex-direction:column; gap:4px;
    font-family:'Nunito', sans-serif; max-width: 46%;
  }
  .pager-link.next{ text-align:right; align-items:flex-end; }
  .pager-link .lbl{ font-weight:800; letter-spacing:0.18em; font-size:11px; color: var(--caramel); }
  .pager-link .ttl{ font-family:'Newsreader', serif; font-weight:600; font-size:18px; color: var(--cocoa); line-height:1.2; }
  .pager-link:hover .ttl{ color: var(--milk-choc); }

  @media (max-width: 820px){
    .post{ padding: 26px 22px 30px; }
    .post-dek{ font-size:18px; }
    .post-meta{ flex-wrap:wrap; }
    .author-bio{ flex-direction:column; text-align:center; }
    .pullquote{ font-size:22px; padding:22px 12px; }
  }

  /* ───── Blog index / home post list (added for Hugo build) ───── */
  .post-list-card .post-head{ margin-bottom: 4px; }
  .post-list{
    display:flex;
    flex-direction:column;
    gap: 4px;
    margin: 8px 0 6px;
  }
  .post-list-item{
    display:block;
    text-decoration:none;
    color: inherit;
    padding: 22px 18px;
    border-radius: var(--radius-md);
    border: 1.5px dashed var(--rule-soft);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .post-list-item + .post-list-item{ margin-top: 14px; }
  .post-list-item:hover{
    transform: translateY(-2px);
    border-color: var(--caramel);
    background: color-mix(in srgb, var(--cream) 92%, var(--caramel));
  }
  .post-list-item .cat-chips{ justify-content:flex-start; margin-bottom: 12px; }
  .pli-title{
    font-family:'Newsreader', serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.12;
    color: var(--cocoa);
    margin: 0 0 8px;
  }
  .pli-dek{
    color: var(--milk-choc);
    font-size: 15.5px;
    margin: 0 0 14px;
    max-width: 60ch;
  }
  .post-list-item .post-meta{ justify-content:flex-start; }
  .pli-more{ color: var(--caramel); font-weight: 800; letter-spacing: 0.04em; }

  @media (max-width: 820px){
    .pli-title{ font-size: 22px; }
  }

  /* ───── Post body: code, blockquotes, sub-headings (added for dev-log posts) ───── */
  .post-body h3{
    font-family:'Newsreader', serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--cocoa);
    margin: 26px 0 8px;
  }
  .post-body code{
    font-family:'JetBrains Mono', monospace;
    font-size: 0.86em;
    background: color-mix(in srgb, var(--cream) 80%, var(--caramel));
    color: var(--milk-choc);
    padding: 1px 6px;
    border-radius: 6px;
  }
  .post-body pre{
    background: #3E2B21;
    color: #F6F0E6;
    border-radius: var(--radius-sm);
    border: 1.5px dashed rgba(212,163,115,0.55);
    padding: 16px 18px;
    overflow-x: auto;
    margin: 18px 0;
    line-height: 1.5;
  }
  .post-body pre code{
    font-family:'JetBrains Mono', monospace;
    font-size: 12.5px;
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
  }
  .post-body blockquote{
    margin: 20px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px dashed var(--caramel);
    color: var(--milk-choc);
    font-style: italic;
  }
  .post-body blockquote p{ margin: 8px 0; }
  .post-body blockquote em{ font-style: normal; }

  /* ───── About portrait photo — character peeking out the top of the circle ───── */
  .about-portrait.peek{
    border: none;
    background: none;
    padding: 0;
    overflow: visible;
  }
  /* the disc fill: striped cream, sitting BEHIND the character */
  .about-portrait.peek::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      repeating-linear-gradient(45deg,
        rgba(122,90,70,0.06) 0 12px,
        rgba(122,90,70,0) 12px 24px),
      color-mix(in srgb, var(--cream) 88%, var(--caramel));
    z-index: 0;
  }
  /* the dashed ring: drawn ABOVE the character so the photo never covers it */
  .about-portrait.peek::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed var(--milk-choc);
    z-index: 2;
    pointer-events: none;
  }
  /* Two identical, identically-positioned copies of the photo. Geometry
     assumes the 230px disc + 280px image width. Stacking order is:
     fill (0) < body (1) < dashed ring (2) < head (3) — so the ring sits over
     the body, but the head/antlers sit over the ring. */
  .about-portrait.peek .about-photo{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 280px;            /* wider than the 230px disc so the character fills it */
    height: auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  /* lower body: clipped to the disc circle, behind the dashed ring */
  .about-portrait.peek .about-photo.body{
    z-index: 1;
    -webkit-mask-image: radial-gradient(115px 115px at 140px 138px, #000 99.5%, transparent 100%);
    mask-image: radial-gradient(115px 115px at 140px 138px, #000 99.5%, transparent 100%);
  }
  /* head/antlers: only the top region (full-width down to ~128px), drawn
     above the ring so the ring never crosses in front of the head */
  .about-portrait.peek .about-photo.head{
    z-index: 3;
    -webkit-mask-image: linear-gradient(to bottom, #000 128px, transparent 128px);
    mask-image: linear-gradient(to bottom, #000 128px, transparent 128px);
  }

  /* ───── Author profile picture (byline avatar + author-bio portrait) ───── */
  .pfp-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 36%;   /* center on the face */
    transform: scale(1.9);       /* zoom in on the face */
    transform-origin: 50% 36%;
    display: block;
  }