/* Post Atelier, shared shell.
   Everything used by more than one page: design tokens, self-hosted fonts, the reset, the button,
   the top nav, the footer, and the legal-page typography. Page-specific CSS stays inline in each
   page. No build step, just a second file. */

/* Self-hosted webfonts. Only the cuts the site actually uses (woff2). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.postatelier.app/fonts/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('https://cdn.postatelier.app/fonts/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('https://cdn.postatelier.app/fonts/archivo-800.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:italic;font-weight:600;font-display:swap;src:url('https://cdn.postatelier.app/fonts/archivo-600italic.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.postatelier.app/fonts/lora-500.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('https://cdn.postatelier.app/fonts/lora-600.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.postatelier.app/fonts/playfair-500.woff2') format('woff2')}
@font-face{font-family:'Abril Fatface';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.postatelier.app/fonts/abril-fatface-400.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.postatelier.app/fonts/bebas-neue-400.woff2') format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.postatelier.app/fonts/permanent-marker-400.woff2') format('woff2')}
@font-face{font-family:'Shadows Into Light Two';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.postatelier.app/fonts/shadows-into-light-400.woff2') format('woff2')}

:root{
  --grey-5:#F7F4F0; --grey-10:#E8E4DF; --grey-20:#CCC8C2; --grey-30:#B3AEA6;
  --grey-50:#807B75; --grey-70:#4D4841; --grey-90:#1A0F00; --grey-95:#1A1918;
  --white:#ffffff;
  --blue-100:#0095FF; --blue-40:#73B6E5; --blue-150:#000F1A;
  --blue-120:#0077CC; --blue-30:rgba(0,149,255,.30); /* active filter chip */
  --red-80:#F2798D; --orange-100:#E58600; --yellow-100:#F9DF6E;
  --star:#FFBF00;
  --black-10:rgba(26,15,0,.10); --white-20:rgba(247,244,240,.20); --white-10:rgba(247,244,240,.10);
  --display:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:480px; --pad:40px; --radius:12px; --radius-sm:8px;
  --screen:100vw; /* effective width for vw-based sizing; frozen at tablet+ so it stops growing */
  --shadow:0 4px 16px rgba(0,0,0,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--grey-5);color:var(--grey-90);font-family:var(--body);
  line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;
  padding:0 16px;border-radius:var(--radius);background:var(--grey-5);color:var(--grey-90);
  font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.02em;border:none;cursor:pointer;width:100%}
.btn:hover{background:#fff}
/* dark variant: light text on grey-90, used for the repeated mid-page waitlist CTAs on the light bg */
.btn--dark{background:var(--grey-90);color:var(--grey-5)}
.btn--dark:hover{background:#000}

/* top nav: just the mark, horizontally centered. Solid page-coloured bar with the dark mark, which
   is what the legal pages want. The landing page adds `.over-hero` while the hero is still behind
   it: instead of showing a transparent bar, the whole nav is hidden (slid up + faded) and then
   drops in the moment the hero is scrolled past. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:center;padding:24px;background:var(--grey-5);
  transition:opacity .25s ease}
.nav.over-hero{opacity:0;pointer-events:none}   /* fade out over the hero (no slide) */
/* landing page: logo left, waitlist button right, capped to the 800 content column and centred */
.nav-inner{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:800px}
.nav .mark{display:flex;align-items:center;padding:8px 9px}  /* 48x48 tap target around the 30x32 mark */
.nav .mark img{display:block;width:30px;height:32px}
.nav .nav-cta{width:auto}   /* compact button, not full-width */
@media (prefers-reduced-motion: reduce){.nav{transition:none}}

.footer{background:var(--grey-95);color:var(--white);padding:80px var(--pad) 120px;display:flex;flex-direction:column;gap:80px}
.footer .top,.footer .cols{width:100%;max-width:var(--screen);margin-inline:auto} /* center footer content at tablet+ */
.footer .top{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.footer .wordmark{font-family:var(--display);font-weight:500;font-size:20px;text-transform:uppercase;letter-spacing:.04em}
.footer .tagline{font-family:var(--display);font-weight:800;font-size:32px;line-height:1.2;text-transform:uppercase;align-self:stretch}
.footer .cta{align-self:stretch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.col h4{font-size:16px;font-weight:600;color:var(--grey-5);margin-bottom:12px}
.col a{display:block;color:var(--grey-50);font-size:16px;line-height:2}
.col a:hover{color:var(--grey-20)}

/* Legal pages (privacy, terms). One centred column: max-width is 800 of content plus the 40px
   gutters, so it reads 800 wide on desktop and simply inherits the gutters on smaller screens.
   216px of top padding clears the fixed nav. */
.legal{max-width:880px;margin-inline:auto;padding:120px 40px 120px;
  display:flex;flex-direction:column;gap:40px}
.legal-block{display:flex;flex-direction:column;gap:8px}
.legal h1{font-family:var(--display);font-weight:800;font-size:24px;line-height:28px;text-transform:uppercase}
.legal h2{font-family:var(--display);font-weight:800;font-size:20px;line-height:24px;text-transform:uppercase}
.legal p{font-size:16px;line-height:20px}
.legal p + p{margin-top:20px} /* the blank line between paragraphs in the design */
.legal a{text-decoration:underline} /* links keep the body colour, underline is the only cue */

/* Freeze vw sizing + widen the text column at >=560 so the mobile layout stops growing. */
@media (min-width:560px){
  :root{--screen:560px; --maxw:560px}
}
/* Tablet up: footer gets the wider gutters and all three link columns in one row. */
@media (min-width:768px){
  .footer{padding-left:120px;padding-right:120px}
  .footer .top,.footer .cols{max-width:800px}
  .footer .cols{grid-template-columns:repeat(3,1fr)}
  .footer .cta{align-self:center;width:100%;max-width:360px}
}