/* ══════════════════════════════════════════════════════════════════════════
   EGY METAL — design tokens
   bg #0E0F0F · panel #121717 · light panel #E9E7E2 · accent brushed aluminium
   Display: Syne · Body: Archivo · Labels/data: Space Mono
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --base:#0e0f0f; --panel:#121717; --light:#e9e7e2; --paper:#ffffff;
  --dim:#bababa; --mute:#8b8e8f;
  --accent:#c9cfd6;        /* brushed-aluminium silver */
  --accent-deep:#3f4a52;   /* dark steel — AA on light panels */
  --ink:#38332f;
  --line:rgba(255,255,255,.12); --line-dark:rgba(14,15,15,.14);
  --font-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Syne","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --d-xl:clamp(2.55rem,11vw,10rem);
  --d-lg:clamp(2.5rem,7.4vw,6.5rem);
  --d-md:clamp(1.9rem,4.5vw,3.5rem);
  --d-sm:clamp(1.35rem,2.6vw,2.125rem);
  --pad:1.5rem;
}
@media (min-width:768px){ :root{ --pad:2.5rem; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:initial;-webkit-text-size-adjust:100%}
body{background:var(--base);color:var(--paper);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;min-height:100%;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--base)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Author display rules below (.chips flex, #cform grid, .view) would otherwise outrank the
   UA [hidden] rule and keep hidden elements on screen. */
[hidden]{display:none!important}

/* aircenter display treatment: uppercase, tight tracking, lh ~0.95 */
.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.04em;
  line-height:.95;font-weight:500}
/* vaulk mono label: eyebrows, indexes, data overlays */
.mono{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;line-height:1.5}

.wrap{padding-inline:var(--pad)}
.pad-y{padding-block:7rem}
@media (min-width:768px){ .pad-y{padding-block:11rem} }
.bg-panel{background:var(--panel)}
.bg-light{background:var(--light)}
.t-dim{color:var(--dim)} .t-mute{color:var(--mute)} .t-accent{color:var(--accent)}

/* elyse parallax reveal containers clip their media */
.media-clip{overflow:hidden;position:relative}
/* descendant, not child: every <img> now sits inside a <picture> wrapper */
.media-clip img,.media-clip>video{width:100%;height:100%;object-fit:cover}
/* the wrapper must not generate a box, or it breaks the flex/grid parents above it */
picture{display:contents}

/* Anti-flash: with JS + motion active, pre-hide scroll-reveal targets. */
.anim .r-fade{opacity:0}
.anim .r-line,.anim .r-copy{visibility:hidden}
.split-line{will-change:transform}

/* ── pill button ─────────────────────────────────────────────────────────── */
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:.75rem 1.5rem;color:var(--paper);
  transition:border-color .25s,color .25s}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.sm{padding:.625rem 1.25rem}

/* ── loader (vaulk: counter 0→100, brand mark, overlay lifts) ─────────────── */
#loader{position:fixed;inset:0;z-index:100;background:#000;display:flex;
  align-items:center;justify-content:center}
#loader img{height:7rem;width:auto}
@media (min-width:768px){ #loader img{height:10rem} }
#loader .count{position:absolute;bottom:2rem;left:var(--pad);font-family:var(--font-mono);
  color:var(--paper);font-size:3rem;font-weight:400;font-variant-numeric:tabular-nums}
@media (min-width:768px){ #loader .count{font-size:4.5rem} }
#loader .of{position:absolute;bottom:2rem;right:var(--pad);color:var(--mute)}

/* ── nav (aircenter ultra-minimal fixed) ─────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;
  background:transparent;backdrop-filter:none;
  transition:background-color .5s ease-out,backdrop-filter .5s ease-out,border-color .5s ease-out}
#nav.solid{background:rgba(14,15,15,.7);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
#nav .bar{display:flex;align-items:center;justify-content:space-between;height:3.5rem;
  padding-inline:var(--pad)}
@media (min-width:768px){ #nav .bar{height:4rem} }
#nav .brand{display:flex;align-items:center;gap:.7rem}
#nav .brand img{height:2rem;width:auto}
#nav .brand span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:.95rem;line-height:1}
#nav .links{display:none;align-items:center;gap:2.5rem}
@media (min-width:768px){ #nav .links{display:flex} }
#nav .links a.nl{color:var(--dim);transition:color .25s}
#nav .links a.nl:hover,#nav .links a.nl.on{color:var(--paper)}
#nav .burger{display:block;background:none;border:0;cursor:pointer;color:var(--paper)}
@media (min-width:768px){ #nav .burger{display:none} }
#mobilenav{display:none;border-top:1px solid var(--line);background:var(--base);
  padding:2rem var(--pad);flex-direction:column;gap:1.5rem}
#mobilenav.open{display:flex}
@media (min-width:768px){ #mobilenav,#mobilenav.open{display:none} }
#mobilenav a{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.04em;
  font-size:1.5rem;font-weight:500}
#mobilenav a.cta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;
  color:var(--accent);padding-top:.5rem;text-transform:uppercase}

/* ── section head (lagom numbered index + vaulk mono eyebrow) ────────────── */
.sechead{display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:1rem;padding-bottom:3.5rem}
@media (min-width:768px){ .sechead{padding-bottom:5rem} }
.sechead.light{border-top-color:var(--line-dark)}
.sechead .ix{color:var(--accent)}
.sechead .eb{color:var(--mute)}
.sechead.light .ix{color:var(--accent-deep)}
.sechead.light .eb{color:rgba(56,51,47,.75)}

/* ── hero ────────────────────────────────────────────────────────────────── */
#hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
#hero .media{position:absolute;inset:0}
#hero .media video,#hero .media img{height:100%;width:100%;object-fit:cover}
#hero .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,var(--base),rgba(14,15,15,.3) 50%,rgba(14,15,15,.6))}
#hero .frame{position:absolute;inset:1.5rem;pointer-events:none}
@media (min-width:768px){ #hero .frame{inset:2.5rem} }
#hero .frame span{position:absolute;width:1.25rem;height:1.25rem;border-color:rgba(255,255,255,.6)}
#hero .inner{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding-inline:var(--pad);padding-bottom:4rem}
@media (min-width:768px){ #hero .inner{padding-bottom:5rem} }
#hero h1{font-size:var(--d-xl)}
#hero .line{display:block;overflow:hidden}
#hero .line>span{display:block}
#hero .sub{margin-top:1.75rem;max-width:28rem;color:var(--dim);font-size:1rem;line-height:1.65}
@media (min-width:768px){ #hero .sub{font-size:1.125rem} }
#hero .eyebrow{color:var(--dim);margin-bottom:1.5rem}
#hero .scroll{position:absolute;bottom:5rem;right:2.5rem;display:none;flex-direction:column;
  align-items:center;gap:.75rem}
@media (min-width:768px){ #hero .scroll{display:flex} }
#hero .scroll .rail{width:1px;height:3rem;background:var(--line);position:relative;overflow:hidden}
#hero .scroll .rail i{position:absolute;left:0;right:0;top:0;height:1rem;background:var(--accent)}

/* corner brackets — shared */
.br-tl{top:0;left:0;border-top:1px solid;border-left:1px solid}
.br-tr{top:0;right:0;border-top:1px solid;border-right:1px solid}
.br-bl{bottom:0;left:0;border-bottom:1px solid;border-left:1px solid}
.br-br{bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}

/* ── manifesto ───────────────────────────────────────────────────────────── */
#about h2{font-size:var(--d-lg);max-width:64rem}
#about .grid{margin-top:4rem;display:grid;grid-template-columns:repeat(12,1fr);gap:2.5rem}
@media (max-width:767px){ #about .grid{display:block;margin-top:4rem} }
@media (min-width:768px){ #about .grid{margin-top:6rem} }
#about .col{grid-column:7 / span 5;display:flex;flex-direction:column;gap:1.5rem}
#about .col p{color:var(--dim);line-height:1.7;font-size:1rem}
@media (min-width:768px){ #about .col p{font-size:1.125rem} }
#about .quote{margin-top:6rem;color:var(--mute);max-width:20rem;line-height:2}
@media (min-width:768px){ #about .quote{margin-top:9rem} }

/* ── stats ───────────────────────────────────────────────────────────────── */
#stats .grid{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:1024px){ #stats .grid{grid-template-columns:repeat(4,1fr)} }
#stats .cell{display:flex;flex-direction:column;gap:1rem;padding-block:2.5rem;padding-right:1.5rem}
@media (min-width:1024px){
  #stats .cell{padding-block:.5rem}
  #stats .cell + .cell{border-left:1px solid var(--line);padding-left:2.5rem}
}
#stats .v{font-size:var(--d-md);font-variant-numeric:tabular-nums}

/* ── systems (home grid) ─────────────────────────────────────────────────── */
#systems h2{font-size:var(--d-lg);max-width:56rem;margin-bottom:4rem}
@media (min-width:768px){ #systems h2{margin-bottom:6rem} }
#systems .grid{display:grid;gap:3.5rem 2rem}
@media (min-width:768px){ #systems .grid{grid-template-columns:repeat(2,1fr);gap:5rem 2rem} }
.sys-card .shot{position:relative;aspect-ratio:4/3}
.sys-card .shot .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,15,15,.8),transparent 50%,rgba(14,15,15,.2))}
.sys-card .shot .bk{position:absolute;width:1rem;height:1rem;border-color:rgba(255,255,255,.5)}
.sys-card .shot .bk.br-tl{top:.75rem;left:.75rem}
.sys-card .shot .bk.br-tr{top:.75rem;right:.75rem}
.sys-card .shot .bk.br-bl{bottom:.75rem;left:.75rem}
.sys-card .shot .bk.br-br{bottom:.75rem;right:.75rem}
.sys-card .shot .tag{position:absolute;top:1.25rem;right:1.5rem;color:rgba(255,255,255,.7)}
.sys-card .shot .num{position:absolute;bottom:1.25rem;left:1.5rem;color:var(--accent)}
.sys-card h3{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.25rem;
  font-size:1.25rem}
@media (min-width:768px){ .sys-card h3{font-size:1.5rem} }
.sys-card p{margin-top:.75rem;color:var(--mute);font-size:.875rem;line-height:1.7;max-width:65ch}
@media (min-width:768px){ .sys-card p{font-size:1rem} }
.row-end{margin-top:5rem;display:flex;justify-content:flex-end}

/* ── projects (home rows) ────────────────────────────────────────────────── */
#projects h2{font-size:var(--d-lg);max-width:56rem;margin-bottom:4rem}
@media (min-width:768px){ #projects h2{margin-bottom:7rem} }
#projects .rows{display:flex;flex-direction:column;gap:5rem}
@media (min-width:768px){ #projects .rows{gap:8rem} }
.pj-row{display:grid;gap:1.5rem;align-items:end}
@media (min-width:768px){
  .pj-row{grid-template-columns:repeat(12,1fr)}
  .pj-row .shot{grid-column:span 8}
  .pj-row .meta{grid-column:span 4}
  .pj-row.flip .shot{grid-column:5 / span 8;grid-row:1}
  .pj-row.flip .meta{grid-column:1 / span 4;grid-row:1}
}
.pj-row .shot .media-clip{aspect-ratio:16/10}
.pj-row .meta{display:flex;flex-direction:column;gap:1rem;padding-bottom:.5rem}
.pj-row .meta h3{font-size:var(--d-sm)}
.pj-row .meta .stats{color:rgba(255,255,255,.5);line-height:2}

/* ── process ─────────────────────────────────────────────────────────────── */
#process h2{font-size:var(--d-lg);max-width:56rem;margin-bottom:4rem}
@media (min-width:768px){ #process h2{margin-bottom:6rem} }
#process ol{display:grid;gap:3rem 2rem}
@media (min-width:768px){ #process ol{grid-template-columns:repeat(4,1fr)} }
#process li{border-top:1px solid var(--line);padding-top:1.5rem;position:relative}
#process li .dot{position:absolute;top:-3px;left:0;width:.375rem;height:.375rem;
  border-radius:999px;background:var(--accent)}
#process li h3{font-size:1.125rem;margin-top:1.25rem}
@media (min-width:768px){ #process li h3{font-size:1.25rem} }
#process li p{margin-top:1rem;color:var(--mute);font-size:.875rem;line-height:1.7}

/* ── contact (vaulk light panel, dual mode) ──────────────────────────────── */
#contact{color:var(--ink)}
#contact .grid{display:grid;gap:3.5rem}
@media (min-width:1024px){
  #contact .grid{grid-template-columns:repeat(12,1fr)}
  #contact .main{grid-column:span 7}
  #contact aside{grid-column:9 / span 4}
}
#contact h2{font-size:var(--d-lg);max-width:42rem;color:var(--ink)}
#contact .sub{margin-top:1.5rem;color:rgba(56,51,47,.8);max-width:28rem;line-height:1.7}
.modes{margin-top:2.5rem;display:inline-flex;border:1px solid var(--line-dark);
  border-radius:999px;padding:.25rem}
.modes button{background:none;border:0;cursor:pointer;padding:.625rem 1.25rem;
  border-radius:999px;color:rgba(56,51,47,.75);transition:background-color .25s,color .25s}
.modes button:hover{color:var(--ink)}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--light)}
#cform{margin-top:3rem;display:grid;gap:1.75rem 2rem;max-width:42rem}
@media (min-width:640px){ #cform{grid-template-columns:repeat(2,1fr)} }
#cform .full{grid-column:1/-1}
#cform label.f{display:flex;flex-direction:column;gap:.25rem}
#cform .lb{color:rgba(56,51,47,.75)}
#cform input,#cform textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line-dark);padding-block:.75rem;color:var(--ink);
  transition:border-color .25s;border-radius:0}
#cform input::placeholder,#cform textarea::placeholder{color:rgba(56,51,47,.35)}
#cform input:focus,#cform textarea:focus{outline:0;border-bottom-color:var(--accent-deep)}
#cform textarea{resize:vertical}
#cform fieldset{border:0}
#cform legend{color:rgba(56,51,47,.75);margin-bottom:.75rem;font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips button{background:none;cursor:pointer;padding:.5rem 1rem;border-radius:999px;
  border:1px solid var(--line-dark);color:rgba(56,51,47,.75);transition:border-color .25s,color .25s}
.chips button:hover{color:var(--ink)}
.chips button[aria-pressed="true"]{border-color:var(--accent-deep);color:var(--accent-deep)}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  align-self:start;border:0;cursor:pointer;border-radius:999px;background:#25d366;
  padding:1rem 2rem;color:#06251a;transition:background-color .25s;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.wa-btn:hover{background:#1fb959}
.wa-btn svg{width:1.25rem;height:1.25rem;fill:currentColor}
.wa-note{color:rgba(56,51,47,.55);display:inline-flex;align-items:center;gap:.5rem}
.wa-note svg{width:.875rem;height:.875rem;fill:#25d366;flex:0 0 auto}
#sent{margin-top:3rem;max-width:28rem}
#sent .display{font-size:1.5rem;color:var(--ink)}
#sent p{margin-top:1rem;color:rgba(56,51,47,.8);line-height:1.7}
#sent a{text-decoration:underline;text-underline-offset:4px}
#sent button{background:none;border:0;cursor:pointer;color:var(--accent-deep);margin-top:2rem;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
#contact aside{display:flex;flex-direction:column;gap:2.5rem}
#contact aside .lb{color:rgba(56,51,47,.75)}
#contact aside p,#contact aside ul{margin-top:.75rem;line-height:1.7}
#contact aside .addr span{display:block}
#contact aside .tel{font-size:1.25rem;text-underline-offset:4px}
#contact aside .tel:hover{text-decoration:underline}
#contact aside ul{display:flex;flex-direction:column;gap:.5rem}
#contact aside ul a{transition:color .25s}
#contact aside ul a:hover{color:var(--accent-deep)}

/* ── page header (inner views) ───────────────────────────────────────────── */
.pagehead{padding-inline:var(--pad);padding-top:9rem;padding-bottom:4rem}
@media (min-width:768px){ .pagehead{padding-top:12rem;padding-bottom:6rem} }
.pagehead .eb{color:var(--mute);margin-bottom:2rem}
.pagehead h1{font-size:var(--d-xl)}
.pagehead hr{border:0;border-bottom:1px solid var(--line);margin-top:4rem}

/* ── system index (systems view) ─────────────────────────────────────────── */
.sys-row{display:grid;gap:2rem;align-items:center;border-top:1px solid var(--line);
  padding-block:3.5rem}
@media (min-width:768px){ .sys-row{padding-block:5rem} }
@media (min-width:1024px){
  .sys-row{grid-template-columns:repeat(12,1fr)}
  .sys-row .ix{grid-column:span 1}
  .sys-row .shot{grid-column:span 5}
  .sys-row .meta{grid-column:8 / span 5}
}
.sys-row .ix{color:var(--accent)}
.sys-row .shot .media-clip{aspect-ratio:16/10}
.sys-row .shot .bk{position:absolute;width:1rem;height:1rem;border-color:rgba(255,255,255,.5)}
.sys-row .shot .bk.br-tl{top:.75rem;left:.75rem}
.sys-row .shot .bk.br-tr{top:.75rem;right:.75rem}
.sys-row .shot .bk.br-bl{bottom:.75rem;left:.75rem}
.sys-row .shot .bk.br-br{bottom:.75rem;right:.75rem}
.sys-row .shot .tag{position:absolute;top:1.25rem;right:1.5rem;color:rgba(255,255,255,.7)}
.sys-row .meta{display:flex;flex-direction:column;gap:1.25rem}
.sys-row .meta h2{font-size:var(--d-sm)}
.sys-row .meta p{color:var(--dim);line-height:1.7}
.sys-row .meta a{color:var(--accent);margin-top:.5rem}

/* ── project index (projects view) ───────────────────────────────────────── */
.pj-list{display:flex;flex-direction:column;gap:7rem}
@media (min-width:768px){ .pj-list{gap:11rem} }
.pj-case{display:grid;gap:2rem;align-items:start}
@media (min-width:1024px){
  .pj-case{grid-template-columns:repeat(12,1fr)}
  .pj-case .shot{grid-column:span 7}
  .pj-case .meta{grid-column:span 5;padding-top:.5rem;padding-left:2.5rem}
  .pj-case.flip .shot{grid-column:6 / span 7;grid-row:1}
  .pj-case.flip .meta{grid-column:1 / span 5;grid-row:1;padding-left:0;padding-right:2.5rem}
}
.pj-case .shot .media-clip{aspect-ratio:16/11}
.pj-case .meta{display:flex;flex-direction:column;gap:1.25rem}
.pj-case .meta h2{font-size:var(--d-md)}
.pj-case .meta .body{color:var(--dim);line-height:1.7}
.pj-case .meta .stats{color:rgba(255,255,255,.5);line-height:2;
  border-top:1px solid var(--line);padding-top:1.25rem;margin-top:.5rem}

/* ── footer ──────────────────────────────────────────────────────────────── */
#foot{background:var(--base);border-top:1px solid var(--line);padding-inline:var(--pad);
  padding-top:4rem;padding-bottom:2rem}
#foot .tagline{color:var(--mute);max-width:36rem;line-height:2}
#foot .mid{margin-top:3rem;display:flex;flex-direction:column;gap:2.5rem;
  justify-content:space-between}
@media (min-width:768px){ #foot .mid{flex-direction:row;align-items:flex-end} }
#foot .brand{display:flex;align-items:center;gap:.85rem}
#foot .brand img{height:2.75rem;width:auto}
#foot .brand span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.15rem;line-height:1}
#foot nav{display:flex;flex-wrap:wrap;gap:.75rem 2rem}
#foot nav a{color:var(--dim);transition:color .25s}
#foot nav a:hover{color:var(--paper)}
#foot .legal{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.5rem;color:var(--mute)}

/* ── views ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}