/* Lifted unchanged from mockups/final-LOCKED-2026-09-30/about.html (includes the consistency layer). Do not edit by hand. */

  /* Hedgerow, the same values as the homepage */
  [data-palette="hedgerow"],[data-palette="hedgerow-night"]{--ink:#2a2a20;--soft:#62604f;--accent:#b4532a;--hi:#f0d99a;
    --n1:#d9e4cc;--n2:#f3d9b8;--n3:#e7e8c7;--n4:#f0d99a;--lines:#e5e4d8;
    --ta:rgba(80,115,70,.4);--tb:rgba(214,120,55,.44);--tc:rgba(212,165,50,.48)}
  [data-palette="hedgerow"]{--paper:#f7f5ee;--dot:#dcdccf}
  [data-palette="hedgerow-night"]{--paper:#18211a;--dot:rgba(240,200,130,.2);--card:#f5f0e4;--lines:#e8e2d3;
    --page-ink:#efe9da;--page-soft:#b3b6a2;--page-accent:#e5a45c;--btn:#223024;--btn-line:#e5a45c;--btn-ink:#efe9da}
  [data-palette="hedgerow-night"] .piece,[data-palette="hedgerow-night"] .me{--lift:0 1px 2px rgba(0,0,0,.3),0 6px 14px rgba(0,0,0,.3),0 18px 30px -10px rgba(0,0,0,.5);--lift-hover:0 2px 3px rgba(0,0,0,.3),0 10px 20px rgba(0,0,0,.35),0 26px 40px -12px rgba(0,0,0,.55)}

  :root{
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --lift:0 1px 1px rgba(40,30,20,.06),0 3px 6px rgba(40,30,20,.06),0 14px 24px -10px rgba(40,30,20,.2);
    --lift-hover:0 1px 1px rgba(40,30,20,.06),0 6px 12px rgba(40,30,20,.08),0 22px 34px -12px rgba(40,30,20,.26);
  }
  *{box-sizing:border-box}
  html,body{max-width:100%;overflow-x:clip}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--page-ink,var(--ink));font-family:'Nunito',system-ui,sans-serif;font-size:17px;line-height:1.6;
    background-color:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);
    background-size:24px 24px;-webkit-font-smoothing:antialiased;transition:background-color .35s}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  p{margin:0}
  h1,h2,h3{margin:0}
  figure{margin:0}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  .label{background:#2b2622;color:#f3ede2;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 24px}
  .picker{position:sticky;top:0;z-index:50;background:rgba(43,38,34,.95);color:#f3ede2;font-size:14px;
    display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:8px 24px}
  .picker span{opacity:.7;margin-right:4px}
  .picker button{font:inherit;font-weight:600;border:1.5px solid rgba(243,237,226,.7);background:transparent;color:#f3ede2;border-radius:999px;padding:4px 14px;cursor:pointer}
  .picker button[aria-pressed="true"]{background:#f3ede2;color:#2b2622;border-color:#f3ede2}

  .wrap{max-width:1140px;margin:0 auto;padding:0 20px 88px}

  /* site bar, shared with the homepage */
  .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:28px 0 8px}
  .bar .name{font-family:'Fraunces',serif;font-weight:600;font-size:24px;letter-spacing:-.02em}
  .btns{display:flex;flex-wrap:wrap;gap:10px}
  .btn{background:var(--btn,#fff);color:var(--btn-ink,var(--ink));border:1.5px solid var(--btn-line,var(--ink));border-radius:999px;
    padding:6px 18px;font-weight:700;font-size:14.5px;box-shadow:0 2px 0 var(--btn-line,var(--ink));transition:transform .15s,box-shadow .15s;display:inline-block}
  .btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--btn-line,var(--ink))}
  .btn[aria-current],.btn.fill{background:var(--hi);color:var(--ink)}

  .eyebrow{font-family:'Caveat',cursive;font-size:28px;font-weight:700;color:var(--page-accent,var(--accent));line-height:1;display:block}
  .piece .eyebrow{color:var(--accent)}
  .h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.08;letter-spacing:-.02em;margin:8px 0 14px;text-wrap:balance}
  .lede{color:var(--page-soft,var(--soft));font-size:18px;max-width:36em}

  /* paper pieces, same as the homepage */
  .piece{color:var(--ink);--rot:0deg;transform:rotate(var(--rot));box-shadow:var(--lift);transition:transform .25s ease,box-shadow .25s ease,background-color .35s}
  a.piece:hover{transform:rotate(var(--rot)) translateY(-3px);box-shadow:var(--lift-hover)}
  .r1{--rot:-1deg} .r2{--rot:.8deg} .r3{--rot:-.4deg} .r4{--rot:1.2deg}
  .tape{position:relative}
  .tape::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:24px;margin-left:-46px;
    background-color:var(--ta);transform:rotate(-4deg);z-index:2;
    background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.38) 0 6px,transparent 6px 12px);box-shadow:0 1px 1px rgba(40,30,20,.05)}
  .tape.g::before{background-color:var(--tb);transform:rotate(3deg)}
  .tape.b::before{background-color:var(--tc);transform:rotate(-2deg)}
  .n1{background-color:var(--n1)} .n2{background-color:var(--n2)} .n3{background-color:var(--n3)} .n4{background-color:var(--n4)}
  .note{background-image:var(--grain);padding:24px}
  .card{background-color:var(--card,#fff);background-image:var(--grain)}
  .polaroid{background-color:var(--card,#fff);background-image:var(--grain);padding:11px 11px 16px}
  .polaroid img{width:100%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .cap{font-family:'Caveat',cursive;font-size:22px;line-height:1.25;margin:12px 4px 0}
  .cap b{color:var(--accent);font-weight:700}

  section{margin-top:84px}

  /* hero */
  .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;margin-top:40px}
  .hero > *{min-width:0}
  .hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.6rem,7vw,4.3rem);line-height:1;letter-spacing:-.025em;margin:10px 0 18px}
  .me{justify-self:center;width:300px;max-width:100%;transform:rotate(2.5deg);background-color:var(--card,#fff);background-image:var(--grain);
    padding:12px 12px 44px;box-shadow:var(--lift);position:relative;color:var(--ink)}
  .me img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .me span{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:'Caveat',cursive;font-size:24px;color:var(--soft)}

  /* numbers on sticky notes */
  .numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .numbers .note{text-align:center;padding:26px 16px 20px}
  .numbers .big{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.2rem,5vw,3rem);line-height:1;letter-spacing:-.02em}
  .numbers .what{font-family:'Caveat',cursive;font-size:23px;color:var(--soft);margin-top:6px;line-height:1.1}

  /* story */
  .story{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
  .story > *{min-width:0}
  .page{padding:34px 34px 30px}
  .page h2{font-family:'Fraunces',serif;font-weight:600;font-size:30px;letter-spacing:-.015em;margin:6px 0 16px}
  .page p{font-size:17.5px;line-height:1.72;color:var(--ink)}
  .page p + p,.page ul + p{margin-top:14px}
  .ticks{list-style:none;padding:0;margin:12px 0 4px}
  .ticks li{font-family:'Caveat',cursive;font-size:25px;line-height:1.3;padding-left:32px;position:relative}
  .ticks li::before{content:"\2713";position:absolute;left:4px;top:0;color:var(--accent);font-weight:700}
  .story .side{display:grid;gap:34px}
  .story .side .polaroid img{aspect-ratio:4/5}


  /* work */
  .work-head{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
  .work-head > *{min-width:0}
  .card.said{background-color:var(--n1)}
  .said{padding:30px 30px 26px}
  .said blockquote{margin:0;font-family:'Fraunces',serif;font-style:italic;font-size:21px;line-height:1.45}
  .said .who{margin-top:14px;font-size:15px;color:var(--soft)}
  .said .who b{color:var(--ink)}

  .brands{display:grid;grid-template-columns:minmax(0,1fr);gap:34px 28px;margin-top:40px}
  .brands > *{min-width:0}
  .brands .polaroid img{aspect-ratio:16/10;object-position:top}
  .brands .cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
  .brands .cap span{font-size:19px;color:var(--soft)}

  /* where my work appears: three ways to show it (mockup toggle) */
  .brandwrap{margin-top:48px}
  .eyebrow.small{font-size:25px;margin-bottom:22px}
  .bstyle{display:none}
  [data-brands="logos"] .b-logos,[data-brands="stickers"] .b-stickers,[data-brands="list"] .b-list,[data-brands="dymo"] .b-dymo{display:flex}
  .b-logos{display:none;flex-wrap:wrap;gap:26px 28px}
  [data-brands="logos"] .b-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
  .lgs{display:flex;align-items:center;justify-content:center;width:100%;height:96px;padding:18px 22px;border-radius:20px;
    background-color:var(--card,#fff);background-image:var(--grain);border:1px solid rgba(0,0,0,.05)}
  .lgs img{max-width:100%;width:auto}
  .lgs .h-sp{height:28px} .lgs .h-rp{height:32px} .lgs .h-wv{height:40px}
  .lg:hover .lgs{transform:rotate(var(--rot)) translateY(-3px);box-shadow:var(--lift-hover)}
  .lg .d{font-family:'Caveat',cursive;font-size:21px;color:var(--page-soft,var(--soft));text-align:center;line-height:1.15}
  .opga{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',system-ui,sans-serif;font-size:22px;line-height:1}
  .opga svg{width:32px;height:32px}
  .opga .o1{font-weight:400;color:#52525b} .opga .o2{font-weight:700;color:#18181b}
  .b-stickers{flex-wrap:wrap;gap:22px 26px}
  .stk{display:flex;flex-direction:column;gap:2px;border:5px solid var(--card,#fff);border-radius:22px;padding:14px 24px 12px;background-image:var(--grain)}
  .stk b{font-family:'Fraunces',serif;font-weight:600;font-size:23px;letter-spacing:-.01em;line-height:1.1}
  .stk span{font-family:'Caveat',cursive;font-size:20px;color:var(--soft);line-height:1.1}
  .b-list .listnote{padding:26px 32px 22px;max-width:560px}
  .listnote ul{list-style:none;margin:0;padding:0}
  .listnote li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.15)}
  .listnote li:last-child{border-bottom:0}
  .listnote li b{font-family:'Fraunces',serif;font-weight:600;font-size:22px}
  .listnote li a:hover b{color:var(--accent)}
  .listnote li span{font-family:'Caveat',cursive;font-size:22px;color:var(--soft)}
  .listnote li span::before{content:"\2192\00a0";color:var(--accent)}
  .b-dymo{flex-wrap:wrap;gap:26px 34px}
  .dy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;transform:rotate(var(--rot,0deg))}
  .dy .strip{font-family:'Courier New',monospace;font-weight:700;font-size:20px;letter-spacing:.16em;color:#fff;padding:7px 16px 6px;border-radius:3px;
    text-shadow:0 -1px 0 rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.25);box-shadow:var(--lift);
    background-image:linear-gradient(rgba(255,255,255,.12),rgba(0,0,0,.08))}
  .dy .s1{background-color:#2f4a33} .dy .s2{background-color:#9a3e1f} .dy .s3{background-color:#23405e} .dy .s4{background-color:#2b2622}
  .dy .d{font-family:'Caveat',cursive;font-size:21px;color:var(--page-soft,var(--soft));padding-left:4px}
  .dy:hover .strip{filter:brightness(1.12)}

  .services{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:56px}
  .services > *{min-width:0}
  .svc{padding:30px 28px 26px;outline:1.5px dashed var(--accent);outline-offset:-11px}
  .svc h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:8px 0 10px}
  .svc p{color:var(--soft);font-size:16px;line-height:1.65}


  .contact.n2{background-color:var(--n2)}
  .contact{margin-top:84px;padding:44px 34px 38px;text-align:center}
  .contact .h2{margin:8px auto 12px}
  .contact p{max-width:34em;margin:0 auto;color:var(--soft)}
  .contact .btns{justify-content:center;margin-top:22px}
  .contact .open{font-size:18px;color:var(--ink);max-width:30em;margin:4px auto 0;text-wrap:balance}
  .todo{display:inline-block;margin:16px auto 0;background:#fff7c2;border:1.5px dashed #c9a21c;color:#6b5510;
    font-size:14px;font-weight:700;padding:6px 12px;border-radius:4px;transform:none}

  footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--page-soft,var(--soft));font-size:14.5px;margin-top:64px;
    padding-top:18px;border-top:1px solid color-mix(in srgb,var(--page-soft,var(--soft)) 30%,transparent)}
  footer .soc{display:flex;gap:18px;flex-wrap:wrap}
  footer .soc a:hover{color:var(--page-accent,var(--accent))}
  footer .dev{font-family:'Caveat',cursive;font-size:20px;color:var(--page-accent,var(--accent))}

  @media(min-width:700px){
    .hero{grid-template-columns:minmax(0,1fr) 300px;gap:64px}
    .numbers{grid-template-columns:repeat(4,minmax(0,1fr))}
    .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
    .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(min-width:1000px){
    [data-brands="logos"] .b-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
    .story{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
    .work-head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
    .brands{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  @media(max-width:699px){
    .lgs{height:78px;padding:12px 14px}
    .lgs .h-sp{height:20px} .lgs .h-rp{height:23px} .lgs .h-wv{height:29px}
    .opga{font-size:16px;gap:5px} .opga svg{width:22px;height:22px}
    .lg .d{font-size:19px}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

  /* day and night: a sun and moon switch in the menu. Starts on the visitor's device setting */
  .lamp{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:68px;height:35px;padding:0 9px;
    border-radius:999px;border:1.5px solid var(--btn-line,var(--ink));background:var(--btn,#fff);box-shadow:0 2px 0 var(--btn-line,var(--ink));
    cursor:pointer;font-size:14px;line-height:1;color:var(--btn-ink,var(--ink));flex:0 0 auto;transition:transform .15s,box-shadow .15s}
  .lamp:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--btn-line,var(--ink))}
  .lamp .ic{position:relative;z-index:2;width:16px;text-align:center;opacity:.55;transition:opacity .25s}
  .lamp .knob{position:absolute;z-index:1;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--hi);
    box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s ease}
  .lamp[aria-checked="false"] .sun,.lamp[aria-checked="true"] .moon{opacity:1}
  .lamp[aria-checked="true"] .knob{transform:translateX(33px)}
  .lamp[aria-checked="true"] .moon{color:#18211a}
  @media(prefers-reduced-motion:reduce){.lamp .knob,.lamp .ic{transition:none}}

  /* ---- consistency layer: one size per role on every page (audited 2026-09-30) ---- */
  .lamp{font-family:'Nunito',system-ui,sans-serif}
  .wrap > .bar{padding:28px 0 8px}
  .older a,.home .btn{padding:6px 18px;font-size:14.5px;font-weight:700}
  footer{margin-top:72px}
  .kick,.kicker,.intro .kick{font-size:26px;line-height:1}
  .hero .eyebrow{font-size:30px}
  .hero h1{font-size:clamp(2.5rem,7vw,4.1rem);letter-spacing:-.025em;margin:8px 0 16px}
  .stage .meta .d,.sheet .meta .d,.bigvid .meta .d{font-size:27px}
  .stage .meta .t,.sheet .meta .t,.bigvid .meta .t{font-size:24px}
  .gnote p{font-size:23px;line-height:1.55}
  .stage .cap,.bigvid .cap{font-size:27px;line-height:1.25}
  header p.intro,.hero .lede{font-size:18px}
  .stage > .kick{margin-bottom:34px}
  .stage{margin-top:48px} div.intro{margin-top:48px}
  /* the About portrait is the homepage portrait: same size, crop, frame and tilt */
  .hero .me{width:212px;padding:11px 11px 38px;transform:rotate(2.5deg)}
  .hero .me img{aspect-ratio:1}
  .hero .me span{bottom:7px;font-size:22px}
  @media(min-width:700px){.hero{grid-template-columns:minmax(0,1fr) auto;gap:28px}} article.sheet.piece{margin-top:48px} .hero{margin-top:48px}