/* industrialethic.com home, v2 draft: the inverse of Business Foundry (docs/handoff_industrialethic-inverse-foundry_2026-10-28.md).
   Dark header, dark photo bands where Business Foundry is white, light bands where it is dark, black footer.
   Colors from the IEDCO kit (/css/iedco-kit.css) and the Business Foundry :root; Raleway + JetBrains Mono for the site,
   Montserrat only inside the featured Business Foundry block so it reads as its own brand.
   Photos: the owner's Texas set, cut into depth plates for IEDCO Parallax (photo areas only; text never moves). */
@font-face{font-family:"Raleway";font-style:normal;font-display:swap;font-weight:100 900;src:url("/fonts/raleway-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url("/fonts/jetbrains-mono-medium-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:600;src:url("/fonts/jetbrains-mono-semibold-latin.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:400;src:url("/business-foundry/fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:600;src:url("/business-foundry/fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:700;src:url("/business-foundry/fonts/montserrat-700.woff2") format("woff2")}
:root{
  color-scheme:dark;
  /* Business Foundry :root, surface roles swapped (handoff section 1) */
  --ink:#0B0B0C; --hover:#2A2A2A;
  --black:var(--iedco-color-neutral-25);      /* #040404 */
  --charcoal:var(--iedco-color-neutral-80);   /* #141414 */
  --graphite:var(--iedco-color-neutral-150);  /* #262626 */
  --steel:var(--iedco-color-neutral-480);     /* #5E5E59 */
  --control:var(--iedco-color-neutral-560);   /* #7A7A75 */
  --silver:var(--iedco-color-neutral-720);    /* #B8B8B3 */
  --silver-light:var(--iedco-color-neutral-840);/* #D6D6D2 */
  --soft:var(--iedco-color-neutral-880);      /* #E4E4E0 */
  --mist:var(--iedco-color-neutral-960);      /* #F5F5F3 */
  --red:var(--iedco-color-red-500);           /* #EF4444: lines, marks and labels on dark; marks only on light */
  --cyan:var(--iedco-color-edition-angular-accent);
  --tile-from:#1c1c1f; --tile-to:#000; --tile-border:#5c5c63; --tile-radius:15.625%;
  --body-light:#2B2B2B; --muted-light:var(--steel); --line-light:var(--silver-light);
  --on-dark:#fff; --on-dark-body:var(--silver-light); --on-dark-muted:#C9C9C4; --line-dark:rgba(255,255,255,.14);
  --font:"Raleway","Helvetica Neue",Arial,ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bf-font:"Montserrat","Helvetica Neue",Arial,ui-sans-serif,system-ui,sans-serif;
  --radius:var(--iedco-radius-control);       /* 6px */
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:72px;
}
@media(min-width:720px){:root{--header-h:84px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + 8px);scrollbar-gutter:stable}
body{margin:0;font:500 16px/1.6 var(--font);font-variant-numeric:lining-nums;color:var(--on-dark-body);background:var(--black);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 16px;line-height:1.1;color:var(--on-dark);font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.015em} h3{font-size:21px}
p{margin:0 0 16px}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wrap{max-width:1440px;margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 48px}} @media(min-width:1200px){.wrap{padding:0 70px}}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:#fff;color:var(--ink);padding:8px 16px;z-index:60}.skip:focus{top:8px}
.chip-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.label{display:block;font:600 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.label .chip-dot,.tagline .chip-dot{display:inline-block;vertical-align:1px;margin-right:10px}
.section-title p.label{color:var(--red);font-size:12px}
.rule{display:block;width:56px;height:2px;background:var(--red);margin:0 auto 24px}
.section{padding:96px 0;position:relative}
@media(max-width:719px){.section{padding:72px 0}}
.section-title{text-align:center;max-width:780px;margin:0 auto 48px}
.section-title p{margin:0;color:var(--on-dark-muted);font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.draft-bar{margin:0;background:var(--soft);color:var(--ink);font-size:13px;line-height:1.4;padding:8px 0}
.draft-bar .wrap{display:block}

/* Light bands (the inverse of Business Foundry's dark ones) */
.band-grey,.band-white{color:var(--body-light)}
.band-grey{background:var(--mist)} .band-white{background:#fff}
:is(.band-grey,.band-white) :is(h2,h3){color:var(--ink)}
:is(.band-grey,.band-white) .label,:is(.band-grey,.band-white) .section-title p.label{color:var(--muted-light)}
:is(.band-grey,.band-white) .section-title p{color:var(--muted-light)}
:is(.band-grey,.band-white) :focus-visible{outline-color:var(--ink)}
.band-charcoal{background:var(--charcoal)}
.band-dark{background:var(--iedco-gradient-background)}

/* Buttons: white fill on dark, ink on light */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:2px solid transparent;border-radius:var(--radius);font:700 15px/1.2 var(--font);letter-spacing:.02em;text-decoration:none;cursor:pointer;text-align:center}
.btn-light{background:#fff;border-color:#fff;color:var(--ink)}.btn-light:hover{background:transparent;color:#fff}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}.btn-outline-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-ink-outline{background:transparent;border-color:var(--ink);color:var(--ink)}.btn-ink-outline:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.55;cursor:progress}

/* Header: dark, sticky (the inverse of Business Foundry's white header); hairline + the settled shadow so the edge shows over dark and light bands */
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--charcoal) 0%,var(--black) 100%);color:#fff;border-bottom:1px solid var(--line-dark);box-shadow:0 1.5px 4px rgba(0,0,0,.11),0 7px 21px rgba(0,0,0,.15)}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-width:0;border-radius:6px}
/* Logo tile: the IEDCO tile with the owner's platinum treatment (allowed on his own header, handoff section 2) */
.brand-tile{position:relative;display:block;flex:none;width:42px;height:42px;border-radius:var(--tile-radius);border:1.25px solid transparent;
  background:linear-gradient(135deg,var(--tile-from) 0%,var(--tile-to) 100%) padding-box,
    conic-gradient(from 200deg,#fafafa,#8e8e93 9%,#e9e9eb 17%,#55555b 27%,#f4f4f5 36%,#9a9aa0 45%,#ffffff 52%,#6c6c72 62%,#dcdcdf 71%,#4f4f55 81%,#efeff1 90%,#fafafa) border-box;
  box-shadow:inset 0 0 0 .75px rgba(0,0,0,.85),0 0 0 .5px #3a3a40,0 1px 3px rgba(0,0,0,.25);overflow:hidden}
.brand-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.06) 38%,transparent 55%);pointer-events:none}
.brand-tile img{position:absolute;left:7%;top:7%;width:86%;height:86%}
@media(min-width:720px){.brand-tile{width:48px;height:48px}}
.wordmark{font:800 21px/1 var(--font);letter-spacing:-.01em;white-space:nowrap}
@media(min-width:720px){.wordmark{font-size:24px;position:relative;top:.75px}} /* tile centered on the wordmark's cap height (measured) */
.wordmark .dot{color:var(--red)}
.nav{display:none;gap:clamp(16px,2vw,30px);align-items:center}
.nav a{color:var(--on-dark-body);text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:#fff;text-decoration:underline}
.nav .btn{color:var(--ink);padding-inline:20px;min-height:44px}.nav .btn:hover{color:#fff;text-decoration:none}
.menu-toggle{width:48px;height:48px;border:0;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:6px}
.menu-lines{display:block;position:relative;width:22px;height:2px;background:currentColor;transition:background-color .15s var(--ease)}
.menu-lines::before,.menu-lines::after{content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;top:-7px;transition:transform .2s var(--ease),top .2s var(--ease)}
.menu-lines::after{top:7px}
.menu-toggle[aria-expanded="true"] .menu-lines{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-lines::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines::after{top:0;transform:rotate(-45deg)}
@media(min-width:1100px){.nav{display:flex}.menu-toggle{display:none}}
.drawer{display:none;position:absolute;left:0;right:0;top:100%;background:var(--black);border-bottom:1px solid var(--line-dark);padding:8px 16px 24px}
.drawer.open{display:block}
.drawer a{display:flex;align-items:center;min-height:56px;font-size:20px;font-weight:700;color:#fff;text-decoration:none;border-bottom:1px solid var(--line-dark)}
.drawer .btn{margin-top:16px;width:100%;color:var(--ink);border-bottom:2px solid #fff;font-size:16px}

/* Photo captions: small mono chips that never move */
.photo-cap{position:absolute;z-index:3;right:12px;bottom:12px;margin:0;display:inline-flex;align-items:center;gap:8px;padding:6px 9px;border-radius:4px;background:rgba(4,4,4,.62);
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#E4E4E0;pointer-events:none}
.photo-cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}

/* Hero: Lady Bird Lake in three depth plates under a dark layer; copy bottom-left so the towers stay clear */
.hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(560px,calc(var(--hero-vh,100svh) - var(--header-h)),980px);overflow:hidden;isolation:isolate;background:#0a0a0a;color:#fff}
.hero-photo,.hero-photo .plate{position:absolute;inset:0}
.hero-photo{z-index:-2}
.m-hero-wait .hero-photo .plate{opacity:0}
/* Hero layers only move down (0 at rest), so they bleed above the hero by the full travel (--hero-bleed, set by home.js) */
.hero .parallax-layer{object-fit:cover;object-position:50% 34%;top:calc(-1 * var(--hero-bleed,260px));bottom:0;height:calc(100% + var(--hero-bleed,260px));transform-origin:50% 40%}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,4,4,.95) 0%,rgba(4,4,4,.80) 26%,rgba(4,4,4,.44) 56%,rgba(4,4,4,.36) 78%,rgba(4,4,4,.54) 100%),
             linear-gradient(90deg,rgba(4,4,4,.66) 0%,rgba(4,4,4,.26) 46%,rgba(4,4,4,.08) 70%)}
.hero-copy{width:100%;padding-top:140px;padding-bottom:64px}
@media(min-width:720px){.hero-copy{padding-bottom:88px}}
.hero .label{color:#E4E4E0;font-weight:500;display:flex;align-items:flex-start;gap:10px;padding-left:calc(clamp(60px,10.5vw,148px) * .068)}
.hero .label .chip-dot{margin:5px 0 0}
.hero h1{font-size:clamp(60px,10.5vw,148px);line-height:.9;letter-spacing:-.03em;margin:0 0 22px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-line{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:#EDEDEA;max-width:36ch;margin-bottom:28px;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero .photo-cap{bottom:16px;right:16px}
@media(max-width:719px){.hero .parallax-layer{object-position:44% 40%}.hero .photo-cap{top:16px;bottom:auto}}

/* Featured: Business Foundry in its own brand (Montserrat, white), photo plates + workspace card */
.featured{display:grid;grid-template-columns:1fr;background:#fff;color:var(--body-light)}
@media(min-width:1000px){.featured{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.featured .bf-parts{grid-column:1/-1}}
.featured-copy{font-family:var(--bf-font);padding:72px 16px 56px;max-width:660px;width:100%;justify-self:end;align-self:center}
@media(min-width:720px){.featured-copy{padding:96px 48px 88px}}
@media(min-width:1200px){.featured-copy{padding:112px 72px 104px}}
.bf-label{font:700 12px/1.2 var(--bf-font);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-light);margin:0 0 18px}
.bf-lockup{width:auto;height:44px;margin:0 0 30px}
@media(min-width:720px){.bf-lockup{height:52px}}
.featured h2{font:400 clamp(28px,3.3vw,40px)/1.18 var(--bf-font);letter-spacing:-.005em;color:var(--ink);margin-bottom:18px}
.featured-copy > p:not(.bf-label){font-size:17px;line-height:1.7;color:var(--body-light)}
.bf-parts{display:grid;gap:24px 20px;grid-template-columns:1fr;width:100%;max-width:1440px;margin:0 auto;padding:56px 16px 72px;font-family:var(--bf-font)}
@media(min-width:720px){.bf-parts{grid-template-columns:repeat(3,1fr);padding:64px 48px 88px}}
@media(min-width:1200px){.bf-parts{padding:72px 70px 96px}}
.bf-part{border-top:2px solid var(--red);padding-top:16px}
.bf-part h3{font:600 17px/1.3 var(--bf-font);color:var(--ink);margin:0 0 4px;letter-spacing:0}
.bf-part p{font-size:15px;line-height:1.6;color:var(--muted-light);margin:0}
.bf-btn{font:700 13px/1.3 var(--bf-font);text-transform:uppercase;letter-spacing:.1em;border-radius:0;min-height:50px;padding:14px 24px;background:var(--ink);border-color:var(--ink);color:#fff}
.bf-btn:hover{background:var(--hover);border-color:var(--hover)}
.featured :focus-visible{outline-color:var(--ink)}
.featured-media{position:relative;min-height:440px;overflow:hidden;background:var(--silver-light)}
@media(min-width:1000px){.featured-media{min-height:620px}}
.featured-media .parallax-layer{object-position:30% 50%}
.shot-card{position:absolute;z-index:2;margin:0;border-radius:8px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 28px 70px rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.32);will-change:transform}
.shot-card img{width:100%;height:auto}
.shot-card{inset:0;margin:auto;height:max-content}
.bf-card{width:min(58%,520px)}
@media(max-width:719px){.bf-card{width:74%}}
.featured-media .photo-cap{right:12px;bottom:12px}

/* Filmstrip: two rows of panoramas, drifting sideways in opposite directions */
.strip{background:var(--black);padding:40px 0;display:grid;gap:12px}
@media(min-width:720px){.strip{padding:56px 0;gap:14px}}
.strip-scene{position:relative;height:clamp(118px,15vw,224px)}
.strip-row{display:flex;gap:12px;justify-content:center;height:100%;will-change:transform}
@media(min-width:720px){.strip-row{gap:14px}}
.strip-row img{height:100%;width:auto;max-width:none;flex:none;border-radius:8px}

/* Intro parts + Labs product tiles (grey band) */
.parts{display:grid;gap:24px 20px;grid-template-columns:1fr;max-width:1100px;margin:0 auto}
@media(min-width:800px){.parts{grid-template-columns:repeat(3,1fr)}}
.part{border-top:2px solid var(--red);padding-top:16px}
.part h3{font-size:21px;margin-bottom:6px}.part p{font-size:16px;margin:0;color:var(--muted-light)}
.labs-title{margin-top:104px}
.ptiles{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.ptiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1240px){.ptiles{grid-template-columns:repeat(5,1fr)}}
.ptile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--m-dur) var(--m-ease),box-shadow var(--m-dur) var(--m-ease),border-color var(--m-dur-fast) var(--m-ease)}
.ptile:hover,.ptile:focus-visible{transform:translateY(-6px);box-shadow:0 18px 36px -18px rgba(11,11,12,.45);border-color:var(--silver)}
.ptile .thumb{display:block;aspect-ratio:1/1;background:#000}
.ptile .thumb img{width:100%;height:100%;object-fit:cover}
.ptile .cap{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px;flex:1}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--body-light);border:1px solid var(--silver);border-radius:4px;padding:5px 7px}
.badge.ed-react::before,.badge.ed-angular::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.badge.ed-angular::before{background:var(--cyan)}
.ptitle{font:800 19px/1.2 var(--font);color:var(--ink);margin-top:2px}
.pdesc{font-size:14.5px;line-height:1.55;color:var(--muted-light)}
.go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.go::after{content:"";width:16px;height:2px;background:var(--red);transition:width var(--m-dur) var(--m-ease)}
.ptile:hover .go::after{width:28px}
@media(max-width:699px){
  .ptiles{gap:12px}
  .ptile{display:grid;grid-template-columns:38% 1fr;align-items:stretch}
  .ptile .thumb{aspect-ratio:auto;height:100%;display:flex;align-items:center}
  .ptile .thumb img{height:auto;aspect-ratio:1/1}
  .ptile .cap{padding:12px 14px;gap:6px}
  .ptile .badges{gap:4px}
  .ptile .badge{font-size:9.5px;padding:4px 6px}
  .ptitle{font-size:17px}
  .pdesc{font-size:14px;line-height:1.45}
  .labs-title{margin-top:56px}
  #labs .section-title{margin-bottom:28px}
  #labs .parts{gap:20px}
  .center-link{margin-top:28px}
}
.center-link{text-align:center;margin:40px 0 0}

/* Splits (charcoal): ElectionTrack.info and About */
.split{display:grid;grid-template-columns:1fr;color:var(--on-dark-body)}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr}}
.split-media{position:relative;min-height:400px;overflow:hidden;background:#000}
@media(min-width:960px){.split-media{min-height:680px}}
.split-copy{padding:64px 16px;display:flex;flex-direction:column;justify-content:center;max-width:700px}
@media(min-width:720px){.split-copy{padding:80px 48px}}
@media(min-width:1200px){.split-copy{padding:96px 80px}}
.split-copy h2{margin-bottom:20px}
.split-copy p{font-size:17px;line-height:1.7}
.split .actions{margin-top:16px}
.split-media .parallax-layer{object-position:50% 40%}
.et-card{width:min(66%,600px)}
@media(max-width:719px){.et-card{width:78%}}
.split-media .photo-cap{left:12px;right:auto}

/* Projects (white band, the inverse of the dark tiers) */
.pcards{display:grid;gap:16px;grid-template-columns:1fr;max-width:1240px;margin:0 auto}
@media(min-width:960px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:8px;overflow:hidden}
.pc-img{aspect-ratio:16/9;background:#000;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-body{display:flex;flex-direction:column;padding:22px 22px 26px;flex:1}
.pcard p.tagline,.tagline{display:block;font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light);margin:0 0 12px}
.pcard h3{font-size:24px;margin-bottom:10px}
.pcard p{font-size:15.5px;line-height:1.6;color:var(--muted-light)}
.text-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;min-height:44px;font-weight:700;font-size:15.5px;color:var(--ink);text-decoration:none}
.text-link:hover{text-decoration:underline}
.band-dark .text-link,.papers .text-link{color:#fff}
/* External link icon: box follows the text color, the arrow is brand red (as on the current site) */
.ext{position:relative;display:inline-block;flex:none;width:14px;height:14px}
.ext::before,.ext::after{content:"";position:absolute;inset:0}
.ext::before{background:currentColor;-webkit-mask:url(/icons/fa-arrow-up-right-from-square-box.svg) center/contain no-repeat;mask:url(/icons/fa-arrow-up-right-from-square-box.svg) center/contain no-repeat}
.ext::after{background:var(--red);-webkit-mask:url(/icons/fa-arrow-up-right-from-square-arrow.svg) center/contain no-repeat;mask:url(/icons/fa-arrow-up-right-from-square-arrow.svg) center/contain no-repeat}

/* Interlude: Capitol grounds, three plates */
.interlude{position:relative;margin:0;height:clamp(360px,48vw,720px);overflow:hidden;background:#111;isolation:isolate}
.interlude .parallax-layer{object-position:50% 42%}
.interlude::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(4,4,4,.45) 0%,rgba(4,4,4,0) 30%)}
.seal-stamp{position:absolute;z-index:3;inset:0;margin:auto;width:min(78%,calc(100% - 48px));height:88%;object-fit:contain;pointer-events:none}
.interlude .photo-cap{left:12px;right:auto}
@media(min-width:720px){.interlude .photo-cap{left:48px;bottom:20px}}

/* Papers: dark band over the tower plates */
.papers,.contact{overflow:hidden;isolation:isolate}
.papers-bg,.contact-bg{position:absolute;inset:0;z-index:-2}
.papers-bg .parallax-layer{object-position:50% 40%}
@media(max-width:719px){.papers-bg .parallax-layer{object-position:78% 40%}}
.papers::before,.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.papers::before{background:linear-gradient(180deg,rgba(4,4,4,.93) 0%,rgba(4,4,4,.78) 45%,rgba(4,4,4,.9) 100%)}
.paper-list{display:grid;gap:16px;grid-template-columns:1fr;max-width:1240px;margin:0 auto}
@media(min-width:1000px){.paper-list{grid-template-columns:1fr 1fr}}
.paper{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start;padding:22px;border:1px solid var(--line-dark);border-radius:8px;background:rgba(10,10,10,.78)}
@media(min-width:720px){.paper{grid-template-columns:150px 1fr;gap:28px;padding:28px}}
.paper-cover img{border-radius:3px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.kicker{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);margin:0 0 12px}
.kicker span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--red);margin-right:14px;vertical-align:middle}
.paper h3{font-size:26px;margin-bottom:6px}
.paper-sub{color:#fff;font-weight:600;font-size:16px;margin-bottom:12px}
.paper p:not(.kicker):not(.paper-sub){font-size:15px;line-height:1.65;color:var(--on-dark-muted)}
/* Phones: the cover sits beside the date, title and subtitle; the summary and link run full width below (as on the current site) */
@media(max-width:719px){
  .paper{grid-template-columns:88px 1fr;gap:0 16px}
  .paper-body{display:contents}
  .paper-cover{grid-column:1;grid-row:1/span 3}
  .paper .kicker,.paper h3,.paper .paper-sub{grid-column:2}
  .paper .paper-body > p:not(.kicker):not(.paper-sub),.paper .text-link{grid-column:1/-1}
  .paper .paper-body > p:not(.kicker):not(.paper-sub){margin-top:14px}
}
.papers .photo-cap,.contact .photo-cap{right:16px;bottom:16px}

/* About: the portrait plates + experience */
.portrait{background:#17120e}
.portrait .parallax-layer{object-position:42% 30%}
@media(max-width:959px){.portrait{min-height:0;aspect-ratio:1/1}}
.xp{list-style:none;margin:8px 0 24px;padding:0;border-top:1px solid var(--line-dark)}
.xp li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--line-dark)}
.xp-role{color:#fff;font-weight:700;font-size:16px}
.xp-org{grid-column:1;font-size:15px;color:var(--on-dark-muted)}
.xp-date{grid-column:2;grid-row:1/span 2;align-self:center;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);white-space:nowrap}
.tags{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-body);border:1px solid rgba(255,255,255,.24);border-radius:4px;padding:6px 8px}

/* Contact: dark band over downtown Austin at night */
.contact-bg .parallax-layer{object-position:50% 35%}
.contact::before{background:linear-gradient(180deg,rgba(4,4,4,.82) 0%,rgba(4,4,4,.62) 50%,rgba(4,4,4,.86) 100%)}
.form{display:grid;gap:16px;max-width:680px;margin:0 auto;text-align:left}
.form .row{display:grid;gap:16px}@media(min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.form label{display:block;font-weight:700;font-size:14px;color:#fff;margin-bottom:6px}
.form input,.form textarea{width:100%;font:500 16px var(--font);padding:12px 14px;border:1px solid var(--control);border-radius:var(--radius);background:rgba(4,4,4,.78);color:#fff;min-height:48px}
.form input:hover,.form textarea:hover{border-color:var(--silver)}
.form textarea{min-height:150px;resize:vertical}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:14px 16px;border-radius:var(--radius);font-weight:700;background:rgba(4,4,4,.8);border:1px solid var(--line-dark)}
.form-msg.ok{color:var(--iedco-color-status-green-400)}.form-msg.bad{color:var(--iedco-color-status-rose-400)}
.form-msg[hidden]{display:none}

/* Footer: black (owner, Oct 28) */
.footer{background:var(--black);color:var(--on-dark-muted);padding:64px 0 32px;border-top:1px solid var(--line-dark)}
.footer :focus-visible{outline-color:#fff}
.footer .brand{color:#fff}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:800px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer .note{font-size:14px;color:var(--on-dark-muted);margin-top:16px}
.footer h4{font:600 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 12px}
.footer h4::after{content:"";display:block;width:24px;height:2px;background:var(--red);margin-top:12px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li a,.foot-link{display:inline-flex;align-items:center;min-height:40px;font:600 15px var(--font);color:#fff;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.footer li a:hover,.foot-link:hover{text-decoration:underline}
.legal-row{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:13px;color:var(--on-dark-muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.stamp a{color:#fff}

/* Terms and Privacy dialogs */
.modal{border:0;padding:0;background:transparent;color:var(--on-dark-body);width:min(760px,calc(100vw - 32px));max-height:calc(100svh - 48px)}
.modal::backdrop{background:rgba(0,0,0,.72)}
.modal-card{background:var(--charcoal);border:1px solid var(--line-dark);border-radius:10px;padding:24px 24px 28px;max-height:calc(100svh - 48px);overflow:auto}
@media(min-width:720px){.modal-card{padding:32px 36px 36px}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.modal-head h2{font-size:26px;margin:0}
.modal-x{width:44px;height:44px;flex:none;border:1px solid var(--line-dark);border-radius:var(--radius);background:transparent;color:#fff;cursor:pointer;position:relative}
.modal-x::before{content:"";position:absolute;inset:12px;background:currentColor;-webkit-mask:url(/icons/fa-xmark.svg) center/contain no-repeat;mask:url(/icons/fa-xmark.svg) center/contain no-repeat}
.legal{font-size:15px;line-height:1.65}
.legal h3{font-size:17px;margin:22px 0 6px}
.legal-date{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted)}
.legal strong{color:#fff}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ptile,.menu-lines,.menu-lines::before,.menu-lines::after,.go::after{transition:none}.ptile:hover{transform:none}}

/* ── IEDCO Motion (kit v1.1.0), Default preset at speed 2. Values come from js/motion.js (MOTION) via applyMotionVars(). ── */
:root{--m-ease:cubic-bezier(0.22,1,0.36,1);--m-ease-in:cubic-bezier(0.5,0,0.75,0);--m-dur-fast:150ms;--m-dur:240ms;--m-dur-slow:400ms;--m-rise:12px;--m-heading-slide:16px;--m-press:0.97}
@keyframes m-rise{from{opacity:0;transform:translateY(var(--m-rise))}to{opacity:1;transform:none}}
@keyframes m-slide{from{opacity:0;transform:translateX(calc(-1 * var(--m-heading-slide)))}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
.m-pending{opacity:0}
.m-rise{animation:m-rise var(--m-dur-slow) var(--m-ease) both;will-change:opacity,transform}
.m-heading{animation:m-rise var(--m-dur-slow) var(--m-ease) both;will-change:opacity,transform} /* home: headings rise, never slide sideways (owner, Oct 29) */
@media(prefers-reduced-motion:no-preference){
  button,[role="button"],a,input,select,textarea,summary{transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-duration:var(--m-dur-fast);transition-timing-function:var(--m-ease)}
  button:not(:disabled):active,[role="button"]:active,.btn:active{transform:scale(var(--m-press))}
}
@media(prefers-reduced-motion:reduce){.m-rise,.m-heading{animation:m-fade 150ms ease-out both}}
:root[data-motion="off"] :is(.m-rise,.m-heading){animation:none}
:root[data-motion="off"] .m-pending{opacity:1}

/* Screenshot cards wait for the photo: hidden until their scene is in view, then rise in after a pause (home.js) */
/* The rise uses the separate `translate` property, so it adds to the parallax `transform` on the same card instead of replacing it */
@keyframes card-rise{from{opacity:0;translate:0 var(--m-rise)}to{opacity:1;translate:none}}
.js-cards .shot-card{opacity:0}
.js-cards .shot-card.card-in{opacity:1;animation:card-rise var(--m-dur-slow) var(--m-ease) both}
@media(prefers-reduced-motion:reduce){.js-cards .shot-card.card-in{animation:m-fade 150ms ease-out both}}

/* Section photos come in with their section's head (home.js adds .photo-in). A transition, so it never touches the parallax animation. */
.js-photos .photo-scene .parallax-layer,.js-photos .photo-scene .photo-cap{opacity:0;transition:opacity var(--m-dur-slow) var(--m-ease)}
.js-photos .photo-scene.photo-in .parallax-layer,.js-photos .photo-scene.photo-in .photo-cap{opacity:1}
@media(prefers-reduced-motion:reduce){.js-photos .photo-scene .parallax-layer,.js-photos .photo-scene .photo-cap{opacity:1;transition:none}}

/* ── IEDCO Parallax (Labs paper "Depth as a system", Oct 22, 2026), Default preset ──
   Only photo areas move. Farthest layer at most 32 px (16 px on phones); at most three layers per scene; each plate bleeds
   40 px past its scene so no edge shows; horizontal rows drift sideways only. Off with reduced motion. */
[data-parallax-scene]{overflow:hidden}
.parallax-layer{position:absolute;left:0;right:0;top:calc(-1 * var(--px-bleed,40px));bottom:calc(-1 * var(--px-bleed,40px));width:100%;height:calc(100% + 2 * var(--px-bleed,40px));max-width:none;object-fit:cover;will-change:transform}
@media(prefers-reduced-motion:reduce){.parallax-layer,[data-depth]{transform:none!important}}

/* Scroll-driven Parallax (compositor): same math as the JS loop. The hero plays while it scrolls out. Other scenes play from entering
   to leaving (the cover range), measured from the top of the screen with a fixed screen height (--px-vh, set by home.js), because the
   bottom of the screen moves when a phone's address bar slides in or out, and that made the plates jump (owner, Oct 29).
   The timeline's top edge is the scroll padding under the header (header height + 8 px), so the range starts that much less early. */
@keyframes px-y{from{transform:translate3d(0,calc(-1 * var(--d,0px)),0)}to{transform:translate3d(0,var(--d,0px),0)}}
@keyframes px-x{from{transform:translate3d(calc(-1 * var(--d,0px)),0,0)}to{transform:translate3d(var(--d,0px),0,0)}}
@keyframes px-hero{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,var(--d,0px),0) scale(var(--s,1))}}
@media(prefers-reduced-motion:no-preference){
  .sdt [data-parallax-scene]{view-timeline-name:--pscene}
  .sdt [data-parallax-scene] [data-depth]{animation:px-y linear both;animation-timeline:--pscene;animation-range:exit-crossing calc(var(--header-h) + 8px - var(--px-vh,100lvh)) exit-crossing 100%}
  .sdt [data-parallax-scene] [data-depth][data-axis="x"]{animation-name:px-x}
  .sdt .hero [data-depth]{animation-name:px-hero;animation-range:exit-crossing 0% exit-crossing 100%}
  .sdt.js-cards [data-parallax-scene] .shot-card.card-in{animation:px-y linear both,card-rise var(--m-dur-slow) var(--m-ease) both;animation-timeline:--pscene,auto;animation-range:exit-crossing calc(var(--header-h) + 8px - var(--px-vh,100lvh)) exit-crossing 100%,normal}
}