/* Folden placeholder page (folden.eu before launch).
   Tokens from docs/design-code.md and src/app/globals.css. This page uses the
   fallback faces only: no web fonts, nothing loaded from anywhere else.
   No inline styles anywhere: the Content-Security-Policy allows this file only. */

:root{
  --f-display:"Iowan Old Style","Charter","Bitstream Charter",Georgia,serif;
  --f-text:"Iowan Old Style","Charter","Bitstream Charter",Georgia,serif;
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --ground:#F1F1F0;
  --raised:#FAFAF8;
  --graphite:#111214;
  --grey:#55595C;      /* lead text, 6.26:1 */
  --meta:#6A6D70;      /* small print, 4.61:1 */
  --rule:#C9CBCD;      /* decorative hairlines only */
  --blue:#40596D;      /* time and status, italic */
  --live:#2F6FE0;      /* focus ring, never text */
  --live-text:#2B5FC4; /* link hover */
  --focus:var(--live);

  --m:clamp(20px,4vw,48px);
  --gap:16px;
  --max:1040px;
  --measure:34em;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --r2:3px;

  --d1:clamp(48px,6.4vw,80px); /* Display: the statement, one per page */
  --d3:clamp(26px,2.6vw,32px); /* Display: section names */
  --body:17px;                 /* Text */
  --ui:14px;                   /* Sans: language links, small print */

  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#111317;--raised:#1B1F25;--graphite:#E6E7E8;--grey:#A7ADB3;--meta:#8C939A;
    --rule:#2B3037;--blue:#8FB0CC;--live-text:#4F8CFF;
  }
}
@media (max-width:760px){
  :root{--s5:48px;--s6:80px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ground)}
body{
  margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--ground);color:var(--graphite);
  font-family:var(--f-text);font-size:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;
}
p,h1,h2,dl,dd,address{margin:0}
h1,h2{font-weight:400;font-size:inherit;line-height:inherit}
address{font-style:normal}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--live-text)}

/* Focus: one visible ring on every link (docs/design-code.md, accessibility rules). */
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:var(--m);top:8px;z-index:10;
  font-family:var(--f-ui);font-size:var(--ui);line-height:1.4;
  background:var(--raised);color:var(--graphite);padding:10px 14px;border-radius:var(--r2);
  box-shadow:0 0 0 1px var(--meta);transform:translateY(-200%);
}
.skip:focus{transform:none}

.frame{width:100%;max-width:calc(var(--max) + 2 * var(--m));margin:0 auto;padding:0 var(--m)}
.g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}

/* Header: the wordmark and the two languages */
.top{padding:var(--s3) 0}
.top .frame{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.mark{
  font-family:var(--f-display);font-weight:500;font-size:28px;line-height:1;letter-spacing:-.015em;
  color:var(--graphite);text-decoration:none;padding:4px 0;
}
.lang{display:flex;gap:var(--s3);font-family:var(--f-ui);font-size:var(--ui);line-height:1.4}
.lang a{
  display:inline-block;padding:4px 0;color:var(--grey);text-decoration:none;
  border-bottom:1px solid transparent;
}
.lang a:hover{color:var(--live-text)}
.lang a[aria-current="page"]{color:var(--graphite);border-bottom-color:var(--blue)}

main{flex:1 0 auto;padding:var(--s5) 0 var(--s6)}

/* The statement: Display, one per page. The fallback serif needs a little more line height than the licensed face. */
.statement{
  font-family:var(--f-display);font-weight:400;font-size:var(--d1);line-height:1.04;letter-spacing:-.02em;
  max-width:13em;text-wrap:balance;
}
.lead{color:var(--grey);text-wrap:pretty;max-width:var(--measure)}
.status{font-style:italic;color:var(--blue);line-height:1.45}

/* Home: statement across the page, then the status in the rail and the lead beside it. */
.home .g{row-gap:var(--s4)}
.home .statement{grid-column:1 / -1}
.home .lead{grid-column:2 / span 2;grid-row:2}
.home .status{grid-column:1;grid-row:2;max-width:14em}

/* Legal notice and privacy */
.doc .statement{margin-bottom:var(--s5)}
.doc section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);padding:var(--s4) 0;border-top:1px solid var(--rule)}
.doc h2{grid-column:1;font-family:var(--f-display);font-size:var(--d3);line-height:1.1;letter-spacing:-.01em}
.doc .body{grid-column:2 / span 2;max-width:var(--measure)}
.doc .body > * + *{margin-top:var(--s2)}
.doc .plain{margin:0;padding:0;list-style:none}
.doc .plain li + li{margin-top:var(--s1)}
.doc .status{margin-bottom:var(--s4)}
.fields{display:grid;grid-template-columns:minmax(120px,12em) 1fr;column-gap:var(--s3);row-gap:10px}
.fields dt{font-family:var(--f-ui);font-size:var(--ui);letter-spacing:.01em;color:var(--grey);padding-top:3px}

/* Not found */
.nf .lead{margin-top:var(--s3)}
.nf .links{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);font-family:var(--f-ui);font-size:var(--ui)}
.nf .links a{display:inline-block;padding:4px 0}

/* Footer: identity and the quiet promise */
.foot{padding:var(--s4) 0 var(--s5)}
.foot .g{row-gap:var(--s1)}
.foot .g::before{content:"";grid-column:1 / -1;border-top:1px solid var(--rule);margin-bottom:var(--s2)} /* the rule spans the content, not the side margins */
.foot p{font-family:var(--f-ui);font-size:var(--ui);line-height:1.45;letter-spacing:.01em;color:var(--meta)}
.foot .who{grid-column:1}
.foot .promise{grid-column:2 / span 2}
.foot .links{grid-column:2 / span 2;display:flex;flex-wrap:wrap;column-gap:var(--s3)}
.foot a{display:inline-block;padding:4px 0;color:var(--grey)}
.foot a:hover{color:var(--live-text)}

@media (max-width:760px){
  .g,.doc section{grid-template-columns:minmax(0,1fr)}
  .home .g{row-gap:var(--s3)}
  .home .statement,.home .lead,.home .status,
  .doc h2,.doc .body,
  .foot .who,.foot .promise,.foot .links{grid-column:1;grid-row:auto}
  .doc h2{margin-bottom:var(--s3)}
  .fields{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .fields dd + dt{margin-top:10px}
}

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

@media print{
  .skip,.lang{display:none}
  body{background:#fff;color:#000}
}