/* home.css: home page features (Stage 2). Loaded after the page's inline styles. */

/* ---------- header picks its own contrast (replaces the difference blend) ---------- */
html:root body header.top{mix-blend-mode:normal!important;background:transparent!important;color:var(--hc,#0e0e0e)!important;transition:color .25s,background-color .25s}
html:root body header.top a,html:root body header.top button,html:root body header.top span{color:var(--hc,#0e0e0e)!important}
html:root body header.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;
  background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,0))}
html[data-hdr="photo-dark"]:root body header.top::before{opacity:1}
html[data-hdr="paper"]:root body header.top::before{opacity:0}

/* ---------- hero name: weight follows scroll speed ---------- */
.name{font-variation-settings:"wght" var(--nw,500);font-weight:var(--nw,500)!important}

/* ---------- view switch: Slides / List ---------- */
.gm-view{position:relative;z-index:3;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-block:10px;background:var(--paper);color:var(--on-paper);font-size:12px;border-top:1px solid var(--hair,rgba(14,14,14,.12))}
.gm-view .lbl{color:var(--on-paper-2);letter-spacing:.02em}
.gm-seg{display:inline-flex;border:1px solid currentColor}
.gm-seg button{font:inherit;color:inherit;background:none;border:0;min-height:36px;padding:0 14px;cursor:pointer;letter-spacing:.02em}
.gm-seg button[aria-pressed="true"]{background:var(--on-paper);color:var(--paper)}
.gm-view .k{margin-right:auto;color:var(--on-paper-2)}
.gm-view .k button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;min-height:36px;padding:0}
.gm-view .k kbd{font:inherit;border:1px solid var(--hair,rgba(14,14,14,.2));padding:1px 5px}
html.view-list #work .full{display:none}
#work .index{display:none}
html.view-list #work .index{display:grid!important}
#work .index{background:var(--ink);color:var(--on-ink);padding-top:28px}

/* ---------- slides: snap, current counter, grain, cursor label ---------- */
html.view-slides{scroll-snap-type:y proximity}
html.view-slides .slot{scroll-snap-align:start;container-type:scroll-state}
@container scroll-state(snapped:y){.slide .meta>span{background:#fff!important;color:#0b0b0b!important}}
.slide::after{content:"";position:absolute;inset:-50%;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gm-grain .6s steps(4) infinite}
@keyframes gm-grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-3%)}75%{transform:translate(-2%,-2%)}}
.slide h2,.slide .meta,.slide .go{z-index:2}
.slide img{animation:gm-settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes gm-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@supports not (animation-timeline:view()){.slide img{animation:none}}
.gm-cur{position:fixed;left:0;top:0;z-index:30;pointer-events:none;background:#fff;color:#0b0b0b;font:500 13px/1 var(--font);padding:10px 14px;border-radius:999px;
  transform:translate(-50%,-50%) scale(0);transition:transform .18s;white-space:nowrap}
.gm-cur.on{transform:translate(-50%,-50%) scale(1)}
@media (hover:hover) and (pointer:fine){.slide,.sq{cursor:none}.slide .go,.sq .go{display:none!important}}
.slot.gm-back .slide::before,.slot.gm-back .sq::before{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 4px #fff;pointer-events:none;animation:gm-flash 1.6s ease-out forwards}
.slot.gm-back .sq[href="/freaney"]::before{box-shadow:inset 0 0 0 4px #0e0e0e}
@keyframes gm-flash{0%,60%{opacity:1}100%{opacity:0}}

/* ---------- Typography 47 riffle on the TWBT slide ---------- */
.gm-riffle{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .25s;pointer-events:none;background:#0c0c0b}
.gm-riffle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.gm-riffle img.on{visibility:visible}
.slide.riffling .gm-riffle{opacity:1}
.gm-riffle::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.28),transparent 22%,transparent 45%,rgba(0,0,0,.55))}
.gm-rc{position:absolute;right:max(var(--pad,20px),env(safe-area-inset-right,0px));top:calc(112px + env(safe-area-inset-top,0px));z-index:2;font-size:12px;padding:6px 9px;background:rgba(11,11,11,.9);color:#fff;opacity:0;transition:opacity .2s;font-variant-numeric:tabular-nums}
.slide.riffling .gm-rc{opacity:1}

/* ---------- Projects menu with picture previews ---------- */
.pj.gm-pv-on:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 150px}
.pj .gm-pjpv{display:none;position:relative;overflow:hidden;background:#ddd;border-left:1px solid rgba(14,14,14,.12)}
.pj.gm-pv-on .gm-pjpv{display:block}
.pj .gm-pjpv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.pj .gm-pjpv img.on{opacity:1}
@media (max-width:640px),(hover:none){.pj.gm-pv-on:not([hidden]){display:block}.pj .gm-pjpv{display:none!important}}

/* ---------- About: name → press/highlights → experience+skills ---------- */
#about .about,#about .meta2{display:none!important}
.gm-ab{container-type:inline-size;display:grid;gap:clamp(22px,3vw,36px);width:min(100%,1080px);margin:0 auto;padding-bottom:clamp(56px,7vw,96px)}
.gm-ab-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.gm-ab-id{min-width:0;flex:1}
.gm-ab-h h2{margin:0;font-size:clamp(28px,4.2vw,48px);line-height:.95;letter-spacing:-.035em;font-weight:500;color:var(--on-ink)}
.gm-ab-tag{margin:10px 0 0;max-width:42ch;font-size:clamp(14px,1.35vw,17px);line-height:1.35;color:rgba(242,240,235,.78);font-weight:400}
.gm-ab-loc{font-size:12px;color:var(--on-ink-2);white-space:nowrap;padding-top:8px}
.gm-ab-photo{margin:0;overflow:hidden}
.gm-ab-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:56% 30%}
.gm-press .k,.gm-exp-tog .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-2)}
.gm-press ul{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid rgba(242,240,235,.35)}
.gm-press li{display:grid;grid-template-columns:72px minmax(0,1fr) 44px;gap:12px;padding:10px 0;border-bottom:1px solid rgba(242,240,235,.14);font-size:14px;align-items:baseline}
.gm-press li b{font-weight:600}.gm-press li em{font-style:normal;color:var(--on-ink-2);text-align:right;font-size:12px}
.gm-exp{border-top:1px solid rgba(242,240,235,.35);border-bottom:1px solid rgba(242,240,235,.35);padding:4px 0 18px}
.gm-exp-tog{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.gm-exp-tog i{font-style:normal;font-size:16px;line-height:1;color:var(--on-ink-2)}
.gm-exp-body{display:grid;gap:18px}
.gm-exp-tog[aria-expanded="false"] + .gm-exp-body{display:none}
.gm-exp ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.35;font-weight:500}
.gm-exp li span{font-size:12px;font-weight:400;color:var(--on-ink-2);margin-left:6px;white-space:nowrap}
.gm-exp-also{margin:0;padding-top:14px;border-top:1px solid rgba(242,240,235,.18);font-size:14px;line-height:1.5;color:rgba(242,240,235,.78);font-weight:400}
.gm-skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px;padding-top:6px}
.gm-skills h5{margin:0 0 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--on-ink-2)}
.gm-skills p{margin:0;font-size:12px;line-height:1.45;color:rgba(242,240,235,.88);text-align:start;hyphens:manual;-webkit-hyphens:manual}
.gm-ab-contact{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.gm-ab-mail{color:inherit;text-decoration:none;font-size:14px;user-select:all}
.gm-ab-contact .row{display:flex;flex-wrap:wrap;gap:8px}
.gm-ab-contact .row a,.gm-ab-contact .row button{font:inherit;color:inherit;background:none;border:1px solid rgba(242,240,235,.4);min-height:40px;padding:0 12px;display:inline-flex;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.gm-ab-contact .row a:hover,.gm-ab-contact .row button:hover{background:var(--on-ink);color:var(--ink)}
@media (max-width:700px){
  .gm-press li{grid-template-columns:64px minmax(0,1fr) 40px;gap:8px;font-size:13px}
  .gm-skills{grid-template-columns:1fr 1fr}
  .gm-ab-h{flex-direction:column;gap:8px}
  .gm-ab-loc{padding-top:0}
}
@media (max-width:420px){
  .gm-skills{grid-template-columns:1fr}
  .gm-press li{grid-template-columns:1fr;gap:2px}
  .gm-press li em{text-align:left}
}
.gm-ab-photo,.gm-press,.gm-exp,.gm-ab-contact{animation:gm-rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
@keyframes gm-rise{from{opacity:.35;translate:0 18px}to{opacity:1;translate:0 0}}
@supports not (animation-timeline:view()){.gm-ab-photo,.gm-press,.gm-exp,.gm-ab-contact{animation:none}}

/* ---------- slim footer (chosen) ---------- */
footer.gm-slim{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px 28px;grid-template-columns:none!important}
footer.gm-slim .end{margin-left:auto;text-align:right}
footer.gm-slim a,footer.gm-slim .gm-mail-copy{color:inherit;text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;letter-spacing:.02em}
footer.gm-slim a:hover,footer.gm-slim .gm-mail-copy:hover{opacity:.65}
footer.gm-slim .gm-mail-copy:focus-visible{outline:2px solid currentColor;outline-offset:3px}
footer.gm-slim .gm-prefs{margin-left:0}
@media (max-width:640px){footer.gm-slim .end{margin-left:0;width:100%;text-align:left}}