/* ===========================================================================
   Youmala — the shared foundation.
   Linked by index.html and brand/index.html. It is one file on purpose: the
   brand page documents these values, so a second copy of them would let the
   documentation drift from the thing it documents. Page-specific components
   stay in each page's own <style>.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Youmala — identity tokens.
   From design_handoff_youmala_brand/README.md. Two values plus two greys; no
   accent colour exists. Emphasis is scale, space or a rule — never hue.
   Deliberately single-world: this identity has no dark variant, so there is no
   prefers-color-scheme block. `body` paints its ground explicitly instead.
--------------------------------------------------------------------------- */
:root{
  --ink:#121212;
  --paper:#F5F4F1;
  --graphite:#2E2C29;
  --stone:#A8A49E;
  --mono-grey:#6E6B66;
  --hairline:rgba(18,18,18,.16);
  --rule-strong:#121212;
  --link-rest:rgba(18,18,18,.3);
  --hairline-rev:rgba(245,244,241,.22);
  --link-rev:rgba(245,244,241,.4);

  --sans:'Questrial',Futura,'Century Gothic','Avenir Next',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad-x:clamp(20px, 5.33px + 4.0741vw, 64px);
  --pad-y:clamp(56px, 34.67px + 5.9259vw, 120px);
  --gap-section:clamp(32px, 25.33px + 1.8519vw, 52px);
  --gap-col:clamp(26px, 13.33px + 3.5185vw, 64px);

  /* The built-in ease-out is too weak to read at these durations. */
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* ---------------------------------------------------------------------------
   The fluid scale.
   Every size interpolates from its value at a 360px viewport to its value at
   1440px: clamp(min, intercept + slope*vw, max), where slope = (max-min)/1080.

   This replaces the handover's plain vw middle terms, which were tuned for a
   desktop and collapsed to their minimum below about 570px — so every phone
   from 320px to 570px rendered identically, and the hero sat at 32px against
   76px on a desktop. The endpoints at 1440px are the handover's, unchanged.

   The mobile end of the three display roles was also raised — hero 32 to 40,
   heading 26 to 28, card title 17 to 18. A display serif at 32px has no
   presence on a phone, and the handover's prototype was only ever drawn at
   desktop width.
--------------------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--ink);color:var(--paper)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none}
img{max-width:100%}
:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

/* --- The wordmark -------------------------------------------------------- */
/* Questrial 400, tracked +0.2em, every pair hand-corrected. Values in
   1/1000 em: YO -32, OU -10, UM 0, MA -20, AL -22, LA -48. Never bold,
   never mixed case, never slanted or outlined. */
.wordmark{
  display:flex;
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.2em;
  line-height:1;
}
.wordmark i{font-style:normal}
.wordmark i:nth-child(2){margin-left:-.032em}
.wordmark i:nth-child(3){margin-left:-.010em}
.wordmark i:nth-child(5){margin-left:-.020em}
.wordmark i:nth-child(6){margin-left:-.022em}
.wordmark i:nth-child(7){margin-left:-.048em}

/* --- Type roles ---------------------------------------------------------- */
.h1{
  margin:0;font-weight:300;
  font-size:clamp(40px, 28px + 3.3333vw, 76px);line-height:1.10;letter-spacing:-.012em;
  max-width:20ch;
}
/* One block per sentence. Balancing the headline as a whole straddles the
   full stop and leaves a line ending on "We". */
.h1 span{display:block;text-wrap:balance}
.h2{
  margin:0;font-weight:300;
  font-size:clamp(28px, 20.67px + 2.037vw, 50px);line-height:1.16;letter-spacing:-.008em;
  max-width:20ch;text-wrap:balance;
}
.lead{
  margin:0;font-weight:300;
  font-size:clamp(17px, 16.33px + 0.1852vw, 19px);line-height:1.65;
  max-width:44ch;color:var(--graphite);
}
.body{
  margin:0;font-weight:300;
  font-size:clamp(16px, 15.33px + 0.1852vw, 18px);line-height:1.70;color:var(--graphite);
}
.label{
  font-family:var(--sans);font-size:12px;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;
}
.mono{
  font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;line-height:2;
  color:var(--mono-grey);
}
.mono--tight{font-size:10px;letter-spacing:.16em}
/* Registered identifiers are transcribed, not styled: the check character on
   an Austrian Firmenbuchnummer is lowercase and uppercasing it changes the
   value. Labels in this block are typed in caps instead. */
.mono--asis{text-transform:none}

/* --- Structure ----------------------------------------------------------- */
.section{
  padding:var(--pad-y) var(--pad-x);
  border-top:1px solid var(--hairline);
  display:grid;gap:var(--gap-section);
}
.labelrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:20px;align-items:baseline;
  border-bottom:1px solid var(--rule-strong);padding-bottom:14px;
}
.cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--gap-col);align-items:start;
}
.stack{display:grid;gap:18px}

/* --- Header -------------------------------------------------------------- */
/* Flex rather than a two-column grid: when the nav is too wide to sit beside
   the wordmark it has to wrap to its own line *below* it. A grid centres the
   wordmark against a two-line nav and the mark ends up under the first row. */
.header{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:14px 24px;
  padding:22px var(--pad-x);
  border-bottom:1px solid var(--hairline);
}
/* The floor is 16px, not 15: at 15px the mark measures 92px wide, and the
   standard sets a 96px screen minimum below which tracking has to drop to
   +0.14em and the descriptor comes off. 16px clears it at 320px. */
.header .wordmark{font-size:clamp(16px, 15px + 0.2778vw, 19px)}
.nav{
  display:flex;flex-wrap:wrap;gap:clamp(16px, 10px + 1.6667vw, 34px);
  font-family:var(--sans);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
}
.nav a{position:relative;padding-bottom:3px}
/* An invisible, layout-free hit area. The link box is 17px tall, which is
   half a usable tap target; this takes it to 45px and moves nothing. The
   horizontal bleed stays under half the smallest nav gap so neighbours
   never overlap. */
.nav a::before{content:"";position:absolute;inset:-14px -6px}
/* The underline is drawn as a rule that wipes in from the left rather than
   a colour that fades up. In an identity where hairlines are structure,
   revealing one should look like drawing it. */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 160ms var(--ease-out);
}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  padding:clamp(64px, 29.33px + 9.6296vw, 168px) var(--pad-x) clamp(52px, 29.33px + 6.2963vw, 120px);
  display:grid;gap:clamp(36px, 28px + 2.2222vw, 60px);
}

/* --- Figure -------------------------------------------------------------- */
.figure{margin:0;display:grid;gap:14px}
.figure img{display:block;width:100%;height:auto;border:1px solid var(--hairline)}
.figure figcaption{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mono-grey);
}

/* --- Card group: the 1px-gap grid --------------------------------------- */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
}
.cards > div{
  background:var(--paper);
  padding:clamp(22px, 18.67px + 0.9259vw, 32px);
  display:grid;gap:12px;align-content:start;
}
.card-title{font-weight:300;font-size:clamp(18px, 17px + 0.2778vw, 21px);line-height:1.35}
.card-body{margin:0;font-weight:300;font-size:15px;line-height:1.65;color:var(--graphite)}

/* --- About -------------------------------------------------------------- */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:20px;padding-top:14px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;line-height:2;color:var(--mono-grey);
}
.facts b{font-weight:400;color:var(--ink)}

/* --- Contact ------------------------------------------------------------- */
.email{font-weight:300;font-size:clamp(24px, 20.67px + 0.9259vw, 34px);line-height:1.30}
.email a{
  border-bottom:1px solid var(--link-rest);
  transition:border-bottom-color 160ms var(--ease-out);
}

/* --- Footer -------------------------------------------------------------- */
.footer{
  background:var(--ink);color:var(--paper);
  padding:clamp(52px, 34.67px + 4.6296vw, 104px) var(--pad-x) clamp(28px, 22.67px + 1.4815vw, 44px);
  display:grid;gap:clamp(40px, 28px + 3.3333vw, 76px);
}
.footer :focus-visible{outline-color:var(--paper)}
.footer-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(28px, 18.67px + 2.5926vw, 56px);align-items:start;
}
.footer .wordmark{font-size:clamp(20px, 16px + 1.1111vw, 32px)}
.footer .mono{color:var(--stone)}
.descriptor{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.30em;text-transform:uppercase;color:var(--stone);
}
.footer-address{font-weight:300;font-size:17px;line-height:1.80}
.footer-address a{
  color:var(--paper);
  border-bottom:1px solid var(--link-rev);
  transition:border-bottom-color 160ms var(--ease-out);
}
.footer-bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:12px 28px;
  padding-top:20px;border-top:1px solid var(--hairline-rev);
  font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
}

/* --- Hover ---------------------------------------------------------------- */
/* Every hover state lives behind this query. A touch device fires :hover on
   tap and then holds it: the button would stay inverted and a nav underline
   would sit there reading as a "you are here" marker it was never meant to be. */
@media (hover:hover) and (pointer:fine){
  .nav a:hover::after{transform:scaleX(1)}
  .email a:hover{border-bottom-color:var(--ink)}
  .footer-address a:hover{border-bottom-color:var(--paper)}
}

/* --- The one piece of motion on the page ---------------------------------- */
/* The masthead arrives once per visit, which is the only frequency at which
   an entrance is worth its cost. Everything below the fold is at rest from
   the first frame — nothing here waits on a scroll to become readable. */
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes reveal-fade{from{opacity:0}to{opacity:1}}
.reveal{animation:reveal 380ms var(--ease-out) both;animation-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Gentler, not gone: the fade stays, the travel goes, and colour
     transitions are left alone because they carry meaning and no motion. */
  .reveal{animation-name:reveal-fade}
  .nav a::after{transition-duration:1ms}
}