/* ===================== FONTS ===================== */
  @font-face{font-family:"Bricolage";src:url(fonts/bricolage-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Bricolage";src:url(fonts/bricolage-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
  @font-face{font-family:"Franklin";src:url(fonts/franklin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Franklin";src:url(fonts/franklin-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

  /* ===================== TOKENS ===================== */
  :root{
    --paper:oklch(97.5% 0.006 195);
    --paper-2:oklch(94.4% 0.009 196);
    --ink:oklch(23% 0.014 214);
    --ink-2:oklch(42% 0.016 206);
    --ink-3:oklch(50.5% 0.015 202);
    --accent:oklch(53% 0.104 194);
    --link:oklch(45% 0.098 196);
    --rule:oklch(87% 0.011 200);
    --rule-strong:oklch(79% 0.014 198);

    --display:"Bricolage","Franklin","Helvetica Neue",Arial,sans-serif;
    --sans:"Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

    --2xs:4px; --xs:8px; --sm:12px; --md:16px; --lg:24px; --xl:32px;
    --2xl:48px; --3xl:64px; --4xl:96px; --5xl:132px;

    --wrap:1220px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:oklch(20% 0.014 220);
      --paper-2:oklch(24% 0.017 220);
      --ink:oklch(93% 0.011 200);
      --ink-2:oklch(77% 0.013 200);
      --ink-3:oklch(63% 0.013 200);
      --accent:oklch(76% 0.108 190);
      --link:oklch(80% 0.10 192);
      --rule:oklch(32% 0.013 210);
      --rule-strong:oklch(43% 0.016 205);
    }
  }
  :root[data-theme="light"]{
    --paper:oklch(97.5% 0.006 195);--paper-2:oklch(94.4% 0.009 196);
    --ink:oklch(23% 0.014 214);--ink-2:oklch(42% 0.016 206);--ink-3:oklch(50.5% 0.015 202);
    --accent:oklch(53% 0.104 194);--link:oklch(45% 0.098 196);
    --rule:oklch(87% 0.011 200);--rule-strong:oklch(79% 0.014 198);
  }
  :root[data-theme="dark"]{
    --paper:oklch(20% 0.014 220);--paper-2:oklch(24% 0.017 220);
    --ink:oklch(93% 0.011 200);--ink-2:oklch(77% 0.013 200);--ink-3:oklch(63% 0.013 200);
    --accent:oklch(76% 0.108 190);--link:oklch(80% 0.10 192);
    --rule:oklch(32% 0.013 210);--rule-strong:oklch(43% 0.016 205);
  }

  /* ===================== RESET ===================== */
  *,*::before,*::after{box-sizing:border-box;margin:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-weight:400;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  }
  img{max-width:100%;display:block}
  a{color:inherit}
  h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.03;letter-spacing:-.025em}
  ::selection{background:var(--accent);color:var(--paper)}
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

  /* ===================== HELPERS ===================== */
  .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
  .kicker{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.15em;
    text-transform:uppercase;color:var(--link);display:inline-flex;align-items:center;gap:.7em}
  .kicker .no{font-family:var(--mono);color:var(--ink-3);font-weight:400;letter-spacing:.05em}

  .skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);
    padding:12px 18px;font-family:var(--sans);font-weight:600;text-decoration:none;border-radius:3px;
    transition:top .2s var(--ease)}
  .skip:focus{top:16px}

  /* ===================== HEADER / NAMEPLATE ===================== */
  .masthead{position:sticky;top:0;z-index:50;
    background:color-mix(in oklab,var(--paper) 90%,transparent);
    backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rule)}
  .masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--lg);
    min-height:60px;padding-block:10px}
  .brand{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.035em;
    text-decoration:none;color:var(--ink);white-space:nowrap}
  .brand .dot{color:var(--accent)}
  .nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px)}
  .nav-links{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px)}
  .nav-links a:not(.nav-links-cta){font-family:var(--sans);font-weight:500;font-size:.95rem;text-decoration:none;
    color:var(--ink-2);padding:8px 2px;min-height:44px;display:inline-flex;align-items:center;transition:color .18s}
  .nav-links a:not(.nav-links-cta):hover{color:var(--ink)}
  .btn{font-family:var(--sans);font-weight:600;font-size:.95rem;text-decoration:none;
    display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:11px 20px;border-radius:2px;
    transition:transform .15s var(--ease),background .18s,color .18s,border-color .18s}
  .btn-solid{background:var(--accent);color:var(--paper)}
  .btn-solid:hover{transform:translateY(-1px)}
  .btn-ghost{border:1.5px solid var(--rule-strong);color:var(--ink);background:transparent}
  .btn-ghost:hover{border-color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}
  .themetoggle{background:transparent;border:1.5px solid var(--rule-strong);color:var(--ink-2);
    width:44px;height:44px;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;
    justify-content:center;font-size:1.05rem;transition:border-color .18s,color .18s}
  .themetoggle:hover{border-color:var(--ink);color:var(--ink)}
  /* mobile menu: hamburger + dropdown panel (both revealed only <=640px, see responsive block) */
  .menu-toggle{display:none}
  .nav-links-cta{display:none}
  /* in-page anchors (Work/Writing/Graphics/About, skip link) clear the sticky masthead */
  section[id],#top,#main{scroll-margin-top:80px}
  /* nudge the sticky masthead below the WP admin bar when signed in (preview / editors) */
  body.admin-bar .masthead{top:32px}
  @media (max-width:782px){body.admin-bar .masthead{top:46px}}

  /* ===================== HERO ===================== */
  .hero{padding-block:clamp(48px,8vw,104px)}
  .hero-head{font-size:clamp(2.7rem,7vw,5.3rem);line-height:.99;letter-spacing:-.035em;
    text-align:center;text-wrap:balance;max-width:18ch;margin-inline:auto;
    margin-bottom:clamp(36px,5.5vw,72px)}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(32px,5vw,72px);align-items:center}
  .hero h1 em{font-style:normal;color:var(--accent)}
  .hero .deck{font-size:clamp(1.08rem,1.7vw,1.35rem);color:var(--ink-2);line-height:1.55;
    max-width:36ch;margin-top:var(--xl);font-weight:400}
  .hero .actions{display:flex;flex-wrap:wrap;gap:var(--sm);margin-top:var(--2xl)}
  .hero .meta{display:flex;flex-wrap:wrap;gap:var(--md) var(--xl);margin-top:var(--2xl);
    padding-top:var(--lg);border-top:1px solid var(--rule);font-family:var(--sans);font-size:.9rem;color:var(--ink-3)}
  .hero .meta b{color:var(--ink);font-weight:600;font-family:var(--display);letter-spacing:-.01em}
  .hero .meta span{display:flex;flex-direction:column;gap:3px}
  .hero .meta .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

  /* plates */
  figure.plate{margin:0;position:relative}
  .plate .frame{border:1px solid var(--rule-strong);background:var(--paper-2);overflow:hidden;
    transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
  .plate img{width:100%;height:auto;aspect-ratio:1280/820;object-fit:cover;object-position:top center}
  .plate figcaption{margin-top:var(--sm);display:flex;gap:var(--sm);align-items:baseline;flex-wrap:wrap}
  .plate .cap-no{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.05em}
  .plate .cap-t{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em}
  .plate .cap-d{font-family:var(--sans);font-size:.9rem;color:var(--ink-2)}
  a.plate-link{text-decoration:none;display:block;color:inherit}
  a.plate-link:hover .frame{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--accent)}
  a.plate-link .go{color:var(--link);font-weight:600;font-size:.88rem;white-space:nowrap}
  a.plate-link:hover .go{text-decoration:underline}

  /* ===================== SECTION SHELL + INDEX MOTIF ===================== */
  section{padding-block:clamp(56px,8vw,110px)}
  .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--accent);
    display:flex;align-items:center;gap:var(--md);margin-bottom:var(--lg)}
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--lg);
    flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
  .sec-head h2{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.03em;max-width:20ch}
  .sec-head p{color:var(--ink-2);max-width:38ch;font-size:1.02rem}

  /* ===================== WORK ===================== */
  .work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(28px,4vw,48px)}
  .work-item{display:flex;flex-direction:column}
  .work-item.feature{grid-column:1 / -1;display:grid;grid-template-columns:1.4fr 1fr;
    gap:clamp(24px,4vw,56px);align-items:center}
  .work-item .body{display:flex;flex-direction:column;gap:var(--sm)}
  .work-item h3{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.03em}
  .work-item.feature h3{font-size:clamp(1.9rem,3.2vw,2.9rem)}
  .work-item .desc{color:var(--ink-2);font-size:1rem;max-width:46ch}
  .work-item.feature .desc{font-size:1.1rem}
  .tags{display:flex;flex-wrap:wrap;gap:var(--xs);margin-top:2px}
  .tags li{list-style:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--ink-2);
    border:1px solid var(--rule);padding:4px 9px;border-radius:999px}
  .work-item .visit{font-family:var(--sans);font-weight:600;font-size:.92rem;text-decoration:none;color:var(--link);
    display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-top:2px;width:fit-content}
  .work-item .visit:hover{text-decoration:underline}
  .work-item .visit .arw{transition:transform .18s var(--ease)}
  .work-item .visit:hover .arw{transform:translateX(4px)}

  /* ===================== CAPABILITIES + STACK ===================== */
  .caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px);
    border-top:1px solid var(--rule-strong)}
  .cap{padding-top:var(--lg)}
  .cap .n{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.08em}
  .cap h3{font-size:1.55rem;margin-top:var(--xs);letter-spacing:-.02em}
  .cap p{color:var(--ink-2);margin-top:var(--sm);font-size:1rem;max-width:34ch}
  .stack{margin-top:clamp(36px,5vw,64px)}
  .stack .lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .stack ul{display:flex;flex-wrap:wrap;gap:var(--xs);margin-top:var(--md);padding:0;list-style:none}
  .stack li{font-family:var(--sans);font-weight:500;font-size:.88rem;color:var(--ink);
    border:1px solid var(--rule-strong);padding:7px 13px;border-radius:2px}

  /* ===================== CASE STUDY ===================== */
  .case{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  /* On the lighter paper-2 panel, accent teal (L 53%) lands at 4.17:1, under the
     4.5 small text needs. --link (L 45%) clears it. Dark mode unaffected. */
  .case .eyebrow{color:var(--link)}
  .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
  .case dl{display:grid;gap:var(--lg);margin:0}
  .case dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
  .case dd{margin:0;color:var(--ink-2);font-size:1.02rem;max-width:44ch}
  .case blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.1vw,2.5rem);
    line-height:1.14;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
  .case blockquote .mk{color:var(--accent)}

  /* ===================== WRITING ===================== */
  .clips{display:grid;gap:0;border-top:1px solid var(--rule-strong)}
  .clip{display:grid;grid-template-columns:auto 1fr auto;gap:var(--md) var(--lg);align-items:baseline;
    padding-block:var(--lg);border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;transition:padding-left .2s var(--ease)}
  .clip:hover{padding-left:10px}
  .clip .src{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
  .clip h3{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:-.025em;line-height:1.16;color:var(--ink)}
  .clip:hover h3{color:var(--accent)}
  .clip .date{font-family:var(--sans);font-size:.85rem;color:var(--ink-3);white-space:nowrap}
  .writing-foot{margin-top:var(--xl);color:var(--ink-2);font-size:1rem}
  .writing-foot a{color:var(--link);font-weight:600;text-decoration:none}
  .writing-foot a:hover{text-decoration:underline}

  /* ===================== GRAPHICS ===================== */
  .gfx-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
  .gfx-list{list-style:none;padding:0;display:grid;gap:var(--md)}
  .gfx-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--md);align-items:baseline;
    padding-bottom:var(--md);border-bottom:1px solid var(--rule)}
  .gfx-list .t{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
  .gfx-list .d{color:var(--ink-2);font-size:.95rem}
  .gfx-list .n{font-family:var(--mono);font-size:.72rem;color:var(--accent)}

  /* ===================== ABOUT ===================== */
  .about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
  .about .portrait{border:1px solid var(--rule-strong);background:var(--paper-2)}
  .about .portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .about .pcap{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin-top:var(--sm);letter-spacing:.03em}
  .about .lead{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.22;
    letter-spacing:-.03em;color:var(--ink)}
  .about .lead em{font-style:normal;color:var(--accent)}
  .about .body{color:var(--ink-2);font-size:1.05rem;margin-top:var(--lg);max-width:56ch}
  .how{display:flex;flex-wrap:wrap;gap:var(--xs);margin-top:var(--xl);list-style:none;padding:0}
  .how li{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--ink);
    border:1px solid var(--rule-strong);padding:8px 14px;border-radius:999px}
  .how li::before{content:"→ ";color:var(--accent)}

  /* ===================== CONTACT ===================== */
  .contact h2{font-size:clamp(2.5rem,6vw,4.8rem);letter-spacing:-.04em;line-height:.98;text-wrap:balance;max-width:16ch}
  .contact h2 em{font-style:normal;color:var(--accent)}
  .contact .sub{color:var(--ink-2);font-size:clamp(1.05rem,1.6vw,1.28rem);margin-top:var(--lg);max-width:42ch}
  .contact .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--md);margin-top:var(--2xl)}
  .contact .email{font-family:var(--mono);font-size:.95rem;color:var(--ink-2);text-decoration:none;
    border-bottom:1px solid var(--rule-strong);padding-bottom:2px}
  .contact .email:hover{color:var(--accent);border-color:var(--accent)}
  .contact .socials{display:flex;flex-wrap:wrap;gap:var(--lg);margin-top:var(--2xl);padding-top:var(--lg);border-top:1px solid var(--rule)}
  .contact .socials a{font-family:var(--sans);font-weight:500;font-size:.92rem;color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
  .contact .socials a:hover{color:var(--accent)}

  /* ===================== FOOTER ===================== */
  footer.site{border-top:1px solid var(--rule);padding-block:var(--2xl)}
  .foot-grid{display:flex;justify-content:space-between;gap:var(--lg);flex-wrap:wrap;font-family:var(--sans);font-size:.85rem;color:var(--ink-3)}
  .foot-grid .a11y{display:inline-flex;align-items:center;gap:.5em}
  .foot-grid .a11y .badge{border:1px solid var(--rule-strong);border-radius:3px;padding:3px 8px;
    font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-2)}

  /* ===================== MOTION (progressive enhancement) ===================== */
  body.anim .reveal{opacity:0;transform:translateY(18px)}
  body.anim .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

  /* ===================== RESPONSIVE ===================== */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:var(--2xl)}
    .work-item.feature{grid-template-columns:1fr}
    .about-grid{grid-template-columns:1fr}
    .about .portrait{max-width:320px}
    .case-grid{grid-template-columns:1fr}
    .gfx-grid{grid-template-columns:1fr}
    .caps{grid-template-columns:1fr;border-top:0}
    .cap{border-top:1px solid var(--rule);padding-top:var(--md)}
  }
  @media (max-width:640px){
    .work-grid{grid-template-columns:1fr}
    .nav-cta{display:none}
    .menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
      width:44px;height:44px;border:1.5px solid var(--rule-strong);border-radius:2px;background:transparent;cursor:pointer}
    .menu-toggle:hover{border-color:var(--ink)}
    .menu-toggle .mt-bar{display:block;width:20px;height:2px;background:var(--ink-2);border-radius:2px;
      transition:transform .22s var(--ease),opacity .18s var(--ease)}
    .menu-toggle[aria-expanded="true"] .mt-bar{background:var(--ink)}
    .menu-toggle[aria-expanded="true"] .mt-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .menu-toggle[aria-expanded="true"] .mt-bar:nth-child(2){opacity:0}
    .menu-toggle[aria-expanded="true"] .mt-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
      background:var(--paper);border-bottom:1px solid var(--rule);padding:4px clamp(20px,5vw,56px) 18px;
      box-shadow:0 16px 30px -18px color-mix(in oklab,var(--ink) 42%,transparent);
      opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
      transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
    .nav-links[data-open]{opacity:1;transform:none;visibility:visible;pointer-events:auto}
    .nav-links a:not(.nav-links-cta){padding:15px 2px;min-height:54px;font-size:1.05rem;color:var(--ink);
      border-bottom:1px solid var(--rule)}
    .nav-links-cta{display:inline-flex;justify-content:center;width:100%;margin-top:14px}
    .clip{grid-template-columns:1fr;gap:4px}
    .clip .date{order:3}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    a.plate-link:hover .frame{transform:none}
    .btn-solid:hover{transform:none}
  }

  /* ---- WP Accessibility toolbar (plugin v2.3.4) ------------------------------
     The plugin positions its toolbar absolutely at the top-left corner. On wide
     screens that lands in the empty page margin and is fine, but once the layout
     narrows the masthead reaches the left edge and the toolbar covers the
     "Tessa Price." wordmark. Below 900px it moves to a fixed bottom-left corner,
     which also keeps it reachable while scrolling instead of scrolling away.

     Its buttons also ship at 40x42, under the 44px minimum every other target on
     this site was brought up to. An accessibility control should not be the one
     element that fails the touch-target check.

     home.css is enqueued after the plugin's four stylesheets, so these win on
     source order without needing !important. ------------------------------- */
  .a11y-toolbar .a11y-toolbar-list-item button,
  .a11y-toolbar .a11y-toolbar-list-item a{min-width:44px;min-height:44px}
  /* The doubled selector below is deliberate: the plugin sets position on
     `.a11y-toolbar.custom-location` (specificity 0-2-0), so a bare
     `.a11y-toolbar` (0-1-0) loses no matter how late it loads. */
  @media (max-width:900px){
    .a11y-toolbar,
    .a11y-toolbar.custom-location{position:fixed;top:auto;bottom:16px;left:16px}
  }