/* Geist at 800 as a static font with overlapping contours removed, so outline ghosts and outline numerals draw clean. */
@font-face{font-family:"MS Kinetic";src:url("../fonts/Geist-ExtraBold-Kinetic.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Mainstay portfolio, kinetic rework (2026-10-01). Owner: foundation.
   Shared API for every section: looks, kinetic type, pills, tags, device frames, camera, page chrome.
   Loads after tokens.css and styles.css and overrides them. Contract: docs/portfolio-review-06/BUILD-CONTRACT.md */

:root{
  --night:#121311;--dark:#1A1B19;--paper-bg:#F4F0E8;--ink-dark:#F4F0E8;--ink-paper:#262725;
  --copper-on-dark:#DCA17D;--copper-big-on-paper:#AD6B4A;--copper-small-on-paper:#8A4E32;
  --spring:cubic-bezier(.34,1.4,.64,1);    /* about 5% overshoot (films: spring() for small UI parts only, never type) */
  --approach:cubic-bezier(.16,1,.3,1);     /* CSS stand-in for the films' approach easing */
  --accent-strong:var(--accent);
  --kt-font:"MS Kinetic",var(--sans);
}
body{background:var(--night)}
html[data-theme="light"] body{background:var(--paper-bg)}

/* ---------- Looks: each sets the tokens styles.css already reads, then paints itself ---------- */
.look-night,.look-dark,.bar,.reader{
  --text:#F4F0E8;--muted:#C5C0B6;--line:#4A4B44;
  --accent:#DCA17D;--accent-strong:#DCA17D;--accent-ink:#1A1B19;
  --paper:#F4F0E8;--paper-ink:#262725;color-scheme:dark;
}
.look-night{--bg:#121311;--well:#0C0D0B;--raise:#1C1D1A}
.look-dark,.bar,.reader{--bg:#1A1B19;--well:#141513;--raise:#252623}
.look-paper,
html[data-theme="light"] .look-dark:not(.hero),
html[data-theme="light"] .look-night:not(.hero),
html[data-theme="light"] .bar,
.bar[data-under="paper"],
html[data-theme="light"] .reader{
  --bg:#F4F0E8;--well:#E9E3D8;--raise:#FFFDF8;--text:#262725;--muted:#55584F;--line:#C8BDB0;
  --accent:#8A4E32;--accent-strong:#AD6B4A;--accent-ink:#FFFDF8;--paper:#262725;--paper-ink:#F4F0E8;color-scheme:light;
}
.look-night,.look-dark,.look-paper{background:var(--bg);color:var(--text)}
.sf{font-family:var(--display);font-style:italic;font-weight:500;letter-spacing:-.01em}

/* ---------- Kinetic type ----------
   Line: <span class="kt-line" data-kt style="--n:N"> with words <span class="kw" style="--i:i">.
   motion.js drives --p (0..1) on the line. Each word runs its own timeline --t:
   it arrives as an outline ghost (--a), then a hard-edged fill sweeps left to right (--q). */
.kt{font-family:var(--kt-font);font-weight:800;letter-spacing:-.045em;line-height:.9;margin:0;text-wrap:balance;overflow-wrap:normal;hyphens:none;font-variant-numeric:lining-nums}
.kt.kt-xxl{font-size:clamp(44px,14.5vw,220px)}
.kt.kt-xl{font-size:clamp(52px,10vw,140px)}
.kt.kt-l{font-size:clamp(40px,7vw,88px)}
.kt.kt-m{font-size:clamp(30px,4.6vw,52px)}
.kt-line{display:block}
.kw{
  --kw-c:var(--text);
  --t:calc(var(--p,1) * (var(--n,1) + .5) - var(--i,0));
  --a:clamp(0, var(--t) / .7, 1);
  --q:clamp(0, (var(--t) - .5) / .9, 1);
  display:inline-block;
  /* room for descenders and overhangs inside the clipped fill, cancelled out in layout */
  padding:.1em .07em .2em;margin:-.1em -.07em -.2em;
  color:var(--kw-c);
  opacity:var(--a);
  translate:0 calc((1 - var(--a)) * .3em);
}
.kw.ac{--kw-c:var(--accent-strong)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kw{
    color:transparent;-webkit-text-fill-color:transparent;
    -webkit-text-stroke:clamp(1px,.014em,2.5px) var(--kw-c);
    background-image:linear-gradient(90deg,var(--kw-c) 50%,transparent 50%);
    background-size:200% 100%;background-repeat:no-repeat;
    background-position:calc((1 - var(--q)) * 100%) 0;
    -webkit-background-clip:text;background-clip:text;
  }
  /* settled text drops the outline so the fill stays crisp */
  .kt-landed .kw,html[data-motion="off"] .kw,html:not(.js) .kw{-webkit-text-stroke-width:0}
}
.kw::selection{-webkit-text-fill-color:var(--accent-ink);background:var(--accent)}

/* Stacked headings: when a later line lands, earlier lines shrink from the left and step back. */
[data-kt-stack] .kt-line{transform-origin:0 100%;transition:scale .9s var(--approach),opacity .9s var(--approach)}
[data-kt-stack] .kt-line:has(~ .kt-line.kt-landed),
[data-kt-stack] .kt-line.kt-back{scale:.72;opacity:.55}

/* Before motion.js takes over, lines wait as ghosts; a safety timer fills them if the script never arrives. */
html.js[data-motion="on"]:not(.kt-ready) [data-kt]{--p:0;animation:kt-safety 1ms 2.5s forwards}
@keyframes kt-safety{to{--p:1}}

/* ---------- Scroll camera: [data-cam] gets --c (0 far from centre, 1 centred). Optional helper below. ---------- */
[data-cam]{--c:1}
.cam-tilt{transform:perspective(1400px) rotateY(calc((1 - var(--c)) * var(--cam-y,-16deg))) rotateX(calc((1 - var(--c)) * var(--cam-x,8deg))) scale(calc(.92 + var(--c) * .08));will-change:transform}

/* ---------- Motion off and reduced motion: everything settled ---------- */
html[data-motion="off"] [data-kt]{--p:1!important}
html[data-motion="off"] [data-cam]{--c:1!important}
@media (prefers-reduced-motion:reduce){
  [data-kt]{--p:1!important}
  [data-cam]{--c:1!important}
}
@media print{
  [data-kt]{--p:1!important}
  [data-cam]{--c:1!important}
  .kw{-webkit-text-stroke-width:0!important}
}
@media (forced-colors:active){
  .kw{color:CanvasText;-webkit-text-fill-color:CanvasText;background:none;-webkit-text-stroke:0;opacity:1;translate:none}
}

/* ---------- Pills, buttons, tags ---------- */
.pill,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;
  border:1.5px solid currentColor;border-radius:999px;background:transparent;color:var(--text);
  font:500 15px/1 var(--sans);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .5s var(--spring),background-color .2s,color .2s,border-color .2s;
}
.pill.solid{background:var(--text);border-color:var(--text);color:var(--bg)}
.pill.accent,.btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;border-color:currentColor;color:var(--text)}
.pill:active,.btn:active{transform:scale(.96)}
@media (hover:hover){
  .pill:hover,.btn:hover{transform:translateY(-2px) scale(1.03)}
  .pill:not(.solid):not(.accent):hover,.btn.ghost:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
  .pill.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .pill.accent:hover,.btn:not(.ghost):hover{background:var(--text);border-color:var(--text);color:var(--bg)}
}
.btn .arrow,.pill .arrow{transition:transform .5s var(--spring)}
.btn:hover .arrow,.pill:hover .arrow{transform:translateY(3px)}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;
  border:1.5px solid color-mix(in srgb,var(--text) 40%,transparent);border-radius:999px;background:transparent;color:var(--text);
  font:500 14px/1 var(--sans);transition:transform .5s var(--spring),background-color .2s,color .2s,border-color .2s;
}
.icon-btn svg{width:13px;height:13px}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover){.icon-btn:hover{border-color:var(--text);transform:scale(1.05)}}
.tag{
  display:inline-flex;align-items:center;gap:7px;min-height:0;padding:0;border:0;border-radius:0;background:none;
  color:var(--accent);font:700 11px/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:left;
  transition:transform .5s var(--spring);
}
/* Tags are labels, not buttons (Tres, 2026-10-03: nothing that cannot be clicked may look like a button or a pill;
   only links and buttons keep the pill shape). Small uppercase copper text after a small dot. */
.tag::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}
.tag.solid{border:0;background:none;color:var(--accent)}

/* ---------- Device frames ---------- */
.device-phone{
  --bezel:10px;--radius:44px;
  position:relative;display:block;padding:var(--bezel);border-radius:var(--radius);background:#0E0E0D;
  box-shadow:0 50px 80px -30px rgb(0 0 0 / .85),0 0 0 1px rgb(244 240 232 / .1);
}
.device-phone.sm{--bezel:6px;--radius:26px}
.device-phone > img,.device-phone > video{display:block;width:100%;height:auto;border-radius:calc(var(--radius) - var(--bezel))}
.device-browser{
  position:relative;display:block;border-radius:16px;overflow:hidden;background:#F4F0E8;
  box-shadow:0 50px 90px -40px rgb(0 0 0 / .8),0 0 0 1px rgb(38 39 37 / .12);
}
.device-browser > .dots{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px 0 56px;position:relative;background:#F4F0E8;color:#55584F;font:500 12px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;overflow:hidden}
.device-browser > .dots::before{content:"";position:absolute;left:12px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#C8BDB0;box-shadow:15px 0 #C8BDB0,30px 0 #C8BDB0}
.device-browser > img,.device-browser > video{display:block;width:100%;height:auto}

/* ---------- Top bar ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:40;height:var(--bar-h);gap:16px;color:var(--text);
  background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  transition:translate .45s var(--approach),background-color .35s,border-color .35s,color .35s;
}
.bar.over-hero{
  --bg:#121311;--text:#F4F0E8;--muted:#C5C0B6;--line:#4A4B44;--accent:#DCA17D;--accent-ink:#1A1B19;
  /* A flat dim band so the nav reads over the busy tile wall (no gradient wash). */
  background:rgb(18 19 17 / .58);border-bottom-color:transparent;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
}
html[data-theme="light"] .bar.over-hero .bar-brand img{filter:none}
.bar[data-under="paper"]:not(.over-hero) .bar-brand img{filter:brightness(0)}
.bar.over-hero .bar-progress{opacity:0}
.bar-progress{transition:opacity .3s}
.bar-menu{
  gap:10px;min-height:44px;padding:0 16px 0 18px;border:1.5px solid color-mix(in srgb,var(--text) 55%,transparent);border-radius:999px;
  color:var(--text);transition:transform .5s var(--spring),background-color .2s,color .2s,border-color .2s;
}
.bar-menu .lines{width:16px;gap:4px}
.bar-menu .lines i:last-child{width:10px}
@media (hover:hover){.bar-menu:hover{background:var(--text);border-color:var(--text);color:var(--bg);transform:scale(1.04)}}
.bar-menu:active{transform:scale(.95)}
@media (min-width:1000px){
  .bar-menu .word{display:inline}
  .bar-nav{gap:2px}
  .bar-nav a{font-size:14px;padding:0 14px;border-radius:999px;transition:color .2s,background-color .2s}
  .bar-nav a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
}

/* ---------- Menu sheet ---------- */
.menu{background:var(--bg);color:var(--text)}
.menu::backdrop{background:rgb(10 10 9 / .7)}
.menu-top{height:var(--bar-h)}
.menu-links{margin:clamp(20px,5svh,56px) 0 24px}
.menu-links li{overflow:visible}
.menu-links a{
  display:flex;align-items:baseline;gap:clamp(12px,2vw,24px);padding:clamp(4px,1.2svh,12px) 0;width:max-content;max-width:100%;
  font:800 clamp(38px,9.4vw,92px)/.95 var(--kt-font);letter-spacing:-.045em;text-decoration:none;
  transition:translate .55s var(--spring);
}
.menu-links a::before{font:700 12px/1 var(--sans);letter-spacing:.12em;translate:0 -1.6em;flex:none}
.menu-links a .kt-line{display:inline}
@media (hover:hover){
  .menu-links a:hover{translate:12px 0}
  .menu-links a:hover .kw{--kw-c:var(--accent-strong)}
}
.menu-links a:focus-visible .kw{--kw-c:var(--accent-strong)}
.menu-settings{border-top-color:var(--line)}
.toggle{border:1.5px solid var(--line)}
.toggle button{font-weight:500;transition:background-color .2s,color .2s,transform .45s var(--spring)}
.toggle button:active{transform:scale(.94)}
.menu .btn{min-height:52px}
@media (min-width:900px){
  .menu-settings{grid-template-columns:auto auto 1fr;align-items:center;gap:20px 40px}
  .menu .btn{width:auto;margin:0;justify-self:end}
}
@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .menu[open]{animation:kt-sheet .6s var(--approach)}
  html[data-motion="on"] .menu[open] .menu-links li{animation:none}
}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(36px,6vw,64px) 0 max(36px,env(safe-area-inset-bottom))}
.foot .wrap{gap:14px 32px;color:var(--muted);font-size:14px}
.foot .foot-mail{color:var(--text);min-height:44px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--text) 35%,transparent);text-underline-offset:.3em}
.foot .foot-mail:hover{text-decoration-color:var(--accent)}
.foot .foot-line{font:italic 500 clamp(22px,3vw,28px)/1.2 var(--display);letter-spacing:-.01em;color:var(--text)}
.foot .foot-contact{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.foot .foot-meta{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[data-theme="light"] .foot-brand img{filter:brightness(0)}

/* ---------- Reader shell (the case inside belongs to examples.css) ---------- */
.reader[data-look="paper"],.reader:has(.case[data-look="paper"]){
  --bg:#F4F0E8;--well:#E9E3D8;--raise:#FFFDF8;--text:#262725;--muted:#55584F;--line:#C8BDB0;
  --accent:#8A4E32;--accent-strong:#AD6B4A;--accent-ink:#FFFDF8;--paper:#262725;--paper-ink:#F4F0E8;color-scheme:light;
}
.reader{background:var(--bg);color:var(--text);transition:background-color .35s,color .35s}
.reader::backdrop{background:rgb(10 10 9 / .72)}
.reader-bar{border-bottom-color:var(--line);gap:12px}
.reader-count{font:700 12px/1 var(--sans);letter-spacing:.14em;color:var(--muted)}
.reader-arrows{gap:8px}
.reader-arrows .icon-btn{padding:0;width:44px}
.reader-scroll{position:relative}
.reader-foot{border-top-color:var(--line);background:var(--bg);gap:10px}
.step-btn{
  min-height:56px;padding:9px 22px;border:1.5px solid var(--line);border-radius:999px;color:var(--text);
  transition:transform .5s var(--spring),border-color .2s,background-color .2s;
}
.step-btn small{font:700 11px/1.3 var(--sans);letter-spacing:.12em;color:var(--accent)}
.step-btn span{font:700 16px/1.25 var(--sans);letter-spacing:-.015em}
.step-btn span b{font:600 12px/1 var(--sans);letter-spacing:.06em}
.step-btn:active{transform:scale(.97)}
@media (hover:hover){.step-btn:hover{border-color:var(--text);transform:translateY(-2px)}}
@media (min-width:1000px){.reader{border-radius:20px;border:1px solid var(--line)}}
@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .reader[open]{animation:kt-sheet .6s var(--approach)}
}

@keyframes kt-sheet{from{translate:0 48px;opacity:0}to{translate:0 0;opacity:1}}

/* Motion off: transitions done instantly (styles.css also kills animations). */
html[data-motion="off"] [data-kt-stack] .kt-line{transition:none}

/* Review fixes 2026-10-01: 44 px touch targets in the menu settings. */
#menu .toggle button{min-height:44px}