/* Inter (variable weight) and Instrument Serif italic, both SIL Open Font License, self-hosted. Latin only. */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-display:swap;font-weight:400;src:url(fonts/instrument-serif-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Reza Ghenaat: one quiet column, Inter for text, Instrument Serif italic for the accents.
   Light by default; dark follows the system until the visitor picks one with the header button. */

:root{
  color-scheme:light;
  --bg:#FAF9F7;--surface:#FFFFFF;--ink:#131417;--muted:#5F626A;--line:#E7E5E0;--line-strong:#D3D0C9;--hover:#F2F0EC;
  --shadow:0 1px 2px rgb(20 18 14 / .04),0 8px 24px -12px rgb(20 18 14 / .14);
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-serif:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
  --wrap:40rem;--gutter:clamp(1.25rem,5vw,1.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E0F11;--surface:#16171A;--ink:#F1F1EF;--muted:#A2A5AC;--line:#24262A;--line-strong:#363940;--hover:#1B1C20;
    --shadow:0 1px 2px rgb(0 0 0 / .3),0 10px 30px -12px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0F11;--surface:#16171A;--ink:#F1F1EF;--muted:#A2A5AC;--line:#24262A;--line-strong:#363940;--hover:#1B1C20;
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 10px 30px -12px rgb(0 0 0 / .6);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--f-sans);font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
svg{flex:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{position:absolute;inset-block-start:-100px;inset-inline-start:1rem;background:var(--ink);color:var(--bg);padding:.5rem 1rem;border-radius:8px;z-index:10;text-decoration:none}
.skip-link:focus{inset-block-start:.75rem}

/* ---------- Header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding-block:1.5rem}
.mono{display:inline-grid;place-items:center;min-width:44px;height:44px;padding-inline:.65rem;border:1px solid var(--line);border-radius:12px;font:italic 400 1.35rem/1 var(--f-serif);letter-spacing:.01em;text-decoration:none;transition:border-color .2s,background-color .2s}
.mono:hover{border-color:var(--line-strong);background:var(--hover)}
.theme-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s}
.theme-btn:hover{border-color:var(--line-strong);background:var(--hover)}
.theme-btn svg{width:18px;height:18px;grid-area:1/1;transition:transform .5s var(--ease),opacity .3s}
.theme-btn .i-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
.theme-btn[aria-pressed="true"] .i-sun{opacity:1;transform:none}
.theme-btn[aria-pressed="true"] .i-moon{opacity:0;transform:rotate(90deg) scale(.6)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2rem,7vw,4rem) 0}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-block-end:1.75rem;filter:grayscale(1) contrast(1.02);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--line);transition:filter .6s var(--ease)}
.avatar:hover{filter:none}
h1{font-size:clamp(2.1rem,7vw,2.9rem);font-weight:600;line-height:1.1;letter-spacing:-.035em}
h1 em{display:inline-block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em;padding-inline-end:.06em}
.lead{margin-block-start:1.1rem;color:var(--muted);font-size:1.0625rem;max-width:34rem}
.lead p+p{margin-block-start:.6rem}
.meta{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-block-start:1.4rem;color:var(--muted);font-size:.9rem}
.meta-item{display:inline-flex;align-items:center;gap:.4rem;font-variant-numeric:tabular-nums}
.meta-item svg{width:16px;height:16px}

.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:1.75rem}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding-inline:1.05rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:500 .9375rem/1 var(--f-sans);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),border-color .2s,background-color .2s,box-shadow .2s}
.btn:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.primary:hover{opacity:.9}
.btn.square{width:44px;padding:0}
.btn .go{width:14px;height:14px;color:var(--muted);transition:transform .25s var(--ease)}
.btn:hover .go{transform:translate(2px,-2px)}
.btn .i-check{display:none}
.btn.is-copied .i-copy{display:none}
.btn.is-copied .i-check{display:block}
.copied-tip{position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;translate:-50% 4px;padding:.3rem .55rem;border-radius:8px;background:var(--ink);color:var(--bg);font-size:.78rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,translate .25s var(--ease)}
.btn.is-copied .copied-tip{opacity:1;translate:-50% 0}

/* ---------- Sections ---------- */
.section{padding-block-start:clamp(3.25rem,9vw,4.5rem)}
.label{display:flex;align-items:center;gap:.9rem;margin-block-end:1.1rem;font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.label::after{content:"";flex:1;height:1px;background:var(--line)}

/* Things I've made */
.work{display:grid;gap:.75rem}
@media (min-width:36rem){.work{grid-template-columns:1fr 1fr}}
.work-card{position:relative;display:flex;align-items:flex-start;gap:.9rem;height:100%;padding:1rem 2.25rem 1rem 1rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-decoration:none;transition:transform .3s var(--ease),border-color .2s,box-shadow .3s var(--ease)}
.work-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.work-icon{width:48px;height:48px;border-radius:12px;flex:none;object-fit:cover}
.work-text{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.work-head{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.work-name{font-weight:600;font-size:1rem;letter-spacing:-.01em}
.tag{padding:.1rem .5rem;border-radius:999px;background:var(--hover);border:1px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:500;line-height:1.5;white-space:nowrap}
.work-desc{color:var(--muted);font-size:.9rem;line-height:1.5}
.work-card .go{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;width:14px;height:14px;color:var(--muted);transition:transform .25s var(--ease),color .2s}
.work-card:hover .go{transform:translate(2px,-2px);color:var(--ink)}

/* Find me on */
.links li+li{border-block-start:1px solid var(--line)}
.links a{display:flex;align-items:center;gap:1rem;min-height:52px;padding-inline:.25rem;text-decoration:none;transition:padding .3s var(--ease),background-color .2s;border-radius:10px}
.links a:hover{padding-inline:.75rem;background:var(--hover)}
.l-name{font-weight:500}
.l-handle{margin-inline-start:auto;color:var(--muted);font-size:.9rem}
.links .go{width:14px;height:14px;color:var(--muted);transition:transform .25s var(--ease),color .2s}
.links a:hover .go{transform:translate(2px,-2px);color:var(--ink)}

/* Get in touch */
.contact p{color:var(--muted)}
.big-mail{display:inline-block;margin-block-start:.1rem;padding-block:.35rem;font:italic 400 clamp(1.7rem,6.4vw,2.4rem)/1.25 var(--f-serif);letter-spacing:-.005em;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .35rem)/0 1px no-repeat;transition:background-size .45s var(--ease)}
.big-mail:hover,.big-mail:focus-visible{background-size:100% 1px}
.reveal{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;margin-block-start:.9rem;padding:.45rem 1.15rem .45rem 1rem;border:1px dashed var(--line-strong);border-radius:14px;background:var(--surface);color:var(--ink);font:italic 400 clamp(1.35rem,4.6vw,1.6rem)/1.2 var(--f-serif);cursor:pointer;transition:border-color .2s,box-shadow .3s var(--ease),transform .2s var(--ease)}
.reveal svg{width:18px;height:18px;color:var(--muted);transition:color .2s}
.reveal:hover{border-style:solid;box-shadow:var(--shadow)}
.reveal:hover svg{color:var(--ink)}
.reveal:active{transform:scale(.98)}
@media (prefers-reduced-motion:no-preference){.big-mail.shown{animation:rise .5s var(--ease) both}}

/* ---------- Footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;margin-block-start:clamp(4rem,10vw,5.5rem);padding-block:1.5rem 2.5rem;border-block-start:1px solid var(--line);color:var(--muted);font-size:.875rem}
@supports (padding:max(0px)){.foot{padding-block-end:max(2.5rem,env(safe-area-inset-bottom))}}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .anim .rise{animation:rise .7s var(--ease) both}
  .anim .hero > .rise:nth-child(2){animation-delay:.06s}
  .anim .hero > .rise:nth-child(3){animation-delay:.12s}
  .anim .hero > .rise:nth-child(4){animation-delay:.18s}
  .anim .hero > .rise:nth-child(5){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}}
  /* Theme switch: the new theme opens as a circle from the button (app.js sets the origin). */
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}