/* ===========================================================================
   Municorn design system · 3 · components
   ---------------------------------------------------------------------------
   One block per component, in the order a page uses them. Start states and
   choreography live in motion.css; this file describes each part at rest, so
   the page is complete and correct with motion.css absent.
   =========================================================================== */

/* === nav ================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.1rem var(--gut);
  transition:background .3s,border-color .3s,padding .3s;border-bottom:1px solid transparent}
.nav.stuck{background:var(--glass-nav);backdrop-filter:var(--glass-nav-blur);
  border-bottom-color:rgb(var(--lime-c)/.1);padding-block:.7rem}
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--lime)}
.mark__logo{height:1.6rem;width:auto;display:block;flex-shrink:0}
.mark span{font-family:var(--serif);font-size:1.3rem;letter-spacing:.01em}
.nav__l{display:flex;gap:1.6rem;align-items:center}
.nav__l a{font-family:var(--sans);font-weight:500;font-size:.67rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--lime-soft)}
.nav__l a:hover{color:var(--lime)}
.nav__l a.em{color:var(--brass-lt);text-transform:none;letter-spacing:.02em;font-size:.82rem;font-weight:400}
@media(max-width:860px){.nav__l a:not(.em){display:none}}

/* A reference page has no hero for the bar to sit over, so it is solid from the
   first frame and sticky rather than fixed — content flows under it instead of
   needing a matching top padding. */
.nav--solid{position:sticky;background:var(--glass-nav);backdrop-filter:var(--glass-nav-blur);
  border-bottom-color:rgb(var(--lime-c)/.1)}

/* Under 860px the section links are hidden, so the panel is the only way to
   reach them. Under 560px the bar cannot hold the address and the button too,
   so the address moves into the panel. */
.nav__btn{display:none;align-items:center;gap:.5rem;background:none;
  border:1px solid rgb(var(--lime-c)/.3);color:var(--lime-soft);padding:.5rem .8rem;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
.nav__btn__bars{width:13px;height:8px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.nav__panel{position:absolute;top:100%;right:var(--gut);min-width:12rem;
  background:rgb(var(--ink-c)/.97);backdrop-filter:var(--glass-nav-blur);
  border:1px solid var(--hairline-lt);padding:.4rem 0}
.nav__panel[hidden]{display:none}
.nav__panel a{display:block;padding:.7rem 1.1rem;text-decoration:none;color:var(--lime-soft);
  font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.nav__panel a:hover,.nav__panel a:focus{color:var(--lime);background:var(--wash)}
.nav__panel a.em{color:var(--brass-lt);text-transform:none;letter-spacing:.02em;font-size:.8rem;
  border-top:1px solid rgb(var(--lime-c)/.14);margin-top:.35rem;padding-top:.8rem}
@media(max-width:860px){.nav__btn{display:inline-flex}}
@media(min-width:861px){.nav__panel{display:none}}
@media(min-width:561px){.nav__panel a.em{display:none}}
@media(max-width:560px){.nav__l a.em{display:none}}

/* === hero ================================================================= */
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--gut) clamp(2.4rem,5vw,4.2rem);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg::before{content:'';position:absolute;inset:0;background-color:var(--mortar);
  background-image:var(--brickimg);background-size:var(--bricksize)}
/* the scrim: type sits on it, not on bare brick */
.hero__bg::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,var(--ink) 26%,rgb(var(--ink-c)/.86) 56%,
    rgb(var(--ink-c)/.34) 82%,rgb(var(--ink-c)/.5) 100%)}
.hero__in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%}
.hero__title{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;
  margin-bottom:clamp(1.6rem,3.5vw,2.8rem)}
.hero__title__row{display:flex;align-items:center;gap:clamp(1.2rem,2.8vw,2rem);flex-wrap:wrap}
.hero__logo{width:clamp(4.5rem,8vw,7rem);height:auto;display:block;flex-shrink:0;
  transform:translateY(-0.08em)}
.hero h1{font-size:clamp(3rem,12vw,9.5rem);line-height:1;color:var(--lime);margin:0}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>i{display:inline-block;font-style:normal}
/* italic serif in brass: one device, one job — the aside under the hero
   heading. Once per artifact. */
.hero h1 .l.it>i{font-style:italic;color:var(--brass-lt);font-size:.34em;
  letter-spacing:-.01em;line-height:1.16;max-width:20ch}
.hero__low{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.hero__desc{max-width:46ch;color:var(--lime-3);line-height:1.72;
  text-shadow:0 0 20px rgb(var(--ink-c)/.9),0 0 44px rgb(var(--ink-c)/.8)}
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.hero__where{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;color:var(--lime-faint);
  text-shadow:0 0 14px rgb(var(--ink-c)/.9)}
@media(max-width:700px){
  .hero__logo{width:3.5rem}
  .hero__title{gap:.85rem}
}

/* === courses: the hero wall =============================================== */
/* One element per brick course, each carrying the same tile as the rest of the
   site at the right vertical offset, so the bricks are the site's bricks and
   only their position is animated. Built by js/wall.js. */
.courses{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.crs{position:absolute;left:-16px;right:-16px;background-image:var(--brickimg);
  background-size:var(--bricksize);background-repeat:repeat}
.crs::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgb(var(--brass-lt-c)/0),rgb(var(--brass-lt-c)/.5),
    rgb(var(--brass-lt-c)/0));
  opacity:0}

/* === ticker =============================================================== */
/* Concrete nouns only: protocols, standards, systems. No adjectives, ever. */
.tick{background:var(--ink);color:var(--lime-faint);overflow:hidden;padding:.6rem 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.tick__t{display:flex;width:max-content}
.tick__r{display:flex;gap:2rem;padding-right:2rem;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.tick__r b{font-weight:400}
.tick__r b em{font-style:normal;color:var(--brass);margin-right:.5rem}

/* === rake: ambient hex field ============================================== */
/* Class A only, one maximum. Drawn by js/rake.js, paused off-screen. */
.rake{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

/* === rows: the .r workhorse =============================================== */
/* Serif title + one sentence. Capabilities, deliverables, defect classes, FAQ. */
.rows{margin-top:var(--head-gap);border-top:1px solid var(--hairline)}
.r{position:relative;display:grid;gap:.25rem 2rem;padding:1.15rem 0;
  border-bottom:1px solid var(--hairline);align-items:baseline;
  transition:background .3s,padding-left .3s}
.r b{font-family:var(--serif);font-weight:300;font-size:1.42rem;color:var(--lime-hi);
  letter-spacing:-.01em}
.r span{color:var(--lime-mute);font-size:.93rem}
.r:hover{background:var(--wash);padding-left:.7rem}
/* the brass rule that measures itself out along a row as it arrives, then
   fades, leaving the hairline. Invisible at rest. */
.r::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--brass);opacity:var(--ro,0);
  transform:scaleX(var(--rw,1));transform-origin:left center}
@media(min-width:861px){.r{grid-template-columns:17rem 1fr}}

/* === strip: domain cells ================================================== */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hairline);
  margin-top:2.6rem;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.dm{background:var(--ink);padding:1.05rem 1rem 1.2rem}
.dm u{text-decoration:none;font-family:var(--serif);font-weight:300;font-size:2.1rem;
  line-height:1;color:var(--brass);display:block;margin-bottom:.5rem;opacity:.75}
.dm b{display:block;font-family:var(--serif);font-weight:300;font-size:1.08rem;color:var(--lime-hi);
  margin-bottom:.3rem}
.dm p{font-size:.82rem;color:var(--lime-mute);line-height:1.65}
@media(min-width:700px){
  .strip{grid-template-columns:repeat(4,1fr)}
  .dm{padding:1.3rem 1.3rem 1.5rem}
  .dm b{font-size:1.2rem}
  .dm p{font-size:.87rem}
}

/* === glass ================================================================ */
/* A panel over brick. Never raw text on brick. */
.glass{position:relative;display:inline-block;max-width:56rem;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--hairline-lt);
  padding:clamp(1.2rem,2.5vw,1.7rem) clamp(1.2rem,2.5vw,1.9rem);box-shadow:var(--lift-2)}
.glass h2{font-size:clamp(1.7rem,3.8vw,2.7rem);color:var(--lime);max-width:22ch}

/* === wins: window openings ================================================ */
.people::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--shadow-c)/.22),rgb(var(--shadow-c)/.06) 32%,
    rgb(var(--shadow-c)/.22))}
.wins{display:grid;gap:clamp(2rem,4vw,3rem);margin-top:clamp(2.2rem,4vw,3.2rem)}
.win{max-width:24rem;width:100%;margin:0 auto}
@media(min-width:700px){.wins{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.wins{grid-template-columns:repeat(3,1fr)}}

/* assembled in the order a mason works: lintel, casing, sash, glass, sill,
   apron, then the nameplate */
.win__lintel{height:30px;background-image:var(--soldier);background-size:72px 34px;
  margin:0 -14px;border:1px solid rgb(var(--shadow-c)/.35);box-shadow:var(--lift-1)}
.win__casing{background:var(--joinery);padding:11px;border:1px solid var(--joinery-edge);
  box-shadow:var(--lift-3),0 2px 0 rgb(var(--lime-c)/.5) inset}
.win__sash{background:var(--joinery-lt);padding:13px 12px 20px;border:1px solid var(--joinery-edge-2);
  box-shadow:0 1px 0 rgb(var(--lime-c)/.7) inset}
.win__glass{position:relative;aspect-ratio:5/6;overflow:hidden;
  background:linear-gradient(165deg,var(--pane-1),var(--pane-2) 60%,var(--pane-3));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgb(var(--shadow-c)/.35),inset 0 10px 26px rgb(var(--shadow-c)/.45)}
.win__glass img{width:100%;height:100%;object-fit:cover;display:block;object-position:center top;
  clip-path:inset(calc((1 - var(--fill,1)) * 100%) 0 0 0)}
.win__glass::after{content:'';position:absolute;top:-40%;left:-70%;width:46%;height:200%;
  background:linear-gradient(90deg,rgb(var(--lime-c)/0),rgb(var(--lime-c)/.34),rgb(var(--lime-c)/0));
  transform:rotate(15deg);transition:left .95s ease}
.win:hover .win__glass::after{left:140%}
.win__sill{height:12px;background:linear-gradient(180deg,var(--sill-hi),var(--sill-lo));
  border:1px solid var(--sill-edge);margin:0 -18px;box-shadow:var(--lift-1)}
.win__apron{height:7px;background:var(--apron);border:1px solid var(--sill-edge);
  border-top:0;margin:0 -8px}
.win__link{display:block;text-decoration:none;color:inherit}
.win__link:hover .win__cap b{color:var(--brass-lt)}
.win__cap{margin-top:1.05rem;text-align:center;background:var(--glass);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--hairline-lt);padding:1rem 1.1rem 1.15rem;box-shadow:var(--lift-2)}
.win__cap b{display:block;font-family:var(--serif);font-weight:300;font-size:1.34rem;color:var(--lime)}
.win__cap span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lt);margin-top:.4rem}
.win__cap p{font-size:.86rem;color:var(--lime-3);line-height:1.55;margin-top:.65rem}
@media(max-width:700px){
  .win__lintel{margin:0 -10px}
  .win__sill{margin:0 -12px}
  .win__apron{margin:0 -6px}
}

/* === contact ============================================================== */
.ct__grid{display:grid;gap:1.8rem clamp(1.8rem,5vw,4rem)}
.ct h2{font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:16ch}
.ct h2 em{font-style:italic;color:var(--brick)}
.ct p{color:var(--ink-soft);max-width:44ch;margin-top:.9rem}
.ct__mail{display:inline-block;margin-top:1.2rem;font-family:var(--serif);
  font-size:clamp(1.3rem,2.6vw,1.75rem);text-decoration:none;border-bottom:1px solid var(--brass)}
.ct__mail:hover{color:var(--brick);border-color:var(--brick)}
@media(min-width:861px){.ct__grid{grid-template-columns:1fr 1fr;align-items:start}}

/* === facts ================================================================ */
/* mono dt in brass, sans dd. Closes with a bottom hairline or the list reads
   unresolved. */
.facts dl{border-top:1px solid var(--rule);margin-bottom:1.6rem}
.facts dl>div{display:grid;gap:.15rem .9rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.facts dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass)}
.facts dd{font-size:.92rem;color:var(--ink-soft)}
@media(min-width:560px){.facts dl>div{grid-template-columns:10.5rem 1fr;align-items:baseline}}
.slab--dark .facts dl,.slab--dark .facts dl>div{border-color:var(--hairline)}
.slab--dark .facts dd{color:var(--lime-mute)}

/* === section heading on a dark slab ======================================= */
.slab--dark h2{font-size:clamp(1.7rem,4.2vw,3rem);color:var(--lime-hi);max-width:22ch}

/* === fixture banner ======================================================
   Shown on every page when ALLOW_FIXTURE=1. Impossible to miss, and it says the
   one thing that matters about the page. */
.fixture{background:var(--brick);color:var(--lime);padding:.7rem 1rem;text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}

/* === footer =============================================================== */
.foot{background:var(--ink-2);color:var(--lime-3)}
.foot__in{max-width:var(--max);margin:0 auto;padding:2.2rem var(--gut);display:grid;gap:1.2rem}
.foot__name{font-family:var(--serif);font-size:1.55rem;color:var(--lime-hi);margin-bottom:.25rem}
.foot__in p{font-size:.9rem;color:var(--lime-mute)}
.foot__links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-content:start}
.foot__links a,.foot__motion{font-family:var(--sans);font-weight:500;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.foot__links a:hover,.foot__motion:hover{color:var(--lime-hi)}
.foot__motion{background:none;border:0;padding:0;cursor:pointer;color:inherit}
.foot__bar{border-top:1px solid rgb(var(--lime-c)/.1)}
.foot__bar div{max-width:var(--max);margin:0 auto;padding:.85rem var(--gut);display:flex;
  flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.1em;color:var(--lime-faint)}
@media(min-width:700px){.foot__in{grid-template-columns:1.7fr 1fr}}