:root{
    --paper: #f4eedf;
    --paper-warm: #efe7d2;
    --ink: #1a1611;
    --ink-soft: #4a4137;
    --ink-mute: #8a8071;
    --rule: #c9bfa6;
    --rule-soft: #ddd3b8;
    --oxblood: #8a2a2a;
    --oxblood-deep: #6e1f1f;
    --oxblood-tint: #f0e0db;
    --highlight: #f4d96a;
    --postit-yellow: #f9e896;
    --postit-pink: #f4c8cf;
    --postit-blue: #c8d8e8;
    --tape: rgba(220, 200, 150, 0.55);
    --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    --font-utility: 'Fraunces', Georgia, serif;
    --font-body: 'Newsreader', Georgia, serif;
  }

  *{box-sizing:border-box; margin:0; padding:0}

  html{ scroll-behavior: smooth; scroll-padding-top: 24px; }

  html, body{
    background: var(--paper);
    color: var(--ink);
    font-family: 'Newsreader', Georgia, serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body::before{
    content:'';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
  }

  /* ======================================
     MASTHEAD
     ====================================== */
  .masthead-bar{
    background: var(--ink);
    color: var(--paper);
    position: relative;
    z-index: 5;
  }

  .masthead-top{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 40px;
    gap: 40px;
  }

  .become-member{
    justify-self: start;
    background: var(--paper);
    color: var(--ink);
    padding: 10px 18px;
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .become-member:hover{ background: var(--oxblood); color: var(--paper); }

  .brand-block{ text-align: center; }
  .brand-name{
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 32px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--paper);
  }
  .brand-name a{ color: inherit; text-decoration: none; }
  .brand-sub{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.85;
    margin-top: 4px;
    border-top: 1px solid rgba(244, 238, 223, 0.35);
    padding-top: 4px;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
  }

  .top-utilities{
    justify-self: end;
    display: flex;
    gap: 24px;
    align-items: center;
  }
  .top-utilities a{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
  }
  .top-utilities a:hover{ opacity: 1; }

  .masthead-nav{
    border-top: 1px solid rgba(244, 238, 223, 0.2);
    padding: 16px 40px;
    display: flex;
    justify-content: center;
    gap: 48px;
  }
  .masthead-nav a{
    font-family: 'Fraunces', serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
  }
  .masthead-nav a:hover{ color: #f4cdc4; }

  /* ======================================
     CONTAINER
     ====================================== */
  .container{
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
  }

  /* ======================================
     HERO — POSITIONING + AVAILABILITY
     ====================================== */
  .hero{
    padding: 44px 0 70px;
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 64px;
    align-items: start;
    min-height: calc(100vh - 130px);
  }

  .hero-left{
    padding-top: 12px;
  }

  .hero-eyebrow{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .hero-eyebrow::before{
    content: '';
    width: 32px; height: 1.5px;
    background: var(--oxblood);
  }

  h1.hero-headline{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(40px, 5vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin-bottom: 36px;
    max-width: none;
  }
  h1.hero-headline em{
    font-style: italic;
    font-weight: 400;
  }
  h1.hero-headline .hl{
    position: relative;
    display: inline-block;
    z-index: 0;
    padding: 0 6px;
    margin: 0 -4px;
  }
  h1.hero-headline .hl::before{
    content: '';
    position: absolute;
    inset: 8% -1.5% 4% -2%;
    z-index: -1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M 6 26 C 100 20, 240 18, 380 22 C 520 26, 660 19, 800 23 C 880 25, 950 28, 988 36 C 994 50, 988 70, 976 80 C 880 86, 740 84, 580 82 C 400 80, 240 84, 110 80 C 50 78, 20 70, 10 60 C 4 48, 4 36, 6 26 Z' fill='%23f4d96a' fill-opacity='0.78'/><path d='M 22 33 C 140 28, 320 24, 480 26 C 640 28, 800 25, 940 30 C 960 38, 960 60, 944 72 C 820 76, 620 76, 420 75 C 260 74, 140 76, 50 72 C 32 68, 26 56, 22 33 Z' fill='%23f4d96a' fill-opacity='0.55'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: rotate(-0.6deg);
    pointer-events: none;
  }
  h1.hero-headline .period{ color: var(--oxblood); }

  .hero-dek{
    font-family: 'Newsreader', serif;
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 56ch;
    margin-bottom: 48px;
  }
  .hero-dek em{ font-style: italic; color: var(--ink); }

  .hero-cta-row{
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }

  .cta-primary{
    background: var(--ink);
    color: var(--paper);
    padding: 18px 32px;
    font-family: 'Fraunces', serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transition: gap 0.2s, background 0.2s;
  }
  .cta-primary::before{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6ee29b;
    box-shadow: 0 0 10px rgba(110, 226, 155, 0.85), 0 0 18px rgba(110, 226, 155, 0.4);
    animation: cta-pulse 2.2s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes cta-pulse{
    0%, 100%{ opacity: 0.75; transform: scale(1); }
    50%{ opacity: 1; transform: scale(1.25); }
  }
  .cta-primary:hover{ background: var(--oxblood); gap: 22px; }
  .cta-primary:hover::before{
    background: #8df0b3;
    box-shadow: 0 0 14px rgba(141, 240, 179, 0.95), 0 0 24px rgba(141, 240, 179, 0.5);
  }

  .cta-secondary{
    font-family: 'Fraunces', serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: gap 0.2s, color 0.2s, border-color 0.2s;
  }
  .cta-secondary:hover{ gap: 18px; color: var(--oxblood); border-color: var(--oxblood); }

  /* hero right column — slim post-it sidebar */
  .hero-postits{
    position: relative;
    height: 100%;
    min-height: 580px;
    padding: 8px 12px 30px 8px;
  }

  .hero-postits-label{
    font-family: 'Fraunces', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-left: 12px;
  }
  .hero-postits-label::after{
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
  }

  .hero-postit{
    position: absolute;
    text-decoration: none;
    color: var(--ink);
    padding: 24px 22px 20px;
    box-shadow:
      0 1px 1px rgba(0,0,0,0.08),
      0 6px 14px rgba(80, 60, 20, 0.14),
      0 14px 28px rgba(80, 60, 20, 0.10);
    cursor: pointer;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.32s ease,
                rotate 0.32s ease,
                z-index 0s;
    will-change: transform;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero-postit::before{
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 72px;
    height: 20px;
    background: var(--tape);
    background-image: repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 4px,
      rgba(255,255,255,0.18) 4px,
      rgba(255,255,255,0.18) 5px
    );
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }

  .hero-postit:hover{
    transform: translateY(-10px) scale(1.02);
    rotate: 0deg !important;
    z-index: 10;
    box-shadow:
      0 2px 2px rgba(0,0,0,0.1),
      0 14px 26px rgba(80, 60, 20, 0.2),
      0 28px 44px rgba(80, 60, 20, 0.14);
  }

  .hero-postit .pin-tag{
    font-family: 'Fraunces', serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--oxblood);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .hero-postit .pin-tag::before{
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--oxblood);
  }

  .hero-postit h4{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .hero-postit h4 em{ font-style: italic; }

  .hero-postit .postit-bottom{
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(26, 22, 17, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Fraunces', serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .hero-postit .postit-bottom .arrow{
    color: var(--ink);
    font-weight: 700;
  }
  .hero-postit:hover .postit-bottom .arrow{ color: var(--oxblood); }

  /* curl on hover */
  .hero-postit::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .hero-postit:hover::after{ opacity: 1; }

  /* individual post-it positions/colors — vertical sidebar layout */
  .hero-postit-1{
    background: var(--postit-pink);
    top: 50px;
    left: 4%;
    width: 84%;
    rotate: -3deg;
    z-index: 3;
  }
  .hero-postit-2{
    background: var(--postit-yellow);
    top: 240px;
    right: 2%;
    width: 84%;
    rotate: 2.5deg;
    z-index: 2;
  }
  .hero-postit-3{
    background: var(--postit-blue);
    bottom: 30px;
    left: 8%;
    width: 84%;
    rotate: -2deg;
    z-index: 1;
  }

  /* ======================================
     SECTION HEAD
     ====================================== */
  .section-head{
    margin: 80px 0 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--rule);
    padding-top: 28px;
  }
  .section-head .left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .section-head .kicker{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .section-head .kicker::before{
    content: '';
    width: 32px; height: 1.5px;
    background: var(--oxblood);
  }
  .section-head h2{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(28px, 2.8vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.008em;
    color: var(--ink);
  }
  .section-head h2 em{ font-style: italic; }
  .section-head .right{
    padding-bottom: 8px;
  }
  .section-head .right a{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid var(--ink-soft);
    padding-bottom: 3px;
    transition: color 0.2s, border-color 0.2s;
  }
  .section-head .right a:hover{ color: var(--oxblood); border-color: var(--oxblood); }

  /* ======================================
     CLIENT LOGO STRIP — thin divider carousel
     ====================================== */
  .client-strip{
    padding: 36px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
    position: relative;
  }

  .client-strip-label{
    font-family: 'Fraunces', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: center;
    margin-bottom: 24px;
  }

  .client-track{
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }

  .client-track-inner{
    display: flex;
    gap: 64px;
    width: max-content;
    animation: client-scroll 38s linear infinite;
    align-items: center;
  }

  .client-strip:hover .client-track-inner{
    animation-play-state: paused;
  }

  @keyframes client-scroll{
    from{ transform: translateX(0); }
    to  { transform: translateX(-50%); }
  }

  .client-logo{
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.005em;
    color: var(--ink-soft);
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
  }
  .client-logo:hover{ opacity: 1; color: var(--oxblood); }

  /* ======================================
     HOW IT WORKS
     ====================================== */
  .how-section{
    padding: 90px 0 80px;
  }
  .how-header{
    margin-bottom: 48px;
  }
  .how-header .kicker{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .how-header .kicker::before{
    content: '';
    width: 32px; height: 1.5px;
    background: var(--oxblood);
  }
  .how-header h2{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .how-header h2 em{ font-style: italic; font-weight: 400; }
  .how-header .lede{
    font-family: 'Newsreader', serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 60ch;
  }
  .how-header .lede em{ font-style: italic; color: var(--ink); }

  .how-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
  }
  .how-step{
    border-top: 2px solid var(--ink);
    padding-top: 24px;
  }
  .how-step .num{
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--oxblood);
    margin-bottom: 18px;
    display: block;
  }
  .how-step h4{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .how-step h4 em{ font-style: italic; }
  .how-step p{
    font-family: 'Newsreader', serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .how-step p em{ font-style: italic; color: var(--ink); }

  /* ===== loop arc — luminescent curve under the 3 steps ===== */
  .loop-arc{
    margin-top: 32px;
    position: relative;
    height: 140px;
    overflow: visible;
  }
  .loop-arc svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* base arc — soft ink stroke, low opacity */
  .loop-arc-base{
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.42;
    stroke-dasharray: 4 6;
  }

  /* glow trail — soft white halo */
  .loop-arc-glow{
    fill: none;
    stroke: #ffffff;
    stroke-width: 8;
    stroke-linecap: round;
    opacity: 0.55;
    filter: blur(7px);
    stroke-dasharray: 90 1100;
    animation: loop-travel 6.5s linear infinite;
  }

  /* bright core — the light itself */
  .loop-arc-core{
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.95;
    stroke-dasharray: 38 1100;
    animation: loop-travel 6.5s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8));
  }

  /* arrowhead — appears at the end of the path */
  .loop-arc-tip{
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    animation: loop-tip-flash 6.5s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.9));
  }

  @keyframes loop-travel{
    0%   { stroke-dashoffset: 1190; }
    100% { stroke-dashoffset: 90; }
  }

  @keyframes loop-tip-flash{
    0%, 84%   { opacity: 0; transform: scale(0.85); }
    88%       { opacity: 1; transform: scale(1.05); }
    93%       { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(0.85); }
  }
  .loop-arc-tip{ transform-box: fill-box; transform-origin: center; }

  .loop-arc-label{
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
    text-align: center;
    white-space: nowrap;
    background: var(--paper);
    padding: 0 18px;
    z-index: 2;
  }
  .loop-arc-label .small{
    display: block;
    font-style: normal;
    font-family: var(--font-utility);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-top: 6px;
  }

  /* ======================================
     POST-IT GRID (bottom section)
     ====================================== */
  .postit-section{
    padding: 30px 10px 70px;
  }
  .postit-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .postit{
    position: relative;
    background: var(--postit-yellow);
    padding: 38px 30px 22px;
    aspect-ratio: 4/3.6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow:
      0 1px 1px rgba(0,0,0,0.08),
      0 8px 16px rgba(80, 60, 20, 0.12),
      0 18px 32px rgba(80, 60, 20, 0.10);
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.32s ease,
                rotate 0.32s ease;
    rotate: -1.5deg;
    will-change: transform;
  }
  .postit:nth-child(2){ background: var(--postit-pink); rotate: 1deg; }
  .postit:nth-child(3){ background: var(--postit-blue); rotate: -0.5deg; }
  .postit:hover{
    transform: translateY(-10px);
    rotate: 0deg !important;
    box-shadow:
      0 2px 2px rgba(0,0,0,0.1),
      0 16px 28px rgba(80, 60, 20, 0.18),
      0 32px 50px rgba(80, 60, 20, 0.14);
  }

  /* tape strip */
  .postit::before{
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 86px;
    height: 24px;
    background: var(--tape);
    background-image: repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 4px,
      rgba(255,255,255,0.18) 4px,
      rgba(255,255,255,0.18) 5px
    );
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .postit:nth-child(2)::before{ transform: translateX(-50%) rotate(3deg); }
  .postit:nth-child(3)::before{ transform: translateX(-50%) rotate(-1deg); }

  .postit .postit-tag{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: 'Fraunces', serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--oxblood);
  }
  .postit .postit-tag::before{
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--oxblood);
  }

  .postit h4{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 23px;
    line-height: 1.22;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .postit h4 em{ font-style: italic; }

  .postit .excerpt{
    font-family: 'Newsreader', serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .postit .excerpt em{ font-style: italic; }

  .postit .postit-bottom{
    border-top: 1px solid rgba(26, 22, 17, 0.18);
    padding-top: 14px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .postit .vertical{
    font-family: 'Fraunces', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .postit .read{
    font-family: 'Fraunces', serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .postit:hover .read{ gap: 10px; color: var(--oxblood); }

  /* curl on hover */
  .postit::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .postit:hover::after{ opacity: 1; }

  /* ======================================
     EDITORIAL ARCHIVE LIST
     ====================================== */
  .archive-list{
    padding: 10px 0 80px;
  }

  .archive-item{
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 40px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
    transition: padding 0.25s ease, background 0.25s ease;
    cursor: pointer;
    position: relative;
  }
  .archive-item:first-child{
    border-top: 1px solid var(--rule);
  }
  .archive-item:hover{
    padding-left: 16px;
    padding-right: 16px;
    background: rgba(138, 42, 42, 0.03);
  }
  .archive-item:hover .archive-num{ color: var(--oxblood); }
  .archive-item:hover .read-arrow{ color: var(--oxblood); }

  .archive-num{
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 36px;
    line-height: 1;
    color: var(--ink-mute);
    transition: color 0.25s ease;
    padding-top: 6px;
  }

  .archive-tag{
    font-family: 'Fraunces', serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 12px;
    display: inline-block;
  }
  .archive-body h4{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin-bottom: 12px;
    max-width: 28ch;
  }
  .archive-body h4 em{ font-style: italic; }
  .archive-body p{
    font-family: 'Newsreader', serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 60ch;
  }
  .archive-body p em{ font-style: italic; color: var(--ink); }

  .archive-meta{
    text-align: right;
    font-family: 'Fraunces', serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    min-width: 110px;
  }
  .archive-meta .read-arrow{
    color: var(--ink);
    font-weight: 700;
    transition: color 0.25s ease;
  }

  /* ======================================
     CLOSING / CONTACT
     ====================================== */
  .closing{
    padding: 48px 0 52px;
    border-top: 2px solid var(--ink);
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .closing > div:first-child{
    padding-left: 40px;
  }
  .closing .kicker{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .closing .kicker::before{
    content: '';
    width: 32px; height: 1.5px;
    background: var(--oxblood);
  }
  .closing h2{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin-bottom: 22px;
    max-width: 22ch;
  }
  .closing h2 em{ font-style: italic; font-weight: 400; }
  .closing .closing-cta{
    background: var(--ink);
    color: var(--paper);
    padding: 20px 36px;
    font-family: 'Fraunces', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transition: gap 0.2s, background 0.2s;
  }
  .closing .closing-cta:hover{ background: var(--oxblood); gap: 22px; }

  .closing-meta dl{ margin: 0; }
  .closing-meta dt{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 6px;
  }
  .closing-meta dd{
    font-family: 'Newsreader', serif;
    font-size: 17px;
    color: var(--ink);
    margin: 0 0 22px;
    line-height: 1.45;
  }
  .closing-meta dd .small{
    color: var(--ink-mute);
    font-size: 14px;
    display: block;
    margin-top: 2px;
  }

  /* ======================================
     FOOTER
     ====================================== */
  footer{
    border-top: 1px solid var(--rule);
    padding: 36px 0 30px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
    gap: 30px;
  }
  footer .center{
    text-align: center;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 400;
  }
  footer .right{ text-align: right; }

  /* ======================================
     FIELD NOTES INDEX — page-specific header
     ====================================== */
  .field-notes-header{
    padding: 70px 0 30px;
  }
  .field-notes-header .kicker{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .field-notes-header .kicker::before{
    content: '';
    width: 32px; height: 1.5px;
    background: var(--oxblood);
  }
  .field-notes-header h1{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin-bottom: 16px;
    max-width: 18ch;
  }
  .field-notes-header h1 em{ font-style: italic; font-weight: 400; }
  .field-notes-header .lede{
    font-family: 'Newsreader', serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 60ch;
  }
  .field-notes-header .lede em{ font-style: italic; color: var(--ink); }

  /* archive list — when used as the only section on a page,
     give it a top border to anchor it under the header */
  .archive-list.standalone{
    padding-top: 4px;
  }

  /* ======================================
     ARTICLE PAGE
     ====================================== */
  .article-page{
    padding: 70px 0 40px;
  }
  .article-meta{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .article-meta::before{
    content: '';
    width: 32px; height: 1.5px;
    background: var(--oxblood);
    margin-right: 4px;
  }
  .article-meta .cat{
    color: var(--oxblood);
    font-weight: 700;
  }
  .article-meta .sep{
    opacity: 0.5;
  }
  h1.article-headline{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin-bottom: 28px;
    max-width: 22ch;
  }
  h1.article-headline em{ font-style: italic; font-weight: 400; }
  .article-dek{
    font-family: 'Newsreader', serif;
    font-size: 21px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 56ch;
    margin-bottom: 30px;
  }
  .article-dek em{ font-style: italic; color: var(--ink); }
  .article-byline{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 56px;
  }
  .article-byline strong{
    color: var(--ink);
    font-weight: 700;
  }

  .article-body{
    max-width: 640px;
    margin: 0 auto;
  }
  .article-body p{
    font-family: 'Newsreader', serif;
    font-size: 19px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 1.4em;
  }
  .article-body p em{ font-style: italic; color: var(--ink); }
  .article-body p:first-of-type::first-letter{
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 5.4em;
    line-height: 0.85;
    float: left;
    color: var(--oxblood);
    margin-right: 12px;
    margin-top: 8px;
    margin-bottom: -6px;
  }
  .article-body h2{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin-top: 1.6em;
    margin-bottom: 0.6em;
  }
  .article-body h2 em{ font-style: italic; }
  .pullquote{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.3;
    color: var(--ink);
    border-left: 3px solid var(--oxblood);
    padding: 8px 0 8px 28px;
    margin: 44px 0;
  }
  .article-image{
    margin: 44px 0;
  }
  .article-image figure{ margin: 0; }
  .article-image .placeholder{
    background: var(--paper-warm);
    border: 1px dashed var(--rule);
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .article-image figcaption{
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-mute);
    margin-top: 12px;
    text-align: center;
  }
  .article-endnote{
    max-width: 640px;
    margin: 56px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    color: var(--oxblood);
    text-align: center;
    letter-spacing: 0.02em;
  }

  /* related field notes — uses .postit-grid + .postit components */
  .related-section{
    padding: 50px 0 70px;
    margin-top: 50px;
    border-top: 2px solid var(--ink);
  }
  .related-section .related-head{
    font-family: 'Fraunces', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .related-section .related-head::before{
    content: '';
    width: 32px; height: 1.5px;
    background: var(--oxblood);
  }

  /* responsive */
  @media (max-width: 1024px){
    .hero{ grid-template-columns: 1fr; gap: 50px; min-height: auto; }
    .hero-postits{ min-height: 420px; max-width: 600px; }
    .how-grid{ grid-template-columns: 1fr; gap: 40px; }
    .loop-arc{ height: auto; margin-top: 40px; }
    .loop-arc svg{ display: none; }
    .loop-arc-label{
      position: relative;
      left: auto;
      bottom: auto;
      transform: none;
      background: transparent;
      padding: 24px 0;
      border-top: 1px solid var(--rule);
      white-space: normal;
    }
    .archive-item{ grid-template-columns: 60px 1fr; gap: 24px; }
    .archive-item .archive-meta{ grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; gap: 16px; }
    .postit-grid{ grid-template-columns: 1fr 1fr; gap: 28px; }
    .postit:nth-child(3){ grid-column: span 2; max-width: 50%; justify-self: center; }
    .closing{ grid-template-columns: 1fr; gap: 40px; }
    .article-body{ max-width: 100%; }
    .article-body p:first-of-type::first-letter{ font-size: 4.4em; }
    .pullquote{ font-size: 22px; padding-left: 20px; }
  }

  @media (max-width: 768px){
    .masthead-top{ grid-template-columns: 1fr; gap: 16px; padding: 16px 24px; }
    .become-member, .top-utilities{ justify-self: center; }
    .top-utilities{ gap: 16px; flex-wrap: wrap; justify-content: center; }
    .masthead-nav{ flex-wrap: wrap; gap: 16px 24px; padding: 14px 24px; }
    .container{ padding: 0 24px; }
    .hero{ padding: 32px 0 50px; }
    h1.hero-headline{ font-size: clamp(34px, 8vw, 48px); }
    .hero-postits{ min-height: 460px; padding: 20px 10px; }
    .hero-postit-1{ left: 0; }
    .hero-postit-2{ right: 0; }
    .hero-postit-3{ left: 10%; }
    .section-head{ flex-direction: column; align-items: flex-start; gap: 12px; }
    .section-head .left{ flex-direction: column; gap: 8px; align-items: flex-start; }
    .archive-item{ grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
    .archive-item .archive-num{ font-size: 24px; padding-top: 0; }
    .archive-item .archive-meta{ flex-direction: row; gap: 16px; align-items: flex-start; text-align: left; padding-top: 4px; }
    .postit-grid{ grid-template-columns: 1fr; gap: 32px; }
    .postit:nth-child(3){ grid-column: span 1; max-width: 100%; }
    footer{ grid-template-columns: 1fr; gap: 12px; text-align: center; }
    footer .right{ text-align: center; }
    .field-notes-header{ padding: 50px 0 20px; }
    .article-page{ padding: 50px 0 30px; }
    .article-body p{ font-size: 17px; line-height: 1.6; }
    .article-body p:first-of-type::first-letter{ font-size: 3.8em; }
    .article-meta{ font-size: 10px; gap: 8px; }
    .article-byline{ font-size: 10px; }
  }

  @media (prefers-reduced-motion: reduce){
    .cta-primary::before{ animation: none; }
    .hero-postit{ transition: none; }
    .archive-item{ transition: none; }
    .postit{ transition: none; }
    .client-track-inner{ animation: none; }
    .loop-arc-glow{ animation: none; opacity: 0.4; stroke-dasharray: none; }
    .loop-arc-core{ animation: none; opacity: 0.6; stroke-dasharray: none; }
    .loop-arc-tip{ opacity: 1; animation: none; }
  }