/* Sin Miedu — landing page
   Palette (provisional, updated 14 Oct 2026): sand ground, black text, purple accent, navy = only dark ground, terracotta = CTA.
   Type: Commissioner 400 body / 700 headings, served locally from /fonts. */

@font-face{
  font-family:"Commissioner";
  src:url("../fonts/commissioner-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --sand:#F2F0EB;
  --sand-2:#E8E6E1;
  --black:#0D0D0D;
  --purple:#752E69;
  --navy:#201945;
  --sand-3:#DBD9D5;
  --terracotta:#D94D2E;
  --terracotta-hover:#B84329;
  --terracotta-active:#9C3A24;
  --purple-tint:#9D6C93;
  --measure:38rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Lenis (smooth scroll): it scrolls the window itself every frame, so native smooth scrolling
   must be off while it runs or the two fight. Rules below are from the library's own lenis.css. */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--sand);
  color:var(--black);
  font-family:"Commissioner",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:700;line-height:1.1;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.2vw,3.25rem);line-height:1.08}
h1 span{display:block} /* one sentence per line: always two lines */
h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
/* two-tone headings: the second half steps back */
h1,h2{letter-spacing:-.025em}
.hl{color:rgba(13,13,13,.42)}
.dark .hl{color:rgba(242,240,235,.5)}
h3{font-size:1.25rem;line-height:1.25}
p{margin:0 0 1.1em;max-width:var(--measure)}
a{color:var(--purple);text-underline-offset:.15em}
a:hover{color:var(--black)}
a:focus-visible,button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
section{padding:5.5rem 0}
@media (max-width:640px){section{padding:3.75rem 0}}

/* work-in-progress band */
.wip{
  background:var(--sand-2);
  font-size:.9rem;
  padding:.6rem 0;
  border-bottom:1px solid #DBD9D5;
}
.wip .wrap{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.wip .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--terracotta);flex:none}

/* header */
header{padding:1.5rem 0;position:relative;z-index:50}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.mark{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--black);position:relative;z-index:50}
/* the wordmark (img/sin-miedu-logo.svg, inlined so its colour follows the header) */
.mark{color:var(--navy)}
.mark .logo{display:block;height:2.75rem;width:auto}
@media (max-width:640px){.mark .logo{height:2.2rem}}
nav a{margin-left:1.5rem;text-decoration:none;font-weight:500;font-size:.95rem;color:var(--black)}
nav a:hover{color:var(--purple)}
/* language switch (NL / EN): after the nav on desktop, next to the menu button once the menu folds away */
header nav{order:2;margin-left:auto}
.lang{order:3;display:flex;align-items:center;margin-left:.5rem;border:1.5px solid var(--navy);border-radius:2px;color:var(--navy);font-size:.75rem;font-weight:700;letter-spacing:.06em;line-height:1;position:relative;z-index:50}
.lang>*{display:block;padding:.45rem .5rem;color:inherit;text-decoration:none}
.lang a:hover{color:var(--purple)}
.lang a:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.lang .on{background:var(--navy);color:var(--sand)}
@media (pointer:coarse){.lang>*{padding:.7rem .6rem}}

/* menu button: only once the links no longer fit next to the logo, and only where JS can open the panel */
.menu-toggle{
  display:none;position:relative;z-index:50;width:44px;height:44px;
  align-items:center;justify-content:center;margin-right:-.5rem;
  background:none;border:0;padding:0;cursor:pointer;color:var(--black);
}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{
  display:block;width:26px;height:2.5px;border-radius:2px;background:currentColor;
}
.menu-toggle .bars{position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0}
.menu-toggle .bars::before{transform:translateY(-8px)}
.menu-toggle .bars::after{transform:translateY(8px)}
.menu-toggle:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.menu-close{display:none}

@media (max-width:860px){
  .lang{order:1;margin-left:auto}
  .menu-toggle{order:2}
  header nav{order:3;margin-left:0}
  .js .menu-toggle{display:inline-flex}

  /* with JS the links live in a navy panel that slides in from the right over a dimmed page */
  .js nav{
    position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(24rem,86vw);box-sizing:border-box;
    padding:6.5rem 2rem 2.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
    overflow:auto;background:var(--navy);
    transform:translateX(100%);visibility:hidden;box-shadow:0 0 0 100vmax rgba(13,13,13,0);
    transition:transform .38s cubic-bezier(.65,0,.25,1),box-shadow .38s ease,visibility 0s linear .38s;
  }
  .js nav a{margin-left:0;color:var(--sand);font-size:1.75rem;font-weight:700;letter-spacing:-.01em;padding:.45rem 0;white-space:normal}
  .js nav a:hover{color:#EBA08C}
  .js nav a:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
  .js .menu-close{
    display:inline-flex;position:absolute;top:1.5rem;right:1.25rem;width:44px;height:44px;
    align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--sand);
  }
  .menu-close:focus-visible{outline:2px solid var(--sand);outline-offset:2px}

  body.nav-open{overflow:hidden}
  body.nav-open header{z-index:1000}
  body.nav-open nav{
    transform:none;visibility:visible;box-shadow:0 0 0 100vmax rgba(13,13,13,.45);
    transition:transform .38s cubic-bezier(.65,0,.25,1),box-shadow .38s ease,visibility 0s;
  }
}

@media (max-width:640px){
  /* the header sticks, so the logo and the button stay reachable wherever you are on the page */
  header{position:sticky;top:0;background:var(--sand)}
  header .wrap{flex-direction:row;align-items:center;gap:1rem}
  section[id]{scroll-margin-top:6rem}

  /* no JS: the old horizontal strip of links, so every section stays reachable */
  html:not(.js) nav{display:flex;gap:1.25rem;overflow-x:auto;width:100%;padding-bottom:.35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html:not(.js) nav::-webkit-scrollbar{display:none}
  html:not(.js) nav a{margin-left:0;white-space:nowrap}

  .js nav{padding:5.5rem 1.5rem 2rem}
  .js .menu-close{top:1rem;right:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .js nav{transition:none !important}
}
.skip{position:absolute;left:-999px;top:0;background:var(--black);color:var(--sand);padding:.6rem 1rem;z-index:10}
.skip:focus{left:0;color:var(--sand)}

/* hero */
.hero{padding-top:3rem;padding-bottom:5rem}
@media (max-width:640px){.hero{padding-top:1.5rem}}
.hero .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:3rem}}
.hero p.lead{font-size:1.2rem;line-height:1.5;max-width:34rem}
.hero .fine{font-size:.9rem;color:#5A4656;max-width:30rem;margin-top:1.5rem}
/* buttons — brand book §buttons. Terracotta is the only button colour, label in sand.
   Primary = the one hot object on the page; secondary and tertiary stay in black so they never compete. */
.btn,.btn-secondary,.btn-tertiary{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.02em;
  text-decoration:none;border-radius:2px;cursor:pointer;
  margin-top:.5rem;transition:background .15s ease,color .15s ease;
}
.btn{background:var(--terracotta);color:var(--sand);padding:12px 22px;border:0}
.btn:hover{background:var(--terracotta-hover);color:var(--sand)}
.btn:active{background:var(--terracotta-active);color:var(--sand)}
.btn:focus-visible{outline:2px solid var(--purple);outline-offset:3px;color:var(--sand)}
.btn[aria-disabled="true"],.btn:disabled,.btn.is-disabled{
  background:var(--sand-3);color:rgba(13,13,13,.52);cursor:default;pointer-events:none;
}
.btn-secondary{background:transparent;color:var(--black);padding:11px 20px;border:1.5px solid var(--black)}
.btn-secondary:hover{background:var(--black);color:var(--sand)}
.btn-tertiary{
  background:transparent;color:var(--black);padding:11px 4px;border:0;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--purple);
}
.btn-tertiary:hover{color:var(--purple)}
.btn-secondary .ext{width:1em;height:1em;margin-left:.5em;flex:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (pointer:coarse){.btn,.btn-secondary,.btn-tertiary{min-height:44px}} /* tappable area on touch */

/* pillars */
#what .intro{max-width:none;width:calc(50% - 1rem)} /* spans 2 of the 4 pillar columns (2rem gap) */
@media (max-width:880px){#what .intro{width:auto;max-width:var(--measure)}}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem 2rem;margin-top:2.5rem}
@media (max-width:880px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.pillars{grid-template-columns:1fr}}
.pillar{display:flex;flex-direction:column}
.pillar .shard{margin-bottom:1rem}
.pillar h3{margin-bottom:.4em}
.pillar p{font-size:.98rem;margin:0}

/* we live between — five pairs of opposites. Each bar's two halves slide in from the screen
   edges, meet on a fractured seam, and fuse into one word in a new colour. The script drives
   --q1 (slide: 0 apart, 1 met) and --q2 (fusion: 0 two words, 1 one word) from scroll position;
   with no JS, or reduced motion, both stay at 1 and the fused word simply shows.
   Per bar: --split (the halves), --one (the fused bar), --ink (text on the fused bar), and a
   .frac-N class for the shape of the break. */
.centered{text-align:center}
.centered p{margin-inline:auto}
.merges{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:0;container-type:inline-size}   /* bars touch, so the breaks read as one crack down the stack */
.merge{
  --q1:1;--q2:1;
  --h:clamp(6.5rem,11vw,8rem);             /* nominal bar height: the fracture offsets scale from it; the real height comes from the fused content */
  --reach:calc(var(--h)*.30);              /* how far either side of centre a fracture may wander (offsets below stay inside it) */
  --gap:3px;                               /* the sand line that shows between the met halves */
  --slide:12cqw;                           /* how far each half starts outside the centre */
  --lead:.6;                               /* how much further than its half a word travels */
  position:relative;min-height:var(--h);overflow:hidden;
  font-weight:700;font-size:clamp(1.25rem,2.6vw,2rem);line-height:1;letter-spacing:-.01em;
}
/* the fracture: a seam that runs top to bottom through four points, each an offset from the
   centre line as a fraction of the bar height (positive = right). --y1/--y2 are the heights
   of the two knees. Every bar gets a different one, so the breaks read as breaks, not a stamp. */
.frac-1{--p0:.28;--y1:34%;--p1:.02;--y2:70%;--p2:-.06;--p3:-.13}   /* shallow, then steep, like the storyboard */
.frac-2{--p0:.07;--y1:40%;--p1:.24;--y2:68%;--p2:-.02;--p3:-.22}   /* bulges right, then drops away */
.frac-3{--p0:-.20;--y1:28%;--p1:-.05;--y2:64%;--p2:.17;--p3:.09}   /* leans the other way */
.frac-4{--p0:.24;--y1:22%;--p1:.09;--y2:55%;--p2:.13;--p3:-.26}    /* a short step, then a long diagonal */
.frac-5{--p0:-.09;--y1:45%;--p1:.19;--y2:78%;--p2:.04;--p3:-.24}   /* a peak near the middle */
.half{
  position:absolute;top:0;bottom:0;width:calc(50% + var(--reach));
  display:flex;align-items:center;background:var(--split);color:var(--sand);will-change:transform;
}
.half.l{
  left:0;justify-content:flex-end;padding-right:calc(var(--reach)*2 + .5rem);    /* words rest clear of the widest wander */
  clip-path:polygon(
    0 0,
    calc(100% - var(--reach) + var(--p0)*var(--h)) 0,
    calc(100% - var(--reach) + var(--p1)*var(--h)) var(--y1),
    calc(100% - var(--reach) + var(--p2)*var(--h)) var(--y2),
    calc(100% - var(--reach) + var(--p3)*var(--h)) 100%,
    0 100%);
  transform:translateX(calc(-1*var(--slide)*(1 - var(--q1))));
}
.half.r{
  right:0;justify-content:flex-start;padding-left:calc(var(--reach)*2 + .5rem + var(--gap));
  clip-path:polygon(
    calc(var(--reach) + var(--p0)*var(--h) + var(--gap)) 0,
    100% 0,
    100% 100%,
    calc(var(--reach) + var(--p3)*var(--h) + var(--gap)) 100%,
    calc(var(--reach) + var(--p2)*var(--h) + var(--gap)) var(--y2),
    calc(var(--reach) + var(--p1)*var(--h) + var(--gap)) var(--y1));
  transform:translateX(calc(var(--slide)*(1 - var(--q1))));
}
/* the words travel with their half and a little further, so they arrive slightly after the bar */
.half span{display:block;opacity:calc(1 - min(1,var(--q2)*2));will-change:transform}
.half.l span{transform:translateX(calc(-1*var(--lead)*var(--slide)*(1 - var(--q1))))}
.half.r span{transform:translateX(calc(var(--lead)*var(--slide)*(1 - var(--q1))))}
/* the fused bar fades over the halves; its word arrives in the second half of the fusion */
.one{
  position:relative;min-height:var(--h);padding:5rem 1.25rem;box-sizing:border-box;   /* 80px above and below the word: room to read it as it passes */
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--one);color:var(--ink);opacity:var(--q2);
}
.one span{display:block;opacity:calc(max(0,var(--q2)*2 - 1));transform:scale(calc(.94 + .06*var(--q2)))}
/* the explanation follows the word in, a beat later */
.one small{
  display:block;max-width:40rem;margin-top:.6rem;text-wrap:balance;
  font-weight:500;font-size:clamp(.95rem,1.6vw,1.1rem);line-height:1.45;letter-spacing:0;
  opacity:calc(max(0,var(--q2)*2.5 - 1.5));transform:translateY(calc(6px*(1 - var(--q2))));
}
@media (max-width:640px){.merge{--slide:8cqw;--lead:.3}}   /* shorter travel, so the longest words start fully on screen */

/* two-column story sections */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:2.5rem}}

/* illustration placeholder */
.ph{
  border:1.5px dashed var(--purple);border-radius:.5rem;background:var(--sand-2);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--purple);font-size:.9rem;padding:1.5rem;min-height:16rem;
}
.ph.wide{min-height:20rem}
.dark .ph{border-color:#9D6C93;background:#2E2656;color:#D4CCE2}

/* shards — photographs share one grade so different sources sit together.
   Straight edges since 14 Oct 2026: the .cut-N classes stay in the markup but no longer clip.
   .r43 = 4:3 gallery shard, .tall = portrait shard, .flat = a drawing, so no photo grade. */
.shard{margin:0}
.shard img{
  display:block;width:100%;height:auto;
  filter:saturate(.82) contrast(1.03);
}
.shard.r43 img{aspect-ratio:4/3;object-fit:cover}
.shard.tall img{aspect-ratio:10/11;object-fit:cover;object-position:50% 20%}
/* a shard that keeps the picture's own proportions: declare them with --ar on the figure.
   Always declare it. Inside .split a lazy image with no CSS ratio collapses to zero height
   and shifts every anchor below it, which is the bug the vase had. */
.shard.as-is img{aspect-ratio:var(--ar);object-fit:cover}
.shard.flat img{filter:none}


/* the vase — photo has a pure white ground; multiply lets the sand show through, shadow included */
/* width:100% is load-bearing: margin-inline:auto cancels the grid stretch, so without it the
   figure shrink-wraps, the image computes to 0 wide before it loads, and the reserved height
   collapses with it, shifting every anchor below. The aspect-ratio alone does not save you. */
.vase{margin:0;width:100%;max-width:36rem;margin-inline:auto}
.vase img{display:block;width:100%;height:auto;aspect-ratio:1376/1200;mix-blend-mode:multiply}

/* the name — the only dark section */
.dark{background:var(--navy);color:var(--sand)}
.dark h2{color:var(--sand)}
.dark a{color:#EBA08C}
.dark .fine{color:#C8C0D8}
.name-word{font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;line-height:1;margin-bottom:1.25rem}
.name-word small{display:block;font-weight:400;font-size:1.05rem;letter-spacing:0;margin-top:.75rem;color:#C8C0D8}

/* workshop: the portrait fills the whole section; the empty wall on its left carries the text */
#workshop{position:relative;overflow:hidden;background:#F8F4EC;min-height:min(56vw,820px);display:flex;align-items:center}
#workshop>.wrap{position:relative;z-index:1}
.ws-text{max-width:34rem}
.ws-bg{position:absolute;top:0;bottom:0;right:0;left:auto;width:min(100%,1468px);margin:0}  /* 1468 = 820px tall at the photo's ratio: wider screens get wall colour on the left instead of a cropped chin */
.ws-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 30%}
.ws-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F8F4EC 0%,#F8F4EC 36%,rgba(248,244,236,0) 54%)}
@media (min-width:881px) and (max-width:1199px){
  .ws-bg{left:auto;width:64%}
  .ws-bg img{object-position:80% 30%}
  .ws-bg::after{background:linear-gradient(90deg,#F8F4EC 0%,rgba(248,244,236,0) 30%)}
  .ws-text{max-width:27rem}
}
@media (max-width:880px){
  #workshop{display:block;padding-top:0;min-height:0}
  .ws-bg{position:relative;inset:auto;width:100%;aspect-ratio:4/3}
  .ws-bg img{object-position:82% 25%}
  .ws-bg::after{background:linear-gradient(180deg,rgba(248,244,236,0) 62%,#F8F4EC 100%)}
  #workshop>.wrap{margin-top:.5rem}
}
.ws-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2rem;max-width:560px}
.ws-day{background:#FCF9F5;border:1px solid #DBD9D5;border-radius:2px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.ws-day .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.ws-day b{font-size:17px;line-height:1.25}
.ws-day .t{font-size:14px;color:#544550;font-variant-numeric:tabular-nums}
@media (max-width:600px){.ws-days{gap:6px}.ws-day{padding:10px 9px}.ws-day .k{font-size:9.5px;letter-spacing:.08em}.ws-day b{font-size:14px}.ws-day .t{font-size:12px}}

.workshop-cta{margin-top:2rem}

/* ngrane */
.ngrane{background:var(--sand-2)}

footer{padding:3rem 0 4rem;font-size:.9rem;color:#5A4656;border-top:1px solid #DBD9D5}
footer .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer p{margin:0 0 .4em}
footer .initiative img{display:inline-block;width:70px;height:auto;vertical-align:-3px;margin-left:.25em}

@media (max-width:640px){.wip{font-size:.8rem;line-height:1.45}}

/* collages — finished artwork by David (transparent PNG -> WebP), one image each, so they scale as a whole */
.art{margin:0;margin-inline:auto;width:100%}
.art img{display:block;width:100%;height:auto}
.art-hero{max-width:36rem}
.art-ngrane{max-width:40rem}
.split-collage{grid-template-columns:.8fr 1.2fr}
@media (max-width:880px){.split-collage{grid-template-columns:1fr}}
/* desktop: the hero fills the first screen below the header and its content sits in the vertical middle of it;
   the collage also shrinks on low screens so it never runs past the fold (.854 = its width/height) */
@media (min-width:881px){
  .hero{min-height:calc(100svh - 8.2rem);display:flex;align-items:center;padding-top:.5rem;padding-bottom:2.5rem}
  .art-hero{max-width:min(36rem,calc((100svh - 10.5rem)*.854));position:relative;top:-1.5rem}  /* sits a little above the middle */
}
@media (prefers-reduced-motion:no-preference){
  .art-hero img{opacity:0;animation:arrive .9s cubic-bezier(.2,.7,.2,1) .15s forwards}
  @keyframes arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
}

/* phones: the collages break out of the text column and run the full width of the screen,
   scaled past both edges so the pieces read at a useful size. The figure clips, so the
   page itself never scrolls sideways. */
@media (max-width:640px){
  .art-hero,.art-ngrane{
    width:auto;max-width:none;
    margin-left:-1.25rem;margin-right:-1.25rem;  /* cancel the .wrap gutter, edge to edge */
    overflow:hidden;
  }
  .art-hero img,.art-ngrane img{width:122%;max-width:none;margin-left:-11%}
}