/* ===================================================================
   TRINITY — the Kalye vocabulary.
   Every value here is read off moodboard-kalye.html and applied-kalye.html,
   not approximated. Direction-specific layout stays in each page file.
   =================================================================== */

:root{
  --paper:#F7F2E9; --sand:#EBE1CE; --mist:#DCD6E4;
  --ink:#332E6E; --deep:#1E1B3A;
  --primary:#E28C33; --lift:#EDB040; --flash:#E0652B;
  --body:#2B2757; --muted:#635E82;
  --slab:"Alfa Slab One",serif;
  --sans:"Familjen Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --ital:"Instrument Serif",serif;
  --pad:clamp(20px,4.5vw,66px);
  --max:1560px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sand);color:var(--body);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto}

/* --------------------------------------------------------------
   TEXTURES — grain, banig weave, the misregistered wordmark
   -------------------------------------------------------------- */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:60;opacity:.16;
  background-image:radial-gradient(rgba(30,27,58,.9) .6px,transparent .6px);background-size:3px 3px}

/* the banig. --w1 is the thread, --w2 the ground. On the board it runs
   mist-on-sand in the margins and ink-on-deep inside the plates. */
.wv{--wv:22px;--w1:var(--ink);--w2:var(--sand);
  background-color:var(--w1);
  background-image:
    linear-gradient(to bottom, var(--w1) 0 40%, transparent 40% 50%, var(--w1) 50% 90%, transparent 90%),
    linear-gradient(to right, var(--w2) 0 40%, transparent 40% 50%, var(--w2) 50% 90%, transparent 90%);
  background-size:var(--wv) var(--wv)}
.wv.quiet{--w1:var(--mist);--w2:var(--sand)}
.wv.hot{--w1:var(--primary);--w2:var(--deep)}
.wv.deep{--w1:var(--ink);--w2:var(--deep)}

/* orange plate, indigo plate, ~8px off. The one detail that stops this
   palette reading as a football club. */
.wm{position:relative;display:inline-block}
.wm span{font-family:var(--slab);letter-spacing:-.045em;line-height:.84;display:block}
.wm .hot{color:var(--flash);opacity:.92}
.wm .ink{color:var(--body);position:absolute;left:-.022em;top:-.036em}
.wm.onDeep .ink{color:var(--paper)}

/* --------------------------------------------------------------
   THE MARK — apex DOWN, always. Woven at 48px and up, solid below.
   Never pointed upward, never woven at favicon size.
   -------------------------------------------------------------- */
.mk{display:block}
.mk polygon{fill:var(--ink)}
.mk.lift polygon{fill:var(--lift)}
.mk.paper polygon{fill:var(--paper)}
.mk.flash polygon{fill:var(--flash)}
.mk.woven polygon{fill:url(#banigmark)}

/* --------------------------------------------------------------
   THE BOARD — how photographs behave everywhere on this brand.
   Portrait-ish, thick paper border, soft shadow, 2–5° of tilt,
   overlapping, on an indigo plate.
   -------------------------------------------------------------- */
.plate{position:absolute;background:var(--deep);z-index:1}

.pin{position:absolute;overflow:hidden;background:var(--mist);
  border:clamp(4px,.62cqi,11px) solid var(--paper);
  box-shadow:0 1.6cqi 3.6cqi rgba(30,27,58,.34)}
.pin img{width:100%;height:100%;object-fit:cover}

/* Duotone is an accent, never the default. One indigo, one orange, per board.
   NOTE: no `position` here on purpose — `.du` is routinely combined with
   `.pin` (absolute) and `.poster .g` (absolute), and setting position would
   win on source order and drop those elements back into flow. */
.du{overflow:hidden;background:var(--ink)}
.du img{filter:grayscale(1) contrast(1.12) brightness(1.04);mix-blend-mode:screen;
  width:100%;height:100%;object-fit:cover}
.du.ind{background:#3A3480}
.du.hot{background:#D2591F}
.du.raw{background:none}
.du.raw img{filter:none;mix-blend-mode:normal}

/* the mono chip pinned at a photo's edge — light ground, indigo text */
.chip{position:absolute;z-index:20;background:var(--sand);color:var(--body);
  font-family:var(--mono);font-size:clamp(.44rem,.92cqi,.7rem);letter-spacing:.16em;
  text-transform:uppercase;padding:.5cqi 1.1cqi;white-space:nowrap}
.chip.deep{background:var(--deep);color:var(--paper)}
.chip.lift{background:var(--lift);color:#241F52}

/* the gold slab chip */
.salina{position:absolute;z-index:22;background:var(--lift);color:#241F52;
  font-family:var(--slab);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(.9rem,3.2cqi,2.4rem);padding:.4cqi 1.5cqi;transform:rotate(-5deg);
  box-shadow:0 1cqi 2.4cqi rgba(30,27,58,.3)}

/* the burst. One per board, never more. */
/* align-content matters: with auto rows the text would otherwise stack from the
   top of the box and the label would fall outside the star's points. */
.burst{position:absolute;z-index:24;display:grid;place-items:center;align-content:center;
  text-align:center;container-type:inline-size}
.burst svg{position:absolute;inset:0;width:100%;height:100%}
.burst .n{position:relative;font-family:var(--slab);font-weight:400;font-size:20cqi;
  letter-spacing:-.05em;color:#241F52;line-height:.88}
.burst .l{position:relative;font-family:var(--mono);font-size:4.6cqi;letter-spacing:.18em;
  text-transform:uppercase;color:#241F52;margin-top:.5cqi}

/* --------------------------------------------------------------
   TYPE RHYTHM — lifted from the applied kit's section headers:
   mono kicker, two-line slab headline, one short bold sans lede.
   -------------------------------------------------------------- */
.k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px}
.k.onDeep{color:var(--lift)}
h2.h{font-family:var(--slab);font-weight:400;letter-spacing:-.045em;line-height:.9;margin:0;
  font-size:clamp(1.8rem,4.4vw,3.6rem);color:var(--body)}
h2.h em{font-style:normal;color:var(--flash)}
h2.h.onDeep{color:var(--paper)}
h2.h.onDeep em{color:var(--lift)}
p.lede{font-size:clamp(.98rem,1.2vw,1.12rem);font-weight:600;color:var(--body);
  max-width:52ch;margin:20px 0 0}
p.lede span{font-weight:400;color:var(--muted)}

/* --------------------------------------------------------------
   BUTTONS — Alfa Slab only, per the kit. Never body copy on an accent.
   -------------------------------------------------------------- */
.btn{font-family:var(--slab);font-weight:400;letter-spacing:-.02em;font-size:.95rem;
  padding:11px 24px;text-decoration:none;display:inline-block;border:0;cursor:pointer;
  transition:transform .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn.lift{background:var(--lift);color:#241F52}
.btn.deep{background:var(--deep);color:var(--paper)}
.btn.flash{background:var(--flash);color:var(--paper)}
.btn.paper{background:var(--paper);color:var(--body)}
.btn.ghost{background:transparent;color:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.btn.big{font-size:clamp(1rem,1.5vw,1.4rem);padding:15px 34px}
.pill{border-radius:999px}

/* --------------------------------------------------------------
   THE POSTER — the recruitment template, reused as the roles grid.
   Locked order: mark top-right, eyebrow, role, location, CTA, fine print.
   -------------------------------------------------------------- */
.poster{position:relative;aspect-ratio:3/4;overflow:hidden;container-type:inline-size;
  background:var(--deep);text-decoration:none;display:block;transition:transform .2s ease}
.poster:hover{transform:translateY(-6px)}
.poster .g{position:absolute;inset:0;z-index:0}
.poster .g img{width:100%;height:100%;object-fit:cover}
.poster .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(30,27,58,.96) 34%,rgba(30,27,58,.15))}
.poster .mk{position:absolute;right:5cqi;top:5cqi;width:11cqi;z-index:12}
.poster .in{position:absolute;left:5cqi;right:5cqi;bottom:5cqi;z-index:10}
.poster .eyeb{font-family:var(--mono);font-size:2.5cqi;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lift)}
.poster .rname{font-family:var(--slab);font-weight:400;letter-spacing:-.045em;line-height:.88;
  font-size:9.6cqi;color:var(--paper);margin-top:2cqi}
.poster .meta{font-family:var(--mono);font-size:2.2cqi;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(220,214,228,.8);margin-top:2.6cqi}
.poster .cta{display:inline-block;background:var(--lift);color:#241F52;font-family:var(--slab);
  font-size:4.4cqi;letter-spacing:-.03em;padding:1cqi 3cqi;margin-top:3.4cqi}
.poster .fine{font-family:var(--mono);font-size:1.9cqi;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(220,214,228,.6);margin-top:3cqi}
.poster .bst{position:absolute;left:-6cqi;top:8cqi;width:34cqi;aspect-ratio:1;z-index:11}

/* --------------------------------------------------------------
   THE PROJECT NAV — sketch chrome, not part of the site
   -------------------------------------------------------------- */
nav.tn{position:sticky;top:0;z-index:400;background:var(--deep);color:var(--paper);display:flex;
  gap:22px;align-items:center;padding:11px var(--pad);font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;flex-wrap:wrap}
nav.tn b{font-family:var(--slab);font-size:.92rem;letter-spacing:-.02em;text-transform:none;font-weight:400}
nav.tn a{color:rgba(247,242,233,.6);text-decoration:none;white-space:nowrap}
nav.tn a:hover,nav.tn a.on{color:var(--lift)}
nav.tn .r{margin-left:auto;color:rgba(247,242,233,.38)}
@media(max-width:900px){
  nav.tn{flex-wrap:nowrap;overflow-x:auto;gap:16px;scrollbar-width:none}
  nav.tn::-webkit-scrollbar{display:none}
  nav.tn .r{display:none}
}

.tag{background:var(--deep);color:var(--paper);padding:16px var(--pad);
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;border-top:2px solid var(--lift)}
.tag b{font-family:var(--slab);font-weight:400;font-size:1.25rem;letter-spacing:-.03em}
.tag span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lift)}
.tag i{font-family:var(--ital);font-style:italic;font-size:1.02rem;color:var(--mist);
  margin-left:auto;max-width:56ch;line-height:1.4;text-align:right}
@media(max-width:820px){.tag i{margin-left:0;text-align:left}}

/* --------------------------------------------------------------
   SITE HEADER + FOOTER — shared shell
   -------------------------------------------------------------- */
.sitehead{background:var(--paper);border-bottom:2px solid var(--body);
  display:flex;align-items:center;gap:28px;padding:14px var(--pad);position:relative;z-index:200}
.sitehead .lg{display:flex;align-items:center;gap:10px;font-family:var(--slab);font-size:1.45rem;
  letter-spacing:-.04em;color:var(--body);text-decoration:none}
.sitehead .lg .mk{width:22px}
.sitehead nav{display:flex;gap:24px;font-size:.86rem;font-weight:600}
.sitehead nav a{text-decoration:none;color:var(--body)}
.sitehead nav a:hover{color:var(--flash)}
.sitehead .act{margin-left:auto;display:flex;gap:10px;align-items:center}
@media(max-width:940px){.sitehead nav{display:none}}

section.blk{padding:clamp(48px,6.2vw,104px) var(--pad)}

.foot{background:var(--deep);color:var(--paper);padding:clamp(40px,5vw,84px) var(--pad) 28px;
  position:relative;overflow:hidden}
.foot .we{position:absolute;right:-4%;top:-20%;width:26%;height:90%;opacity:.2;z-index:0;
  --wv:30px;transform:rotate(-3deg)}
.foot .top{position:relative;z-index:5;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(20px,3vw,48px);align-items:start}
.foot h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lift);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.foot a{color:rgba(247,242,233,.74);text-decoration:none}
.foot a:hover{color:var(--lift)}
.foot .mark{display:flex;align-items:center;gap:12px;font-family:var(--slab);
  font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.05em;line-height:.9}
.foot .mark .mk{width:clamp(24px,3vw,42px)}
.foot .tagline{font-family:var(--ital);font-style:italic;color:var(--mist);font-size:1.12rem;
  margin:16px 0 0;max-width:34ch}
.foot .bar{position:relative;z-index:5;border-top:1px solid rgba(247,242,233,.16);
  margin-top:clamp(28px,4vw,56px);padding-top:18px;display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,242,233,.5)}
.foot .bar .r{margin-left:auto}
@media(max-width:860px){.foot .top{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}