/* MISHKAH — the world. No inline style attributes anywhere. */

:root{
  --ivory:#F3EADF;
  --green:#15352D;
  --limestone:#D8C7B3;
  --carbon:#171714;
  --gold:#B78A45;
  --cobalt:#172C6B;
  --soft:rgba(21,53,45,.74);
  --rule:rgba(21,53,45,.16);
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(22px,6vw,80px);
  --turn:900ms;
  --ease:cubic-bezier(.62,.02,.24,1);
}
html[lang="ar"]{--display:"Readex Pro",system-ui,sans-serif;--body:"Readex Pro",system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--carbon)}
body{
  margin:0;background:var(--ivory);color:var(--green);
  font-family:var(--body);font-size:16px;line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* bot trap — hidden by the HTML `hidden` attribute as well, so it cannot
   reappear if this stylesheet ever fails to load */
.hp,.hp[hidden]{display:none!important}

/* ============ type ============ */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:12px}

.d1{font-family:var(--display);font-weight:400;font-size:clamp(40px,8.6vw,104px);line-height:1.0;letter-spacing:-.02em;margin:0}
.d2{font-family:var(--display);font-weight:400;font-size:clamp(30px,5.4vw,64px);line-height:1.06;letter-spacing:-.015em;margin:0 0 26px}
.d3{font-family:var(--display);font-weight:400;font-size:clamp(23px,3.4vw,38px);line-height:1.18;letter-spacing:-.01em;margin:0 0 18px}
html[lang="ar"] .d1{line-height:1.28;letter-spacing:0;font-weight:300}
html[lang="ar"] .d2,html[lang="ar"] .d3{line-height:1.42;letter-spacing:0;font-weight:300}

.lede{font-size:clamp(16px,1.9vw,19px);line-height:1.7;color:var(--soft);margin:0 0 20px;max-width:52ch}
.lede--wide{max-width:60ch}

/* ============ 00 the opening ============ */
.open{
  position:relative;min-height:100svh;background:var(--carbon);color:var(--ivory);
  display:grid;place-items:center;overflow:hidden;text-align:center;
}
.open__slit{
  display:block;position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(216,199,179,.9) 22%,rgba(216,199,179,.9) 78%,transparent);
  transform:translateX(-50%);
  animation:slit 3.4s var(--ease) forwards;
}
@keyframes slit{
  0%{width:2px;opacity:0}
  10%{width:2px;opacity:.9}
  100%{width:min(88vw,720px);opacity:0}
}
.open__glow{
  display:block;position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(46% 40% at 50% 46%,rgba(183,138,69,.22),transparent 70%);
  opacity:0;animation:glow 3.4s var(--ease) .5s forwards;
}
@keyframes glow{to{opacity:1}}

.open__in{position:relative;z-index:2;padding-block:12vh}
@keyframes reveal{to{opacity:1;transform:none}}

/* the film — it opens in black and finds its own light, so it carries the reveal */
.open__film{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  opacity:0;animation:reveal 1.4s var(--ease) .2s forwards;
}
.open__video{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  display:block;
}
.open__film::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,23,20,.62) 0%,rgba(23,23,20,.10) 34%,rgba(23,23,20,.22) 62%,rgba(23,23,20,.88) 100%);
}
.open__in{padding-block:0;min-height:100svh;display:grid;align-content:end;justify-items:center;padding-bottom:9vh}
.open__spacer{flex:1}

.open__logo{width:clamp(120px,17vw,190px);height:auto;margin:0 auto 18px;opacity:0;animation:reveal 1.6s var(--ease) 2.5s forwards}
.open__line{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--limestone);margin:0 0 46px;opacity:0;animation:reveal 1.6s var(--ease) 2.9s forwards}
html[lang="ar"] .open__line{letter-spacing:0;font-size:14px}
.open__cta{
  display:inline-flex;align-items:center;gap:12px;padding:14px 30px;
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory);border:1px solid rgba(243,234,223,.34);border-radius:2px;
  text-decoration:none;opacity:0;animation:reveal 1.6s var(--ease) 3.3s forwards;
  transition:background-color .3s,border-color .3s;
}
html[lang="ar"] .open__cta{letter-spacing:0;font-size:13px}
.open__cta:hover{background:rgba(243,234,223,.1);border-color:var(--limestone)}

/* ============ sections ============ */
.sec{padding-block:clamp(84px,16vh,180px)}
.sec--rule{border-top:1px solid var(--rule)}
.sec--dark{background:var(--carbon);color:var(--ivory)}
.sec--dark .lede{color:rgba(243,234,223,.66)}
.sec--dark .eyebrow{color:var(--limestone)}

/* the question: one line at a time */
.beat{margin:0 0 clamp(60px,12vh,140px)}
.beat:last-child{margin-bottom:0}
.beat--hold{min-height:36vh;display:grid;align-content:center}

.litany{list-style:none;margin:0;padding:0}
.litany li{
  font-family:var(--display);font-size:clamp(21px,3vw,32px);line-height:1.5;
  padding-block:14px;color:var(--soft);
}
.litany li:last-child{color:inherit}
html[lang="ar"] .litany li{line-height:1.7}

.marks{display:none}

/* the process litany */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{
  border-top:1px solid var(--rule);padding-block:clamp(20px,3vw,32px);
  display:grid;gap:6px;
}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps b{font-family:var(--display);font-weight:400;font-size:clamp(22px,3vw,32px);letter-spacing:-.01em}
html[lang="ar"] .steps b{letter-spacing:0}
.steps span{color:var(--soft);font-size:15px}
.sec--dark .steps li{border-color:rgba(243,234,223,.18)}
.sec--dark .steps span{color:rgba(243,234,223,.6)}

/* gold draws — the proof */
.proof{list-style:none;margin:0 0 clamp(50px,9vh,100px);padding:0;display:grid;gap:clamp(26px,5vh,54px)}
.proof li{font-family:var(--display);font-size:clamp(22px,3.4vw,38px);line-height:1.25;letter-spacing:-.01em;max-width:22ch}
html[lang="ar"] .proof li{line-height:1.5;letter-spacing:0}
.proof li:nth-child(even){margin-inline-start:auto;text-align:end}

.formula{display:grid;place-items:center;text-align:center}
.formula img{width:100%;height:auto;margin-bottom:clamp(30px,5vh,56px);border-radius:2px}
.formula__shot{box-shadow:0 26px 60px rgba(23,23,20,.18)}
.formula p{font-size:clamp(13px,2vw,17px);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0;line-height:2}
html[lang="ar"] .formula p{letter-spacing:0;font-weight:600}

/* ============ the twelve ============ */
.gallery{display:grid;gap:clamp(16px,2.6vw,34px);grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}
.obj{margin:0}
.obj__btn{display:block;width:100%;text-align:center;border-radius:3px;transition:background-color .35s}
.obj__btn:hover,.obj__btn:focus-visible{background:rgba(216,199,179,.32)}
/* every one of these is a <span>, so display must be declared or the box
   collapses, the image overflows and the caption ends up behind it. */
.obj__stage{
  display:grid;place-items:center;position:relative;
  padding:clamp(14px,3vw,30px) 10px clamp(10px,2vw,18px);
}
.obj__inner{
  display:block;position:relative;width:100%;aspect-ratio:1/1.16;
}
.obj__face{
  display:grid;place-items:center;position:absolute;inset:0;
  transition:opacity 700ms var(--ease);
}
.obj__face img{max-height:100%;max-width:100%;width:auto;height:auto;filter:drop-shadow(0 10px 18px rgba(23,23,20,.16))}
.obj__face--back{opacity:0}
.obj__btn[aria-pressed="true"] .obj__face--back{opacity:1}
.obj__btn[aria-pressed="true"] .obj__face--front{opacity:0}

@media (min-width:900px) and (hover:hover){
  .obj__stage{perspective:1100px}
  .obj__inner{transform-style:preserve-3d;transition:transform var(--turn) var(--ease)}
  .obj__btn[aria-pressed="true"] .obj__inner{transform:rotateY(180deg)}
  .obj__face{backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:none}
  .obj__face--back{transform:rotateY(180deg);opacity:1}
  .obj__btn[aria-pressed="true"] .obj__face--front{opacity:1}
}

.obj__name{display:block;font-family:var(--display);font-size:clamp(15px,2vw,21px);line-height:1.25;margin:0}
.obj__line{display:block;font-size:11px;line-height:1.45;letter-spacing:.04em;color:var(--soft);margin:6px 0 clamp(16px,2.4vw,26px);min-height:2.9em}

.hint{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
html[lang="ar"] .hint{letter-spacing:0;font-size:12px}
.hint__dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ============ the turn ============ */
.split{display:grid;grid-template-columns:1fr;gap:clamp(32px,6vw,72px);align-items:center}
.figure{margin:0}
.figure img{width:100%;height:auto;border-radius:2px}
.figure figcaption{margin-top:14px;font-size:12px;color:var(--soft)}
.sec--dark .figure figcaption{color:rgba(243,234,223,.6)}

/* ============ founder ============ */
.quote{font-family:var(--display);font-size:clamp(26px,4.6vw,52px);line-height:1.16;letter-spacing:-.015em;margin:0 0 24px;max-width:20ch}
html[lang="ar"] .quote{line-height:1.44;letter-spacing:0;font-weight:300}
.sig{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0}
html[lang="ar"] .sig{letter-spacing:0;font-size:12px}

/* ============ last screen ============ */
.last{min-height:76svh;display:grid;place-items:center;text-align:center;background:var(--ivory)}
.last__logo{width:clamp(110px,15vw,168px);height:auto;margin:0 auto 30px}
.last__meta{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 26px}
html[lang="ar"] .last__meta{letter-spacing:0;font-size:13px}
.last__line{font-family:var(--display);font-size:clamp(20px,3.2vw,34px);line-height:1.35;margin:0;color:var(--green)}
html[lang="ar"] .last__line{line-height:1.6;font-weight:300}

/* ============ the star ============ */
.star{
  position:absolute;width:24px;height:24px;padding:0;
  color:var(--gold);opacity:.34;transition:opacity .4s,transform .4s;
}
.star:hover,.star:focus-visible{opacity:1;transform:rotate(22.5deg) scale(1.18)}
.star svg{width:100%;height:100%;display:block;fill:currentColor}
.star--a{top:12%;inset-inline-end:8%}
.star--b{bottom:16%;inset-inline-start:6%}
.star--c{top:38%;inset-inline-start:11%}
.sec,.open{position:relative}

.fragment{
  position:fixed;inset:auto 0 0 0;z-index:90;
  background:var(--carbon);color:var(--ivory);
  padding:26px var(--gut) 30px;
  transform:translateY(101%);transition:transform .5s var(--ease);
  box-shadow:0 -18px 50px rgba(0,0,0,.34);
}
.fragment.is-open{transform:none}
.fragment__label{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
html[lang="ar"] .fragment__label{letter-spacing:0;font-size:12px}
.fragment__text{font-family:var(--display);font-size:clamp(19px,3vw,28px);line-height:1.3;margin:0;max-width:26ch}
html[lang="ar"] .fragment__text{line-height:1.55}
.fragment__close{position:absolute;top:16px;inset-inline-end:var(--gut);font-size:22px;line-height:1;color:rgba(243,234,223,.7)}

/* ============ header / footer ============ */
.top{
  position:fixed;top:0;inset-inline:0;z-index:70;padding-block:12px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .4s,visibility .4s;
}
.top.is-on{opacity:1;visibility:visible;pointer-events:auto;background:rgba(243,234,223,.975);border-bottom:1px solid var(--rule)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:18px}
.top__logo img{height:28px;width:auto}
@media (min-width:600px){.top__logo img{height:34px}}
.langs{display:flex;gap:2px}
.langs a{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:6px 7px;border-radius:2px;color:var(--soft);
  transition:color .2s,background-color .2s;white-space:nowrap;
}
@media (min-width:600px){.langs a{font-size:11px;letter-spacing:.14em;padding:7px 9px}}
.langs a:hover{color:var(--green);background:rgba(21,53,45,.06)}
.langs a[aria-current="true"]{color:var(--green);background:rgba(21,53,45,.09)}

.foot{padding-block:40px;border-top:1px solid var(--rule)}
.foot__in{display:grid;gap:18px}
.foot__line{font-size:12px;color:var(--soft);margin:0}
.foot__mark{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
html[lang="ar"] .foot__mark{letter-spacing:0;font-size:12px}

/* ============ reveal ============ */
.rise{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s var(--ease)}
.rise.is-in{opacity:1;transform:none}

/* ============ responsive ============ */
@media (min-width:600px){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__in{grid-template-columns:1fr auto;align-items:center}
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .capture__grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .btn{width:auto;min-width:240px}
  .fragment{inset:auto 0 0 auto;width:min(460px,42vw);margin:0 28px 28px 0;border-radius:3px;transform:translateY(140%)}
  html[dir="rtl"] .fragment{margin:0 0 28px 28px}
}
@media (min-width:1200px){.gallery{grid-template-columns:repeat(6,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  .open__film,.open__mark,.open__line,.open__cta{opacity:1}
  .open__slit{opacity:0}
  .open__slit{width:min(88vw,720px);opacity:.22}
  .open__glow{opacity:1}
}

/* ============ film bed: the fragments behind the question ============ */
.sec--film{background:var(--carbon);color:var(--ivory);overflow:hidden}
.sec--film .lede{color:rgba(243,234,223,.7)}
.sec--film .litany li{color:rgba(243,234,223,.52)}
.sec--film .litany li:last-child{color:var(--ivory)}
.sec--film .marks img{opacity:.94;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.sec--film .wrap{position:relative;z-index:2}

.filmbed{position:absolute;inset:0;z-index:0}
.filmbed__video{width:100%;height:100%;object-fit:cover;display:block;opacity:.5}
.filmbed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,23,20,.94) 0%,rgba(23,23,20,.55) 26%,rgba(23,23,20,.55) 74%,rgba(23,23,20,.94) 100%);
}

/* ============ stone ground: before the first piece ============ */
.sec--stone{position:relative;overflow:hidden}
.sec--stone::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("../img/limestone.jpg");
  background-size:cover;background-position:center;
  opacity:.22;
}
.sec--stone::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--ivory) 0%,rgba(243,234,223,.72) 22%,rgba(243,234,223,.72) 78%,var(--ivory) 100%);
}
.sec--stone .wrap{position:relative;z-index:2}
.sec--stone .steps li{border-color:rgba(21,53,45,.24)}

@media (prefers-reduced-motion:reduce){
  .filmbed__video{opacity:.34}
}

/* ============ film bed: the fragments behind the question ============ */
.sec--film{background:var(--carbon);color:var(--ivory);overflow:hidden}
.sec--film .lede{color:rgba(243,234,223,.7)}
.sec--film .litany li{color:rgba(243,234,223,.52)}
.sec--film .litany li:last-child{color:var(--ivory)}
.sec--film .marks img{opacity:.94;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.sec--film .wrap{position:relative;z-index:2}

.filmbed{position:absolute;inset:0;z-index:0}
.filmbed__video{width:100%;height:100%;object-fit:cover;display:block;opacity:.5}
.filmbed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,23,20,.94) 0%,rgba(23,23,20,.55) 26%,rgba(23,23,20,.55) 74%,rgba(23,23,20,.94) 100%);
}

/* ============ stone ground: before the first piece ============ */
.sec--stone{position:relative;overflow:hidden}
.sec--stone::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("../img/limestone.jpg");
  background-size:cover;background-position:center;
  opacity:.22;
}
.sec--stone::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--ivory) 0%,rgba(243,234,223,.72) 22%,rgba(243,234,223,.72) 78%,var(--ivory) 100%);
}
.sec--stone .wrap{position:relative;z-index:2}
.sec--stone .steps li{border-color:rgba(21,53,45,.24)}

@media (prefers-reduced-motion:reduce){
  .filmbed__video{opacity:.34}
}

/* ============ 03b — one line, then the whole table around it ============
   Scroll pulls the frame back in seven steps. Change --z0 to start tighter
   or looser; everything else follows. No inline styles: the steps are classes. */
.seek{position:relative;height:300vh;background:var(--carbon)}
.seek__sticky{
  position:static;height:auto;overflow:visible;
  display:grid;place-items:center;
}
.seek__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:transform 900ms var(--ease),opacity 900ms var(--ease);
}
/* the sheet holds first, then dissolves into the table it was lying on */
.seek__img--sheet{object-position:50% 46%;transform-origin:50% 46%;transform:scale(1.28);opacity:1}
.seek__img--table{object-position:44% 50%;transform-origin:44% 50%;transform:scale(var(--z0));opacity:0}
.seek.s2 .seek__img--sheet,.seek.s3 .seek__img--sheet,
.seek.s4 .seek__img--sheet,.seek.s5 .seek__img--sheet,
.seek.s6 .seek__img--sheet{opacity:0}
.seek.s2 .seek__img--table,.seek.s3 .seek__img--table,
.seek.s4 .seek__img--table,.seek.s5 .seek__img--table,
.seek.s6 .seek__img--table{opacity:1}
.seek.s1 .seek__img--sheet{transform:scale(1.16)}
.seek{--z0:1.72}
.seek.s2 .seek__img--table{transform:scale(1.58)}
.seek.s3 .seek__img--table{transform:scale(1.40)}
.seek.s4 .seek__img--table{transform:scale(1.24)}
.seek.s5 .seek__img--table{transform:scale(1.11)}
.seek.s6 .seek__img--table{transform:scale(1)}

.seek__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,23,20,.62) 0%,rgba(23,23,20,.14) 40%,rgba(23,23,20,.62) 100%);
  opacity:1;transition:opacity 900ms var(--ease);
}
.seek.s6 .seek__veil{opacity:0}

.seek__words{position:relative;z-index:2;text-align:center;padding-inline:var(--gut);pointer-events:none}
.seek__open,
.seek__list li{
  font-family:var(--display);color:var(--ivory);
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
}
.seek__open{font-size:clamp(28px,5.4vw,62px);line-height:1.08;letter-spacing:-.015em;margin:0}
html[lang="ar"] .seek__open{line-height:1.4;letter-spacing:0;font-weight:300}
.seek__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em 1.1em;justify-content:center}
.seek__list li{
  position:absolute;inset-inline:0;margin:0;
  font-size:clamp(30px,7vw,80px);line-height:1;letter-spacing:.02em;
}
html[lang="ar"] .seek__list li{letter-spacing:0;font-weight:300}
.seek__open[data-step="0"]{position:absolute;inset-inline:0}

.seek.s0 .seek__open,
.seek.s1 .seek__list li[data-step="1"],
.seek.s2 .seek__list li[data-step="2"],
.seek.s3 .seek__list li[data-step="3"],
.seek.s4 .seek__list li[data-step="4"],
.seek.s5 .seek__list li[data-step="5"]{opacity:1;transform:none}
/* step 6: everything goes, and she is left alone with it */

@media (prefers-reduced-motion:reduce){
  .seek{height:auto}
  .seek__sticky{position:static;height:auto;display:block}
  .seek__img{position:static;height:auto;transform:none;opacity:1}
  .seek__veil{display:none}
  .seek__words{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* ============ 01b — the ancient gaze, held behind the question ============ */
.sec--plate{background:var(--carbon);color:var(--ivory);overflow:hidden}
.sec--plate .lede{color:rgba(243,234,223,.7)}
.sec--plate .litany li{color:rgba(243,234,223,.5)}
.sec--plate .litany li:last-child{color:var(--ivory)}
.sec--plate .marks img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.sec--plate .wrap{position:relative;z-index:2}
.plate{position:absolute;inset:0;z-index:0}
.plate__img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:.42}
.plate__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,23,20,.92) 0%,rgba(23,23,20,.52) 22%,rgba(23,23,20,.78) 60%,rgba(23,23,20,.97) 100%);
}

/* ============ the three-level reveal ============
   Media 04 the table · Media 05 the sheet · then graphite becomes gold.
   Every step is a class, never an inline style. Tune the scales here. */
.seek{position:relative;background:var(--carbon)}
.seek--table{height:260vh}
.seek--sheet{height:260vh}
.seek--becoming{height:260vh}

.seek__sticky{position:static;height:auto;overflow:visible;display:block}
.seek__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1000ms var(--ease),opacity 900ms var(--ease);
}

/* Media 04 — the big reveal. A held frame, 8% of breath and no more. */
.seek__img--table{object-position:44% 50%;transform-origin:44% 50%;transform:scale(1.08)}
.seek--table.s1 .seek__img--table{transform:scale(1.066)}
.seek--table.s2 .seek__img--table{transform:scale(1.053)}
.seek--table.s3 .seek__img--table{transform:scale(1.040)}
.seek--table.s4 .seek__img--table{transform:scale(1.027)}
.seek--table.s5 .seek__img--table{transform:scale(1.013)}
.seek--table.s6 .seek__img--table{transform:scale(1)}

/* Media 05 — the dive. The table leaves the frame; the camera follows the paper. */
.seek__img--sheet{object-position:50% 34%;transform-origin:50% 34%;transform:scale(1)}
.seek--sheet.s1 .seek__img--sheet{transform:scale(1.16)}
.seek--sheet.s2 .seek__img--sheet{transform:scale(1.34);object-position:50% 46%;transform-origin:50% 46%}
.seek--sheet.s3 .seek__img--sheet{transform:scale(1.52);object-position:50% 58%;transform-origin:50% 58%}
.seek--sheet.s4 .seek__img--sheet{transform:scale(1.70);object-position:50% 72%;transform-origin:50% 72%}
.seek--sheet.s5 .seek__img--sheet{transform:scale(1.88);object-position:50% 84%;transform-origin:50% 84%}

/* the alignment — a single shot: the jewel lying on its own drawing */
.seek__film{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;
  transition:transform 1000ms var(--ease);
}
.seek__film--tall{display:block}
@media (orientation:landscape) and (min-width:760px){
  .seek__film--tall{display:none}
  .seek__film--wide{display:block}
}
.seek--becoming.s1 .seek__film{transform:scale(1.02)}
.seek--becoming.s2 .seek__film{transform:scale(1.04)}
.seek--becoming.s3 .seek__film{transform:scale(1.06)}


.seek__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,23,20,.58) 0%,rgba(23,23,20,.10) 38%,rgba(23,23,20,.62) 100%);
  opacity:1;transition:opacity 900ms var(--ease);
}
.seek--table.s6 .seek__veil,.seek--sheet.s5 .seek__veil{opacity:0}
/* just enough scrim at the foot of the frame to carry the three words,
   and nothing at all over the drawing turning to gold. */
.seek--becoming .seek__veil{
  opacity:1;
  background:linear-gradient(180deg,
    rgba(23,23,20,0) 0%,
    rgba(23,23,20,0) 52%,
    rgba(23,23,20,.30) 72%,
    rgba(23,23,20,.78) 100%);
}

.seek__words{position:relative;z-index:2;width:100%;text-align:center;padding-inline:var(--gut);pointer-events:none}
.seek__open,.seek__list li,.seek__formula{
  font-family:var(--display);color:var(--ivory);
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
}
.seek__open{position:absolute;inset-inline:0;font-size:clamp(28px,5.4vw,62px);line-height:1.08;letter-spacing:-.015em;margin:0}
html[lang="ar"] .seek__open{line-height:1.4;letter-spacing:0;font-weight:300}
.seek__list{list-style:none;margin:0;padding:0}
.seek__list li{position:absolute;inset-inline:0;margin:0;font-size:clamp(30px,6.4vw,72px);line-height:1.08}
html[lang="ar"] .seek__list li{font-weight:300}

/* Media 04: tiny words, low in the frame, surfacing around the evidence */
.seek__list--small li{
  font-family:var(--body);font-size:clamp(13px,2.2vw,20px);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;
  inset-block-start:auto;inset-block-end:8vh;
  text-shadow:0 2px 16px rgba(23,23,20,.55);
}
html[lang="ar"] .seek__list--small li{letter-spacing:0;font-weight:600;font-family:var(--display)}

.seek__formula{
  position:absolute;inset-inline:0;margin:0;
  font-size:clamp(15px,2.6vw,26px);font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;line-height:2.1;
}
html[lang="ar"] .seek__formula{letter-spacing:0;font-weight:300;line-height:1.9}

.seek.s0 .seek__open,
.seek.s1 .seek__list li[data-step="1"],
.seek.s2 .seek__list li[data-step="2"],
.seek.s3 .seek__list li[data-step="3"],
.seek.s4 .seek__list li[data-step="4"],
.seek.s5 .seek__list li[data-step="5"]{opacity:1;transform:none}
.seek--align.s3 .seek__formula,
.seek--align.s4 .seek__formula{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .seek{height:auto}
  .seek__sticky{position:static;height:auto;display:block}
  .seek__img{position:static;height:auto;transform:none;opacity:1}
  .seek__film--wide{display:none}
  .seek__veil{display:none}
  .seek__words{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* full-bleed photographs: never cover-crop a portrait frame on a phone,
   it puts the pendant outside the viewport. Show the whole picture. */
.sec--wide .wide__img{width:100%;height:auto;max-height:none}
@media (min-width:900px){
  .sec--wide{display:grid;place-items:center;background:var(--ivory)}
  .sec--wide .wide__img{width:auto;max-width:100%;max-height:96svh}
}

/* the formula lands one line at a time, on the moment it describes:
   gold arrives · color fills · the iris stays open */
.seek__list--formula li{
  font-family:var(--body);font-weight:700;
  font-size:clamp(14px,2.6vw,24px);letter-spacing:.28em;text-transform:uppercase;
  inset-block-start:auto;inset-block-end:9vh;
  text-shadow:0 2px 18px rgba(23,23,20,.6);
}
html[lang="ar"] .seek__list--formula li{letter-spacing:0;font-weight:400;font-family:var(--display);font-size:clamp(20px,4vw,34px)}
.seek--becoming.s1 .seek__list li[data-step="1"],
.seek--becoming.s2 .seek__list li[data-step="2"],
.seek--becoming.s3 .seek__list li[data-step="3"]{opacity:1;transform:none}

/* ============ the twelve, photographed ============ */
.sec--group{display:block;background:var(--ivory)}
.group__img{width:100%;height:auto}


/* ============ the constellation ============
   Twelve real pieces at true relative scale, each turning on its own axis.
   They turn three at a time, in four waves, driven by scroll. The geometry
   is the approved master on both faces — nothing here is regenerated. */
.seek--cst{height:280vh;background:var(--ivory)}
.seek--cst .seek__sticky{
  display:grid;grid-template-rows:1fr auto;align-content:center;
  padding-block:clamp(40px,7vh,80px) clamp(28px,6vh,64px);
}

.cst{
  --unit:clamp(3.2px,1vw,7px);
  position:relative;z-index:1;
  list-style:none;margin:0 auto;padding:0 var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(12px,3vw,44px);
  max-width:1180px;
  align-self:center;
}
.cst__i{margin:0}
.cst__box{position:relative;display:block;width:100%}
.cst__face{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 18px rgba(23,23,20,.20));
}
/* default, and what phones use: a straight cross-fade. cheap, no compositing. */
.cst__face--b{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--ease)}
.cst__face--f{transition:opacity 700ms var(--ease)}
.cst__i[data-turned="true"] .cst__face--b{opacity:1}
.cst__i[data-turned="true"] .cst__face--f{opacity:0}

/* desktop, where there is headroom: a real rotation */
@media (min-width:900px) and (hover:hover){
  .cst__i{perspective:900px}
  .cst__box{transform-style:preserve-3d;transition:transform 1000ms var(--ease)}
  .cst__i[data-turned="true"] .cst__box{transform:rotateY(180deg)}
  .cst__face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .cst__face--b{transform:rotateY(180deg);opacity:1;transition:none}
  .cst__face--f{transition:none}
  .cst__i[data-turned="true"] .cst__face--f{opacity:1}
}

/* true relative scale: width in millimeters */
.cst__i--w12{width:calc(12 * var(--unit))}
.cst__i--w13{width:calc(13 * var(--unit))}
.cst__i--w16{width:calc(16 * var(--unit))}
.cst__i--w18{width:calc(18 * var(--unit))}
.cst__i--w19{width:calc(19 * var(--unit))}
.cst__i--w20{width:calc(20 * var(--unit))}
.cst__i--w22{width:calc(22 * var(--unit))}
.cst__i--w25{width:calc(25 * var(--unit))}

/* break the grid just enough to read as a constellation */
.cst__i--o1{transform:translateY(-6%)}
.cst__i--o2{transform:translateY(5%)}
.cst__i--o3{transform:translateY(-2%)}

/* the copy */
.seek--cst .seek__words{position:relative;z-index:3;display:block}
.cst__line{
  font-family:var(--display);color:var(--green);margin:0;
  font-size:clamp(22px,4vw,46px);line-height:1.15;letter-spacing:-.015em;
}
.cst__line--close{margin-top:.5em;color:var(--green)}
html[lang="ar"] .cst__line{letter-spacing:0;line-height:1.4;font-weight:300}


@media (prefers-reduced-motion:reduce){
  .seek--cst{height:auto}
  .cst__i[data-turned="true"] .cst__box{transform:none}
  .cst__face--b{display:none}
  .cst__line--open{opacity:1;transform:none;position:static}
  .cst__line--close{position:static;opacity:1;transform:none;margin-top:1em}
}

/* ============ full-width plate ============ */
.sec--wide{display:block;background:var(--ivory)}
.wide__img{width:100%;height:auto}

/* ============ the signature ============ */
.signed{margin:clamp(40px,7vh,80px) 0 0}
.signed img{width:100%;height:auto;border-radius:2px;box-shadow:0 26px 56px rgba(23,23,20,.18)}
.signed figcaption{margin-top:16px}

/* ============ 02 — the site becomes a mishkah ============
   One room, one opening, one small object. Eight held beats. */
.seek--niche{height:420vh;background:#EFE4D6}
.seek--niche .seek__sticky{background:#EFE4D6}
/* the architecture never moves. only the light, and what is in it. */
.niche__pic{position:absolute;inset:0;display:block;transition:opacity 1600ms var(--ease)}
.niche__pic--seed{opacity:0}
.seek--niche.s4 .niche__pic--seed{opacity:.55}
.seek--niche.s5 .niche__pic--seed,
.seek--niche.s6 .niche__pic--seed,
.seek--niche.s7 .niche__pic--seed{opacity:1}
.niche__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transform-origin:62% 78%;
  transition:transform 1600ms var(--ease),filter 1600ms var(--ease);
  filter:brightness(.97);
}
.seek--niche.s2 .niche__img,.seek--niche.s3 .niche__img{filter:brightness(1.03)}
.seek--niche.s4 .niche__img,.seek--niche.s5 .niche__img{filter:brightness(1.05)}
.seek--niche.s6 .niche__img{transform:scale(1.02);filter:brightness(1.05)}
.seek--niche.s7 .niche__img{transform:scale(1);filter:brightness(1.05)}


.niche__words{
  position:relative;z-index:3;width:100%;
  padding-inline:var(--gut);text-align:center;pointer-events:none;
}
.niche__words p{
  position:absolute;inset-inline:0;margin:0;color:#3A2C1C;
  opacity:0;transform:translateY(12px);
  transition:opacity 1100ms var(--ease),transform 1100ms var(--ease);
}
.niche__ar{font-family:var(--display);font-size:clamp(44px,9vw,110px);line-height:1.3}
.niche__mark{font-family:var(--display);font-size:clamp(26px,4.4vw,52px);letter-spacing:.36em}
.niche__say{font-family:var(--display);font-size:clamp(20px,3.2vw,34px);line-height:1.35;max-width:24ch;margin-inline:auto !important}
.niche__say--big{font-size:clamp(24px,4.4vw,50px);line-height:1.15;letter-spacing:-.01em}
html[lang="ar"] .niche__mark{letter-spacing:0}
html[lang="ar"] .niche__say{line-height:1.6;font-weight:300}

.seek--niche.s0 .niche__ar,
.seek--niche.s1 .niche__mark,
.seek--niche.s2 .niche__words p[data-step="2"],
.seek--niche.s3 .niche__words p[data-step="3"],
.seek--niche.s4 .niche__words p[data-step="4"],
.seek--niche.s5 .niche__words p[data-step="5"],
.seek--niche.s6 .niche__words p[data-step="6"],
.seek--niche.s7 .niche__words p[data-step="7"]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .seek--niche{height:auto}
  .niche__img{position:static;transform:none;height:auto;filter:none}
  .niche__pic--empty{display:none}
  .niche__pic--seed{position:static;opacity:1}
  .niche__words p{position:static;opacity:1;transform:none;margin-bottom:1em}
}

/* ============ the invitation ============
   After everything else, emptiness. Warm ivory, one patch of moving light. */
.invite{
  position:relative;overflow:hidden;background:var(--ivory);
  min-height:100svh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(80px,14vh,150px);
}
.invite__sun{
  display:block;position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-18%;inset-inline-start:-14%;
  width:78%;height:96%;
  background:linear-gradient(112deg,rgba(255,246,228,0) 0%,rgba(255,243,216,.92) 38%,rgba(250,232,198,.55) 62%,rgba(243,234,223,0) 100%);
  filter:blur(26px);
  animation:sunmove 34s ease-in-out infinite alternate;
}
@keyframes sunmove{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(16%,9%) rotate(3deg)}
}
.invite__in{position:relative;z-index:1}

.invite__beat{font-family:var(--display);font-size:clamp(22px,3.4vw,36px);line-height:1.2;margin:0 0 clamp(30px,6vh,64px);color:var(--soft)}
.invite__date{font-family:var(--display);font-size:clamp(34px,7vw,80px);line-height:1.04;letter-spacing:-.02em;margin:0 0 clamp(28px,5vh,54px)}
.invite__three{font-family:var(--display);font-size:clamp(19px,2.8vw,28px);line-height:1.5;margin:0 0 clamp(44px,8vh,96px);color:var(--soft)}
html[lang="ar"] .invite__date{letter-spacing:0;line-height:1.34;font-weight:300}
html[lang="ar"] .invite__three{line-height:1.7}

.invite__ask{
  font-family:var(--display);
  font-size:clamp(21px,3.2vw,32px);line-height:1.3;letter-spacing:0;text-transform:none;
  color:var(--green);margin:0 0 30px;
}
html[lang="ar"] .invite__ask{font-size:clamp(20px,3.4vw,30px);line-height:1.6;font-weight:400}

.invite__form{
  display:grid;gap:16px;
  max-width:460px;margin:0 auto;text-align:start;
}
.invite__form input[type="email"],
.invite__form select{
  width:100%;padding:17px 18px;font:inherit;font-size:17px;line-height:1.3;
  color:var(--green);background:#FFFCF7;
  border:1px solid rgba(21,53,45,.30);border-radius:3px;
  text-align:start;appearance:none;-webkit-appearance:none;
  transition:border-color .2s,box-shadow .2s;
}
.invite__form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),
                   linear-gradient(135deg,var(--green) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-inline-end:46px;
}
html[dir="rtl"] .invite__form select{
  background-position:22px 24px,16px 24px;
  padding-inline-end:18px;padding-inline-start:46px;
}
.invite__form input::placeholder{color:rgba(21,53,45,.45)}
.invite__form input:focus,
.invite__form select:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(183,138,69,.18);
}

.invite__btn{
  width:100%;padding:19px 34px;margin-top:4px;
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory);background:var(--green);border-radius:2px;
  transition:background-color .2s,transform .15s;
}
html[lang="ar"] .invite__btn{letter-spacing:0;font-size:13px}
.invite__btn:hover{background:var(--carbon)}
.invite__btn:active{transform:translateY(1px)}
.invite__btn[disabled]{opacity:.55;cursor:progress}

.msg{margin:22px 0 0;min-height:1.4em}
.msg--ok{font-family:var(--display);font-size:clamp(24px,4vw,40px);line-height:1.2;color:var(--green)}
.msg--ok .msg__body{display:block;font-family:var(--body);font-size:15px;letter-spacing:0;color:var(--soft);margin-top:10px}
.msg--err{font-size:14px;color:#8C3B2E}

.invite__why{
  margin:28px auto 0;max-width:44ch;
  font-size:15px;line-height:1.65;color:rgba(21,53,45,.82);
}
.invite__sig{width:clamp(120px,15vw,180px);height:auto;margin:clamp(44px,8vh,88px) auto 0;opacity:.5}

@media (prefers-reduced-motion:reduce){.invite__sun{animation:none}}

/* ============ the doors ============
   Door one sits under the opening film for anyone who already knows.
   Door two sits at the peak of wanting one, right after the turn. */
.door{background:var(--ivory)}
.door__in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 20px;text-align:center}

.door--top{padding-block:clamp(18px,3vh,30px);border-bottom:1px solid var(--rule)}
.door__line{font-family:var(--display);font-size:clamp(16px,2.2vw,22px);margin:0;color:var(--green)}
.door__cta{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
html[lang="ar"] .door__cta{letter-spacing:0;font-size:13px}
.door__cta:hover{color:var(--green);border-color:var(--green)}

.door--mid{padding-block:clamp(64px,11vh,120px);text-align:center}
.door--mid .door__in{flex-direction:column;gap:0}
.door__big{
  font-family:var(--display);font-size:clamp(30px,5.6vw,64px);line-height:1.06;
  letter-spacing:-.015em;margin:0 0 20px;color:var(--green);
}
html[lang="ar"] .door__big{letter-spacing:0;line-height:1.34;font-weight:300}
.door__sub{margin:0 auto 34px;max-width:44ch;font-size:15px;line-height:1.6;color:var(--soft)}
.door__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 44px;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory);background:var(--green);border-radius:2px;
  transition:background-color .2s,transform .15s;
}
html[lang="ar"] .door__btn{letter-spacing:0;font-size:13px}
.door__btn:hover{background:var(--carbon)}
.door__btn:active{transform:translateY(1px)}

/* ============ the standing invitation ============
   Appears once the opening is behind you, and never leaves. */
.always{
  position:fixed;z-index:65;
  inset-block-end:16px;inset-inline-end:16px;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;text-decoration:none;border-radius:2px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory);background:rgba(21,53,45,.94);
  box-shadow:0 10px 30px rgba(23,23,20,.26);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background-color .2s;
}
html[lang="ar"] .always{letter-spacing:0;font-size:12px}
.always.is-on{opacity:1;transform:none;pointer-events:auto}
.always:hover{background:var(--carbon)}
.always__dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (min-width:900px){.always{inset-block-end:24px;inset-inline-end:24px;padding:13px 24px}}

/* ============ the thirty ============ */
.door__count,.invite__counter{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 .5em;
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#8A6520;margin:0 0 26px;
}
html[lang="ar"] .door__count,html[lang="ar"] .invite__counter{letter-spacing:0;font-size:15px;font-weight:600}
.door__n{
  font-family:var(--display);font-size:2.6em;font-weight:400;letter-spacing:0;
  line-height:1;color:var(--green);
}
.is-gone .door__n{opacity:.45}

.invite__label{
  display:block;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--green);margin:0 0 -8px;
}
.invite__form select{
  flex:1 1 100%;padding:16px 18px;font:inherit;font-size:16px;text-align:center;
  color:var(--green);background:transparent;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  appearance:none;-webkit-appearance:none;transition:border-color .25s;
}
.invite__form select:focus{outline:0;border-bottom-color:var(--gold)}

.share{margin:20px 0 0}
.share__btn{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
html[lang="ar"] .share__btn{letter-spacing:0;font-size:13px}
.share__btn:hover{color:var(--green);border-color:var(--green)}

/* ============ the proof ============
   Not styled, not staged. A tray on a bench, with a date on it. */
.proofshot{background:var(--carbon);padding-block:clamp(40px,7vh,84px);text-align:center}
.proofshot__img{
  width:min(100%,760px);height:auto;margin:0 auto;
  border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.proofshot__cap{
  margin:22px auto 0;max-width:44ch;padding-inline:var(--gut);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--limestone);
}
html[lang="ar"] .proofshot__cap{letter-spacing:0;font-size:13px}

/* ============ Media 13 — worn ============
   The only section on the site that is only bodies. */
.worn{background:var(--ivory);padding-block:clamp(70px,12vh,140px);border-top:1px solid var(--rule)}
.worn__head{max-width:56ch;margin:0 0 clamp(36px,6vw,64px)}
.worn__grid{
  list-style:none;margin:0;padding:0 var(--gut);
  display:grid;gap:clamp(12px,2vw,24px);
  grid-template-columns:1fr;
}
.worn__i{margin:0}
.worn__i img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block}
.worn__i--tall img{aspect-ratio:3/4}
.worn__i--wide img{aspect-ratio:4/3}
.worn__i--full img{aspect-ratio:16/9}
.worn__note{
  margin:clamp(28px,5vh,52px) 0 0;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
html[lang="ar"] .worn__note{letter-spacing:0;font-size:13px}

@media (min-width:760px){
  .worn__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .worn__i--full{grid-column:1 / -1}
}
@media (min-width:1100px){
  .worn__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .worn__i--wide{grid-column:span 2}
  .worn__i--wide img{aspect-ratio:16/10}
}

/* the film that opens Media 13 */
.worn__film{position:relative;margin:0 0 clamp(12px,2vw,24px);background:var(--carbon);overflow:hidden}
.worn__film video{width:100%;height:auto;display:block;max-height:82svh;object-fit:cover}
@media (min-width:760px){
  .worn__film{margin-inline:var(--gut)}
  .worn__film video{max-height:74svh}
}

/* how to reach the house */
.foot__mail{
  display:inline-block;margin-top:6px;
  color:var(--green);text-decoration:none;
  border-bottom:1px solid rgba(21,53,45,.28);padding-bottom:2px;
  transition:border-color .2s;
}
.foot__mail:hover{border-bottom-color:var(--gold)}
html[dir="rtl"] .foot__mail{direction:ltr;unicode-bidi:isolate}

/* ==========================================================================
   NO STICKY. iOS Safari detaches sticky panels when its toolbar resizes the
   viewport, and the detached panel paints over everything below it — which is
   how working drawings ended up on top of the signup form. Every scroll-pinned
   chapter is now an ordinary section: the media at its natural size, the words
   underneath, revealed on scroll. Nothing can escape its own section.
   ========================================================================== */
.seek{height:auto !important;background:var(--ivory)}
.seek--cst{background:var(--ivory)}
.seek__sticky{
  position:static !important;height:auto !important;overflow:visible;
  display:block;padding:0;
}
.seek__img,
.seek__film,
.niche__img{
  position:static !important;width:100% !important;height:auto !important;
  transform:none !important;opacity:1 !important;filter:none !important;
  object-fit:contain;display:block;
}
.seek__film{background:var(--carbon)}
.niche__pic{position:static !important;display:block}
.niche__pic--empty{display:none}
.seek__veil{display:none !important}

/* the words: below the picture, all present, no step gating */
.seek__words,
.niche__words{
  position:static !important;
  padding:clamp(30px,6vh,64px) var(--gut) clamp(36px,8vh,80px);
  text-align:center;pointer-events:auto;
}
.seek__open,
.seek__list li,
.seek__formula,
.cst__line,
.niche__words p{
  position:static !important;inset:auto !important;
  opacity:1 !important;transform:none !important;
  text-shadow:none !important;
}
.seek__open{color:var(--green);margin:0 0 .6em}
.seek__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.35em .9em}
.seek__list li{
  color:var(--green);font-size:clamp(18px,3.4vw,34px);line-height:1.2;
}
.seek__list--small li,
.seek__list--formula li{
  color:#8A6520;font-size:clamp(12px,2.2vw,16px);letter-spacing:.2em;
}
.seek__formula{
  color:#8A6520;font-size:clamp(13px,2.4vw,20px);line-height:1.9;letter-spacing:.2em;
}
.seek--becoming .seek__words{background:var(--carbon)}
.seek--becoming .seek__formula{color:var(--limestone)}
.niche__words p{color:#3A2C1C;margin:0 0 .7em}
.niche__ar,.niche__mark{margin-bottom:.35em}
.cst__line--close{margin-top:.4em}
.seek--cst .seek__sticky{padding-block:clamp(50px,9vh,100px)}
.cst{padding-inline:var(--gut)}

/* ==========================================================================
   READABILITY AND RHYTHM PASS
   Everything below overrides earlier rules on purpose. The faults being
   fixed: dim grey text on near-black, screen-high gaps between single
   lines, and body type set too small to read on a phone.
   ========================================================================== */

/* --- base type up --- */
body{font-size:17px;line-height:1.6}
.lede{font-size:clamp(17px,2.1vw,20px);line-height:1.62;color:rgba(21,53,45,.86)}
.eyebrow{font-size:12px;letter-spacing:.2em;color:#8A6520;margin-bottom:16px}
.note{font-size:13px}

/* --- headlines: smaller on a phone so a sentence is a sentence --- */
.d1{font-size:clamp(34px,7vw,84px);line-height:1.06}
.d2{font-size:clamp(27px,4.6vw,52px);line-height:1.1}
.d3{font-size:clamp(21px,3.1vw,34px);line-height:1.24}

/* --- the dead scroll: sections and beats were screen-high for one line --- */
.sec{padding-block:clamp(54px,8vh,100px)}
.beat{margin-bottom:clamp(26px,4.5vh,54px)}
.beat--hold{min-height:0}
.sec__head{margin-bottom:clamp(28px,4.5vw,52px)}

/* --- the litany was a full screen of scrolling for six short lines --- */
.litany li{
  font-size:clamp(19px,2.7vw,28px);line-height:1.35;
  padding-block:9px;color:rgba(21,53,45,.86);
}

/* --- dark chapters: legible, not near-black mush --- */
.sec--film,.sec--plate{background:#141410}
.sec--film .litany li,
.sec--plate .litany li{color:rgba(243,234,223,.88)}
.sec--film .litany li:last-child,
.sec--plate .litany li:last-child{color:#FFFDF8}
.sec--film .lede,.sec--plate .lede{color:rgba(243,234,223,.88)}
.sec--film .eyebrow,.sec--plate .eyebrow{color:#D9B979}
.sec--film .d1,.sec--film .d2,.sec--film .d3,
.sec--plate .d1,.sec--plate .d2,.sec--plate .d3{color:#FFFDF8}

/* let the imagery actually be seen behind the words */
.filmbed__video{opacity:.62}
.filmbed::after{
  background:linear-gradient(180deg,rgba(20,20,16,.90) 0%,rgba(20,20,16,.62) 30%,rgba(20,20,16,.62) 70%,rgba(20,20,16,.92) 100%);
}
.plate__img{opacity:.60}
.plate__veil{
  background:linear-gradient(180deg,rgba(20,20,16,.88) 0%,rgba(20,20,16,.58) 26%,rgba(20,20,16,.72) 62%,rgba(20,20,16,.94) 100%);
}

/* --- dark section on the turn --- */
.sec--dark{background:#141410}
.sec--dark .lede{color:rgba(243,234,223,.88)}
.sec--dark .eyebrow{color:#D9B979}
.sec--dark .d2,.sec--dark .d3{color:#FFFDF8}
.sec--dark .figure figcaption{color:rgba(243,234,223,.78)}

/* --- reveals were a full second; that reads as lag, not grace --- */
.rise{transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1);transform:translateY(12px)}

/* --- door two and the creed --- */
.door__sub{font-size:16px;color:rgba(21,53,45,.86)}
.creed span{font-size:16px;color:rgba(21,53,45,.86)}
.steps span{font-size:16px;color:rgba(21,53,45,.86)}

/* --- captions on dark --- */
.figure figcaption{font-size:13px}

/* the earth-and-gaze chapter: one screen of argument, not four of waiting */
.sec--plate .d1{margin:0 0 .5em}
.sec--plate .d2{margin:0 0 1.1em;color:rgba(243,234,223,.8)}
.sec--plate .litany{margin:clamp(24px,4vh,44px) 0}
.sec--plate .d3{margin-top:clamp(24px,4vh,44px)}

/* ==========================================================================
   LESS BLACK. The house is IVORY x DEEP GREEN x GOLD. Carbon is an accent,
   not a field. Every dark ground on the site is now Deep Green.
   ========================================================================== */
.sec--plate,.sec--film,.sec--dark,.proofshot,
.seek--becoming .seek__words,.seek__film{background:var(--green)}
.filmbed::after{
  background:linear-gradient(180deg,rgba(21,53,45,.92) 0%,rgba(21,53,45,.58) 30%,rgba(21,53,45,.58) 70%,rgba(21,53,45,.94) 100%);
}
.plate__veil{
  background:linear-gradient(180deg,rgba(21,53,45,.90) 0%,rgba(21,53,45,.56) 26%,rgba(21,53,45,.70) 62%,rgba(21,53,45,.95) 100%);
}
.open{background:var(--green)}
.open__film::after{
  background:linear-gradient(180deg,rgba(21,53,45,.60) 0%,rgba(21,53,45,.08) 34%,rgba(21,53,45,.20) 62%,rgba(21,53,45,.86) 100%);
}
.fragment{background:var(--green)}
.cst__face{filter:drop-shadow(0 10px 18px rgba(21,53,45,.18))}

/* the twelve reverses beside the claim */
.split .figure img{width:100%;height:auto}

/* ==========================================================================
   SCROLLING. Two faults: scroll-behavior:smooth animated every gesture and
   fought iOS momentum, and full-bleed portrait images were a screen and a
   half tall each, so a swipe appeared to change nothing.
   ========================================================================== */
html{scroll-behavior:auto}
body{overflow-x:clip}

/* no single image may be taller than the screen */
.wide__img,
.group__img,
.proofshot__img,
.seek__img,
.niche__img,
.split .figure img,
.worn__film video{
  max-height:78svh;
  width:100%;
  object-fit:cover;
  object-position:center;
}
.seek--becoming .seek__film{max-height:72svh;object-fit:contain}
.worn__i img{max-height:70svh}

/* sections that were forcing a full screen for very little content */
.invite{min-height:auto;padding-block:clamp(64px,11vh,120px)}
.last{min-height:auto;padding-block:clamp(70px,13vh,140px)}
.sec--wide{background:var(--ivory)}

@media (min-width:900px){
  .wide__img,.group__img,.proofshot__img,.seek__img,.niche__img,
  .split .figure img,.worn__film video,.worn__i img{max-height:88svh}
}

/* ==========================================================================
   BUILD 5 — final word on the collection chapter. These are the last
   declarations in the file, so nothing earlier can override them.
   ========================================================================== */
.seek--cst{background:var(--ivory) !important;height:auto !important}
.seek--cst .seek__sticky{padding-block:clamp(50px,9vh,100px)}
.seek--cst .cst__line{color:var(--green) !important;opacity:1 !important;transform:none !important;position:static !important}
.cst__face{filter:drop-shadow(0 8px 16px rgba(21,53,45,.16)) !important}
.seek--cst .seek__words{padding-top:clamp(28px,5vh,56px)}

/* ==========================================================================
   BUILD 5b — the collection cards, and a light snap between sections
   ========================================================================== */

/* The media area now has a real height instead of relying on aspect-ratio
   inside a centred grid item, which is what let the pendant spill over its
   own name. Both faces sit inside it and are contained, never cropped. */
.obj__stage{
  display:block;position:relative;
  padding:clamp(14px,3vw,26px) 8px clamp(12px,2vw,18px);
}
.obj__inner{
  display:block;position:relative;width:100%;
  height:clamp(112px,25vw,190px);
  aspect-ratio:auto;
}
.obj__face{
  display:grid;place-items:center;position:absolute;inset:0;
}
.obj__face img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.obj__name{display:block;margin:0;padding-top:2px}
.obj__line{display:block;min-height:0;margin:5px 0 0}
.obj{padding-bottom:clamp(14px,2.5vw,24px)}
@media (min-width:1200px){
  .obj__inner{height:clamp(150px,11vw,200px)}
}

/* The constellation media, same treatment */
.cst__box{display:block;position:relative}
.cst__face{max-width:100%;height:auto}

/* --- the light jump ---
   Proximity snapping: it assists when you finish a swipe near a section
   edge, and stays out of the way otherwise. Mandatory snapping traps a
   long page; proximity does not. */
html{scroll-snap-type:y proximity}
.open,
.door--mid,
.seek,
.sec,
.sec--wide,
.sec--group,
.worn,
.proofshot,
.invite,
.last{scroll-snap-align:start;scroll-snap-stop:normal}
/* short bands should never grab the scroll */
.door--top,.foot{scroll-snap-align:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
}

/* ==========================================================================
   BUILD 5c — the ask starts on the first screen
   ========================================================================== */
.open__date{
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:#E7C98A;margin:0 0 26px;
}
html[lang="ar"] .open__date{letter-spacing:0;font-size:14px}

.open__acts{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
  opacity:0;animation:reveal 1.6s var(--ease) 3.3s forwards;
}
.open__cta{animation:none;opacity:1}

/* primary: the one that collects the email */
.open__cta--go{
  background:var(--ivory);color:var(--green);border-color:var(--ivory);
  font-weight:700;padding:15px 32px;
}
.open__cta--go:hover{background:var(--limestone);border-color:var(--limestone)}

.open__why{
  margin:20px auto 0;max-width:34ch;
  font-size:13px;line-height:1.55;color:rgba(243,234,223,.72);
  opacity:0;animation:reveal 1.6s var(--ease) 3.7s forwards;
}
html[lang="ar"] .open__why{font-size:14px}

@media (prefers-reduced-motion:reduce){
  .open__acts,.open__why{opacity:1;animation:none}
}

/* ==========================================================================
   BUILD 5d
   1. door one was a hairline strip between two pictures — unreadable as a
      message. It is a proper band now.
   2. full-bleed portrait photographs were cropping to the middle, which on
      a phone is empty skin. They favour the upper third, where the jewel is.
   3. the becoming film was letterboxed inside a wide green field.
   ========================================================================== */

/* 1 — door one */
.door--top{
  background:var(--green);border-bottom:0;
  padding-block:clamp(28px,5vh,46px);
}
.door--top .door__in{
  flex-direction:column;gap:14px;text-align:center;
}
.door--top .door__line{
  font-family:var(--display);color:var(--ivory);
  font-size:clamp(21px,3.4vw,34px);line-height:1.2;margin:0;
}
.door--top .door__cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 34px;border:0;border-radius:2px;
  background:var(--ivory);color:var(--green);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:background-color .2s;
}
html[lang="ar"] .door--top .door__cta{letter-spacing:0;font-size:14px}
.door--top .door__cta:hover{background:var(--limestone);color:var(--green)}
.door--top::after{
  content:"";display:block;width:100%;max-width:520px;margin:18px auto 0;
  height:1px;background:rgba(243,234,223,.22);
}

/* 2 — frame portrait photographs on the jewelry, not the empty skin */
.sec--wide .wide__img{object-position:50% 32%}
.worn__i img{object-position:50% 38%}

/* 3 — the becoming film fills its band instead of floating in green */
.seek--becoming .seek__film{
  max-height:74svh;object-fit:cover;width:100%;
}
@media (min-width:900px){
  .seek--becoming .seek__film{object-fit:contain;max-height:86svh}
}

/* ==========================================================================
   BUILD 5e — one crop, cropped properly
   An earlier override set display:block on every .seek__film, which undid
   the rule hiding the crop the viewport is not meant to show. That is why
   the vertical film and the landscape film were both on screen, one after
   the other. And height:auto !important meant object-fit had nothing to
   crop, so the film letterboxed inside a green field with a screen of
   empty paper below the pendant.
   ========================================================================== */
.seek__film--wide{display:none !important}
.seek__film--tall{display:block !important}
@media (min-width:760px) and (orientation:landscape){
  .seek__film--tall{display:none !important}
  .seek__film--wide{display:block !important}
}

.seek--becoming .seek__film{
  height:min(70svh,520px) !important;
  width:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:50% 38% !important;
  background:var(--green);
}
@media (min-width:900px){
  .seek--becoming .seek__film{
    height:min(84svh,760px) !important;
    object-fit:contain !important;
  }
}

/* ==========================================================================
   BUILD 5f — full-bleed photographs must never touch each other
   ========================================================================== */
.group{margin-block:clamp(30px,5vw,56px)}
.group img{width:100%;height:auto;max-height:78svh;object-fit:cover;object-position:center}
@media (min-width:900px){.group img{max-height:86svh}}

/* a band of ground wherever two edge-to-edge pictures would meet */
.sec--wide + .sec--wide,
.sec--wide + .sec--group,
.sec--group + .sec--wide,
.sec--wide + .proofshot,
.proofshot + .sec--wide{border-top:0}
.sec--wide{padding-block:clamp(18px,3vh,34px)}
.sec--wide:first-of-type{padding-top:0}

/* and the hint sits under the group plate now */
.hint{margin-top:clamp(18px,3vh,30px)}

/* ==========================================================================
   BUILD 5g — the two-sides claim, third screen
   ========================================================================== */
.twosides{background:var(--green);padding-bottom:clamp(48px,8vh,88px)}
.twosides__film{background:var(--green);overflow:hidden;margin-bottom:clamp(30px,5vh,56px)}
.twosides__film video{
  display:block;width:100%;
  height:min(72svh,560px);object-fit:cover;object-position:50% 40%;
}
.twosides .eyebrow{color:#D9B979}
.twosides .d2{color:#FFFDF8;margin-bottom:.5em}
.twosides .lede{color:rgba(243,234,223,.88);max-width:52ch}
@media (min-width:900px){
  .twosides__film video{height:min(84svh,720px)}
}

/* ==========================================================================
   BUILD 6 — the collection card, stated once, unambiguously.
   Earlier in this file the same selectors are declared twice with different
   values. These are the last, and they carry !important so no accident of
   order can undo them again.
   ========================================================================== */
.obj__btn{display:block;width:100%;text-align:center}
.obj__stage{display:block !important;position:relative !important;padding:clamp(12px,3vw,24px) 8px clamp(10px,2vw,16px) !important}
.obj__inner{
  display:block !important;position:relative !important;
  width:100% !important;
  height:clamp(104px,24vw,180px) !important;
  aspect-ratio:auto !important;
}
.obj__face{
  position:absolute !important;inset:0 !important;
  display:block !important;
}
.obj__face img{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  object-fit:contain !important;object-position:center !important;
}
.obj__name{display:block !important;margin:0 !important;padding-top:4px}
.obj__line{display:block !important;margin:5px 0 0 !important;min-height:0 !important}
@media (min-width:1200px){
  .obj__inner{height:clamp(140px,10vw,190px) !important}
}

/* same guarantee for the constellation */
.cst__box{display:block !important;position:relative !important}
.cst__face--f{position:relative !important;width:100% !important;height:auto !important}
.cst__face--b{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:contain !important}

/* ==========================================================================
   BUILD 7 — the collection card, rebuilt in normal flow.
   The old markup put both faces in absolute position inside a box whose
   height was declared. If that height ever failed to resolve, the box
   collapsed to nothing, the images kept their natural size, and the name
   and sentence flowed up underneath them. That is the overlap.
   Now the FRONT image is an ordinary image in the flow: it creates the
   height itself, so there is nothing left to collapse. The back sits on
   top of it. New class names, so no earlier rule in this file — or in any
   stylesheet a browser has cached — can reach them.
   ========================================================================== */
.card{margin:0;padding-bottom:clamp(12px,2.4vw,22px)}
.card__btn{
  display:block;width:100%;text-align:center;padding:0;
  border:0;background:none;cursor:pointer;border-radius:3px;
  transition:background-color .25s;
}
.card__btn:hover,.card__btn:focus-visible{background:rgba(216,199,179,.30)}
.card__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.card__media{
  display:block;position:relative;
  padding:clamp(10px,2.6vw,20px) 10px clamp(8px,1.6vw,14px);
}
.card__front,
.card__back{
  display:block;width:100%;height:auto;
  max-height:clamp(110px,25vw,180px);
  object-fit:contain;object-position:center;
  transition:opacity .45s ease;
}
.card__back{
  position:absolute;
  inset:clamp(10px,2.6vw,20px) 10px clamp(8px,1.6vw,14px) 10px;
  width:auto;height:auto;max-width:calc(100% - 20px);
  opacity:0;
}
.card__btn[aria-pressed="true"] .card__front{opacity:0}
.card__btn[aria-pressed="true"] .card__back{opacity:1}

.card__name{
  display:block;font-family:var(--display);
  font-size:clamp(15px,2.1vw,21px);line-height:1.25;
  color:var(--green);margin:6px 0 0;
}
.card__line{
  display:block;font-size:12px;line-height:1.45;
  color:rgba(21,53,45,.74);margin:4px 0 0;
}
@media (min-width:1200px){
  .card__front,.card__back{max-height:170px}
}

/* ==========================================================================
   BUILD 7 — motion. Scroll-snap was the jag: on iOS, proximity snapping on
   a long page grabs at the end of every gesture. Gone. What makes a page
   feel alive is not the scroll fighting you — it is content arriving just
   ahead of you, quickly.
   ========================================================================== */
html{scroll-snap-type:none !important}
.open,.door--mid,.seek,.sec,.sec--wide,.sec--group,.worn,
.proofshot,.invite,.last,.twosides{scroll-snap-align:none !important}

/* fast, short, and it starts before the element is in view */
.rise{
  opacity:0;transform:translateY(16px);
  transition:opacity .34s ease-out,transform .34s cubic-bezier(.22,.61,.36,1);
}
.rise.is-in{opacity:1;transform:none;will-change:auto}

/* children of a revealed block arrive one after another, 60ms apart */
.rise.is-in > * { animation:riseIn .38s cubic-bezier(.22,.61,.36,1) both }
.rise.is-in > *:nth-child(2){animation-delay:.06s}
.rise.is-in > *:nth-child(3){animation-delay:.12s}
.rise.is-in > *:nth-child(4){animation-delay:.18s}
.rise.is-in > *:nth-child(5){animation-delay:.24s}
.rise.is-in > *:nth-child(6){animation-delay:.30s}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the twelve arrive in sequence rather than all at once */
.gallery .card{opacity:0;transform:translateY(14px)}
.gallery.is-in .card{animation:riseIn .4s cubic-bezier(.22,.61,.36,1) both}
.gallery.is-in .card:nth-child(1){animation-delay:.00s}
.gallery.is-in .card:nth-child(2){animation-delay:.04s}
.gallery.is-in .card:nth-child(3){animation-delay:.08s}
.gallery.is-in .card:nth-child(4){animation-delay:.12s}
.gallery.is-in .card:nth-child(5){animation-delay:.16s}
.gallery.is-in .card:nth-child(6){animation-delay:.20s}
.gallery.is-in .card:nth-child(7){animation-delay:.24s}
.gallery.is-in .card:nth-child(8){animation-delay:.28s}
.gallery.is-in .card:nth-child(9){animation-delay:.32s}
.gallery.is-in .card:nth-child(10){animation-delay:.36s}
.gallery.is-in .card:nth-child(11){animation-delay:.40s}
.gallery.is-in .card:nth-child(12){animation-delay:.44s}

@media (prefers-reduced-motion:reduce){
  .rise,.rise.is-in > *,.gallery .card,.gallery.is-in .card{
    opacity:1 !important;transform:none !important;animation:none !important;
  }
}

/* ==========================================================================
   BUILD 8 — THE TURN
   The twelve, moved to the top of the page and turning continuously.

   New class namespace on purpose. Every earlier rule in this file addresses
   .cst / .seek--cst, several of them with !important. None of them can
   reach .tw, so this block is self-contained and nothing above can undo it.

   Three faults are being fixed:
   1. The rotation was gated behind (min-width:900px) and (hover:hover), so
      a phone never rotated anything — it cross-faded two gold objects on
      ivory, which reads as nothing happening. 3D now runs at every width.
   2. The wave sequence ran once and disconnected its observer, so the
      twelve turned to their backs and stayed there for the rest of the
      session. It is now an autonomous loop.
   3. The layout was flex-wrap with no defined columns, so twelve items of
      unequal width fell into whatever rows the viewport produced —
      3/4/4/1 on a phone, with an orphan. It is now a grid: 3 columns on a
      phone, 4 on a tablet, 6 on a desktop, always full rows.

   No filter anywhere inside the 3D context. drop-shadow on a face with
   backface-visibility:hidden flattens the rotation in Safari, and it
   recomputes every frame. The ground shadow is a static pseudo-element.
   ========================================================================== */

.tw{
  background:var(--ivory);
  padding-block:clamp(46px,8vh,104px) clamp(38px,7vh,88px);
  overflow:hidden;
}
.tw__in{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}

/* ---- the field ---- */

.tw__field{
  /* --u is millimeters to pixels. It is tuned so the widest piece (the Fish,
     25 mm) exactly fills a column at every width — no stepped breakpoint,
     because a step always overflows just above it. */
  --u:clamp(3.5px,1.05vw,7.6px);
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,5vw,34px) clamp(8px,2.5vw,18px);
  align-items:center;
  justify-items:center;
}
@media (min-width:700px){
  .tw__field{
    --u:clamp(4.5px,.78vw,8px);
    grid-template-columns:repeat(4,1fr);
  }
}
@media (min-width:1000px){
  .tw__in{max-width:1320px;padding-inline:clamp(28px,3vw,56px)}
  .tw__field{
    --u:clamp(5px,.52vw,7.2px);
    grid-template-columns:repeat(6,1fr);
    gap:clamp(26px,3.4vw,46px) clamp(14px,2.2vw,28px);
  }
}

/* ---- one piece ----
   Width is the real millimeter width of the jewel; height follows the
   aspect of its own front master. The Fish is twice the Arc here because
   it is twice the Arc in the hand. */

.tw__i{
  position:relative;
  margin:0;
  width:calc(var(--mm) * var(--u));
  aspect-ratio:var(--ar);
  perspective:1100px;
}

/* the ground: static, never recomputed, never traced against alpha */
.tw__i::after{
  content:"";
  position:absolute;
  left:14%;right:14%;bottom:-7%;
  height:9%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(21,53,45,.20),rgba(21,53,45,0) 72%);
  z-index:-1;
  pointer-events:none;
}

/* break the row just enough to read as a constellation rather than a chart */
.tw__i:nth-child(3n+1){transform:translateY(-5%)}
.tw__i:nth-child(3n+2){transform:translateY(4%)}
.tw__i:nth-child(3n+3){transform:translateY(-1%)}

.tw__box{
  position:relative;
  display:block;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform 950ms var(--ease);
}
.tw__i[data-turned="true"] .tw__box{transform:rotateY(180deg)}

.tw__face{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.tw__face--b{transform:rotateY(180deg)}

/* only what is actually turning gets promoted */
.tw__i[data-moving="true"] .tw__box{will-change:transform}

/* ---- the words, under the objects ---- */

.tw__words{
  text-align:center;
  padding-top:clamp(34px,6vh,68px);
}
.tw__line{
  font-family:var(--display);
  color:var(--green);
  margin:0;
  font-weight:400;
  font-size:clamp(26px,5.6vw,50px);
  line-height:1.14;
  letter-spacing:-.015em;
}
.tw__line--close{
  margin-top:.42em;
  color:var(--gold);
}
html[lang="ar"] .tw__line{letter-spacing:0;line-height:1.5;font-weight:300}

/* ---- stillness on request ---- */

@media (prefers-reduced-motion:reduce){
  .tw__box{transition:none}
  .tw__i[data-turned="true"] .tw__box{transform:none}
  .tw__face--b{display:none}
  .tw__i:nth-child(3n+1),
  .tw__i:nth-child(3n+2),
  .tw__i:nth-child(3n+3){transform:none}
}

/* ---- true relative scale: mm width, and the aspect of each front master ---- */

.tw__i--01{--mm:25;--ar:495/368}
.tw__i--02{--mm:12;--ar:227/556}
.tw__i--03{--mm:22;--ar:387/556}
.tw__i--04{--mm:22;--ar:392/556}
.tw__i--05{--mm:12;--ar:238/395}
.tw__i--06{--mm:22;--ar:436/333}
.tw__i--07{--mm:16;--ar:386/678}
.tw__i--08{--mm:19;--ar:376/472}
.tw__i--09{--mm:18;--ar:356/446}
.tw__i--10{--mm:20;--ar:351/527}
.tw__i--11{--mm:22;--ar:408/535}
.tw__i--12{--mm:13;--ar:256/540}

/* ==========================================================================
   BUILD 9 — never crop the objects

   An earlier pass capped every large image at 78svh with object-fit:cover to
   stop full-bleed portraits running a screen and a half. Sound for
   photography of a person: a shoulder or a hand can leave the frame without
   loss. Wrong for a flat-lay of the twelve, where cover ate the top and
   bottom rows and left pendants sliced through — the picture reads as an
   accident rather than a composition.

   So the rule now splits by subject. Photographs of skin, light and place
   may still be cropped to fit. A photograph whose subject is the objects
   themselves is shown whole, at its own aspect, however tall that makes it.
   ========================================================================== */

.group img,
.group__img,
.split .figure img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
}
@media (min-width:900px){
  .group img,
  .group__img,
  .split .figure img{max-height:none}
}

/* ==========================================================================
   BUILD 10 — TYPOGRAPHY

   The copy on this site was not being read. Four causes, in order of damage.

   1. The house line — "Memory, given light again" — was set at 12px,
      uppercase, tracked to .3em. That is the typographic signature of a
      caption, and an eye trained on the web skips captions. The single most
      important sentence in the house was formatted as something to ignore.
      It is now a display sentence, because it is one.

   2. Body copy was dimmed to 86% green. Dimming body text is the most
      common way a beautiful site goes unread: the eye reads contrast as
      importance, so faded text is understood as optional before a word of
      it is parsed. Body is now full strength; only captions and notes are
      dimmed, because those genuinely are optional.

   3. There was no step between a 52px headline and a 20px paragraph — a
      2.6x drop with nothing in between. The eye lands on the headline, finds
      no landing place beneath it, and leaves. The paragraph that follows a
      headline is now a deck: larger, in the display face, one clear rung
      down. It catches the eye and hands it to the body.

   4. Instrument Serif is a display face with one weight and thin joins. At
      27px on a phone — where most of these headlines actually live — it goes
      limp, and it is the most-used free editorial serif on the web, so it
      reads as a default rather than a decision.

   THE FACES

   Fraunces for display. Variable, with an optical-size axis, so a headline
   at 60px gets high contrast and elegance while a card name at 16px gets a
   sturdier cut of the same letterforms — one voice that stays itself at
   every size, which is what a house needs and what a single-weight face
   cannot give. Drawn from early-20th-century advertising serifs: warmth
   held inside structure. Gold draws, color lives.

   Instrument Sans for reading. Taller x-height than Karla at the same
   nominal size, which is a measurable legibility gain at 18px on a phone,
   and quieter letterforms — it carries meaning without competing for voice.

   Readex Pro stays for Arabic. It is among the best Arabic screen faces
   there is: low contrast, open counters, legible small. But it was set at
   weight 300 for every Arabic headline, and Arabic at 300 on ivory has no
   color on the page — the strokes are too fine to hold. Arabic headlines
   now sit at 400, body at 400, which is where this face is drawn to be.
   ========================================================================== */

:root{
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
html[lang="ar"]{--display:"Readex Pro",system-ui,sans-serif;--body:"Readex Pro",system-ui,sans-serif}

.d1,.d2,.d3,.litany li,.card__name,.tw__line,.seek__open,.seek__list li,.cst__line{
  font-optical-sizing:auto;
}

/* ---- 1. the opening: the house line is a sentence, so it is set as one ---- */

.open__line{
  font-family:var(--display);
  font-size:clamp(30px,7.4vw,66px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.02em;
  text-transform:none;
  color:var(--ivory);
  max-width:14ch;
  margin:4px auto 30px;
}
html[lang="ar"] .open__line{
  font-size:clamp(26px,6.4vw,56px);
  letter-spacing:0;line-height:1.45;font-weight:400;max-width:16ch;
}

/* the date steps back so the line can lead */
.open__date{
  font-size:11px;letter-spacing:.26em;font-weight:600;
  color:rgba(231,201,138,.92);margin:0 0 24px;
}
html[lang="ar"] .open__date{font-size:13px;letter-spacing:0;font-weight:500}

/* ---- 2. body copy at full strength ---- */

body{font-size:18px;line-height:1.62;letter-spacing:-.002em}
@media (min-width:900px){body{font-size:18px}}

.lede{
  font-size:clamp(17px,1.9vw,19px);
  line-height:1.68;
  color:var(--green);
  max-width:58ch;
  margin:0 0 20px;
}
html[lang="ar"] .lede{line-height:1.95;letter-spacing:0}

/* dimming belongs to the genuinely optional */
.figure figcaption,.note,.open__why,.card__line{color:rgba(21,53,45,.66)}
.sec--dark .figure figcaption,
.sec--dark .note{color:rgba(243,234,223,.62)}
.open__why{color:rgba(243,234,223,.68)}
.sec--dark .lede,.sec--film .lede,.sec--plate .lede{color:rgba(243,234,223,.94)}

/* ---- 3. the missing rung: the paragraph under a headline is a deck ---- */

.d2 + .lede,
.d3 + .lede,
.lede--deck{
  font-family:var(--display);
  font-size:clamp(19px,2.5vw,23px);
  line-height:1.44;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--green);
  max-width:38ch;
}
html[lang="ar"] .d2 + .lede,
html[lang="ar"] .d3 + .lede,
html[lang="ar"] .lede--deck{
  font-size:clamp(18px,2.5vw,23px);
  line-height:1.72;letter-spacing:0;font-weight:400;max-width:42ch;
}
.sec--dark .d2 + .lede,
.sec--film .d2 + .lede,
.sec--plate .d2 + .lede{color:#FFFDF8}

/* the first line carries a touch more weight — the eye needs somewhere to
   land after a headline, and this is the quietest way to give it one */
.lede::first-line{font-weight:500}

/* ---- 4. the scale ---- */

.d1{font-family:var(--display);font-weight:400;font-size:clamp(38px,7.6vw,88px);line-height:1.02;letter-spacing:-.025em}
.d2{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,56px);line-height:1.08;letter-spacing:-.02em;margin:0 0 20px}
.d3{font-family:var(--display);font-weight:400;font-size:clamp(23px,3.2vw,36px);line-height:1.2;letter-spacing:-.015em;margin:0 0 16px}
html[lang="ar"] .d1{font-weight:400;line-height:1.34;letter-spacing:0}
html[lang="ar"] .d2{font-weight:400;line-height:1.46;letter-spacing:0;font-size:clamp(26px,4.4vw,48px)}
html[lang="ar"] .d3{font-weight:400;line-height:1.5;letter-spacing:0}

.litany li{font-family:var(--display);font-size:clamp(20px,2.8vw,30px);line-height:1.42;color:var(--green)}
.litany li:last-child{color:var(--gold)}

.card__name{font-weight:400;font-size:clamp(16px,2.1vw,21px);letter-spacing:-.01em}
.card__line{font-size:12.5px;line-height:1.5}

.tw__line{font-weight:400}

/* ---- 5. a chapter announces itself ----
   The eyebrow was a floating label. A short gold rule in front of it reads
   as the start of something, which is the cheapest way to tell an eye that
   is scrolling past that there is a beginning here. ---- */

.eyebrow{
  display:flex;align-items:flex-start;gap:12px;
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  line-height:1.5;
  color:#8A6520;margin:0 0 18px;
}
.eyebrow::before{
  content:"";flex:0 0 auto;width:26px;height:1px;background:currentColor;opacity:.85;
  align-self:flex-start;margin-top:.62em;
}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:13px;font-weight:600}
.sec--dark .eyebrow,.sec--film .eyebrow,.sec--plate .eyebrow{color:#E0C289}

/* centred chapters keep the rule centred with them */
.open__in .eyebrow,
.tw__words .eyebrow,
.seek__words .eyebrow{justify-content:center}

/* ---- 6. buttons: readable, not shouted ---- */

.open__cta,.door__cta,.door__btn,.btn,.always{
  font-family:var(--body);
  font-size:12px;font-weight:600;letter-spacing:.16em;
}
html[lang="ar"] .open__cta,
html[lang="ar"] .door__cta,
html[lang="ar"] .door__btn,
html[lang="ar"] .btn,
html[lang="ar"] .always{letter-spacing:0;font-size:14px;font-weight:500}

.hint{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.18em}
html[lang="ar"] .hint{letter-spacing:0;font-size:13px;font-weight:500}

/* ==========================================================================
   BUILD 11 — THE INDEX

   The twelve used to appear twice, both turnable: once turning by themselves
   at the top of the page, then again as a grid asking to be tapped. The
   discovery was spent before the interaction arrived, and a second grid of
   the same objects taught the reader nothing new.

   So the second grid loses its pictures and keeps what only it had — the
   names, and the sentence each piece is built on. It becomes an index: the
   one place on this page that is only reading. Coming after two chapters of
   photography, a plain column of type is a change of pace, and a change of
   pace is what makes someone slow down enough to read.

   The numbering is not decoration. This collection has an order — the Fish
   is 01, the Vessel is 12 — so the figures carry real information.
   ========================================================================== */

.index{
  list-style:none;
  margin:clamp(34px,6vh,64px) 0 0;
  padding:0;
  border-top:1px solid var(--rule);
  max-width:1180px;
}

.index__i{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"n name" ". line";
  column-gap:clamp(14px,3vw,26px);
  row-gap:2px;
  align-items:baseline;
  padding-block:clamp(14px,2.4vw,20px);
  border-bottom:1px solid var(--rule);
}

.index__n{
  grid-area:n;
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.18em;
  color:#8A6520;
  font-variant-numeric:tabular-nums;
}
html[lang="ar"] .index__n{letter-spacing:0;font-size:13px;font-weight:500}

.index__name{
  grid-area:name;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(22px,3.4vw,34px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--green);
  font-optical-sizing:auto;
}
html[lang="ar"] .index__name{letter-spacing:0;line-height:1.44;font-weight:400}

.index__line{
  grid-area:line;
  font-family:var(--body);
  font-size:clamp(14px,1.7vw,16px);
  line-height:1.5;
  color:rgba(21,53,45,.72);
}
html[lang="ar"] .index__line{font-size:clamp(14px,1.8vw,16px);line-height:1.85}

/* on a wide screen the sentence sits beside the name rather than beneath it,
   so the twelve read as a single column of pairs instead of twenty-four rows */
@media (min-width:820px){
  .index__i{
    grid-template-columns:auto minmax(0,9.5em) minmax(0,1fr);
    grid-template-areas:"n name line";
    align-items:baseline;
    column-gap:clamp(20px,3vw,44px);
  }
  .index__line{padding-bottom:.15em}
}

/* the twelve arrive in sequence, as the cards used to */
.index__i{opacity:0;transform:translateY(12px)}
.index.is-in .index__i{animation:riseIn .38s cubic-bezier(.22,.61,.36,1) both}
.index.is-in .index__i:nth-child(1){animation-delay:.00s}
.index.is-in .index__i:nth-child(2){animation-delay:.035s}
.index.is-in .index__i:nth-child(3){animation-delay:.07s}
.index.is-in .index__i:nth-child(4){animation-delay:.105s}
.index.is-in .index__i:nth-child(5){animation-delay:.14s}
.index.is-in .index__i:nth-child(6){animation-delay:.175s}
.index.is-in .index__i:nth-child(7){animation-delay:.21s}
.index.is-in .index__i:nth-child(8){animation-delay:.245s}
.index.is-in .index__i:nth-child(9){animation-delay:.28s}
.index.is-in .index__i:nth-child(10){animation-delay:.315s}
.index.is-in .index__i:nth-child(11){animation-delay:.35s}
.index.is-in .index__i:nth-child(12){animation-delay:.385s}

@media (prefers-reduced-motion:reduce){
  .index__i{opacity:1;transform:none;animation:none !important}
}

/* ==========================================================================
   BUILD 12 — THE FOUNDER

   The house was everywhere on this page and the person who made it was
   nowhere: a signature at the form, a credit line under a paragraph, a
   photograph of a working table. All true, all scattered, none of it adding
   up to a person. For a house this personal that is a missing chapter, not
   a stylistic choice.

   It sits immediately before the form on purpose. You meet whoever made the
   thing, and then you are asked for your email. In that order the ask reads
   as an introduction rather than a transaction.

   The signature is the one piece of genuinely hand-made artwork on the site,
   so it leads rather than hiding at 50% opacity in a footer.
   ========================================================================== */

.founder{background:var(--ivory)}

.founder__id{
  margin:0 0 clamp(24px,4vh,40px);
  padding-bottom:clamp(20px,3vh,32px);
  border-bottom:1px solid var(--rule);
}

.founder__name{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(34px,6vw,64px);
  line-height:1.04;
  letter-spacing:-.025em;
  color:var(--green);
  margin:0;
}
html[lang="ar"] .founder__name{letter-spacing:0;line-height:1.34;font-weight:400}

/* the other script, quieter — the house is bilingual, not translated */
.founder__ar{
  font-family:"Readex Pro",system-ui,sans-serif;
  font-size:clamp(17px,2.4vw,24px);
  font-weight:400;
  line-height:1.6;
  color:rgba(21,53,45,.6);
  margin:6px 0 0;
}
html[lang="ar"] .founder__ar{
  font-family:var(--display);
  letter-spacing:-.01em;
}

.founder__where{
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#8A6520;margin:14px 0 0;
}
html[lang="ar"] .founder__where{letter-spacing:0;font-size:13px;font-weight:500}

/* her question, set as the pivot of the chapter */
.founder__q{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(24px,4.2vw,42px);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--green);
  max-width:22ch;
  margin:clamp(30px,5vh,54px) 0 clamp(26px,4vh,44px);
  padding-inline-start:clamp(16px,3vw,28px);
  border-inline-start:1px solid var(--gold);
}
html[lang="ar"] .founder__q{
  letter-spacing:0;line-height:1.5;font-weight:400;max-width:26ch;
}

.founder__sig{
  display:block;
  width:clamp(150px,22vw,240px);
  height:auto;
  color:var(--green);
  margin:clamp(34px,6vh,64px) 0 14px;
  opacity:.82;
}
html[dir="rtl"] .founder__sig{margin-inline:0 auto}

.founder .sig{color:#8A6520}

/* credentials as a fact, not an argument. Set small and late: a jewelry house
   that opens by listing its degrees is asking permission. One line, after the
   story, where it reassures anyone paying before the pieces exist. */
.founder__cv{
  font-family:var(--body);
  font-size:12.5px;line-height:1.7;
  letter-spacing:.02em;
  color:rgba(21,53,45,.58);
  max-width:46ch;
  margin:clamp(30px,5vh,52px) 0 0;
  padding-top:clamp(18px,3vh,28px);
  border-top:1px solid var(--rule);
}
html[lang="ar"] .founder__cv{font-size:13.5px;line-height:2;letter-spacing:0}

/* ==========================================================================
   BUILD 13 — THE LOCKED MARKS

   The three archive stars on this page were a hand-drawn eight-point star in a
   24-unit box, not the house girih star. A redrawn mark is still a redrawn mark
   at 18 px. They now carry the locked artwork from the logo pack, which is a
   sixteen-sided rosette with an inner cutout — hence fill-rule evenodd.

   The full pack now sits at assets/img/logo/ so the locked files travel with
   the site rather than living in someone's downloads folder.
   ========================================================================== */

.star svg{fill-rule:evenodd}

/* ==========================================================================
   BUILD 14 — the caption that could not be read, and the signature that
   could not be seen.

   1. The note naming which pieces are reverses was set at 11 px, uppercase,
      tracked to .22em, and placed under the photographs. Two faults in one
      line: at that tracking a forty-word sentence is wide enough to run past
      a phone screen and get clipped at both edges, and uppercase tracked type
      reads as a label, so even uncropped it was skipped. It is the most
      surprising fact on the page — that three of these are backs — so it now
      sits above the images, in the display face, at a size a person reads.

   2. The signature was at 50% opacity. A signature is the one hand-made mark
      in the whole identity; faded to half strength on ivory it disappears.
      Both signatures now sit at full weight, in Deep Green rather than a
      washed-out grey, and larger.
   ========================================================================== */

.worn__note{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(17px,2.4vw,22px);
  line-height:1.36;
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:none;
  color:#8A6520;
  text-align:start;
  max-width:34ch;
  margin:clamp(18px,3vh,28px) 0 0;
  overflow-wrap:break-word;
}
html[lang="ar"] .worn__note{
  font-size:clamp(16px,2.2vw,20px);line-height:1.75;letter-spacing:0;font-weight:400;max-width:38ch;
}
.worn__head{max-width:60ch}

/* nothing on this page may be wider than the screen it is read on */
.wrap,.wrap.narrow{max-width:min(1200px,100%)}
.wrap.narrow{max-width:min(760px,100%)}

/* the hand-made mark, at full strength */
.invite__sig,.founder__sig{
  opacity:1;
  color:var(--green);
}
.invite__sig{width:clamp(168px,24vw,240px);margin-top:clamp(40px,7vh,76px)}
.founder__sig{width:clamp(180px,26vw,280px)}

/* ==========================================================================
   BUILD 15 — the clipped section

   The real fault behind the cut-off text, found at last.

   .open, .invite, .last and .formula are grids declared with
   place-items:center. A centred grid item is sized shrink-to-fit, so the
   single auto column sizes itself to the item's max-content width. The item
   is .wrap.narrow, capped at 760px — wider than any phone. So the column
   became 760px plus gutters, every child was laid out at that width, and
   overflow:hidden on the section quietly sliced the right-hand side off.
   That is why the button ran edge to edge with no gutter, and why sentences
   lost their last two words.

   width:100% could not save it: a percentage resolved against a track whose
   size is derived from its own content resolves to nothing. The track has to
   be made definite instead. minmax(0,1fr) does that — 1fr fills the section,
   the 0 minimum stops any child forcing it wider.
   ========================================================================== */

.open,
.invite,
.last,
.formula,
.seek__sticky,
.sec--wide{
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-items:center;
}
.open > *,
.invite > *,
.last > *,
.formula > *,
.seek__sticky > *,
.sec--wide > *{max-width:100%}

/* and a floor under it: no section may lay its content out wider than the
   screen, whatever a future grid declaration does */
.wrap{width:100%;max-width:1200px}
.wrap.narrow{max-width:760px}

/* ==========================================================================
   BUILD 16 — contrast, and movement

   ONE · GOLD ON GREEN
   The formula — the three words the whole house rests on — was set in
   #8A6520 on Deep Green. Measured, that is 2.51:1. The floor for readable
   text is 4.5:1, so it was not dim, it was invisible, and it had been
   invisible in every dark chapter on the site.

   Dark grounds now take the logo pack's dark-background gold, #E3C88E,
   which measures 8.18:1 on Deep Green. #8A6520 remains correct on ivory,
   where it measures 5.4:1. One gold for light grounds, one for dark —
   the same rule the lockup already follows.

   And the formula was set at 12px on a phone. It is the house's own
   sentence; it is now sized like one.
   ========================================================================== */

.sec--dark,.sec--film,.sec--plate,.seek--becoming,.proofshot,.twosides,.open{
  --gold-on-dark:#E3C88E;
}

.seek--becoming .seek__list--formula li,
.seek__list--formula li,
.seek__list--small li,
.seek--becoming .seek__formula{
  color:var(--gold-on-dark,#E3C88E);
}

.seek__list--formula li{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(17px,3.6vw,30px);
  font-weight:400;
  letter-spacing:.12em;
  line-height:1.3;
}
html[lang="ar"] .seek__list--formula li{
  letter-spacing:0;font-weight:500;font-size:clamp(18px,3.8vw,32px);line-height:1.6;
}
.seek--becoming .seek__words{padding-block:clamp(40px,7vh,80px)}

/* every other small gold label on a dark ground */
.sec--dark .eyebrow,.sec--film .eyebrow,.sec--plate .eyebrow,
.proofshot__cap,.twosides .eyebrow{color:var(--gold-on-dark,#E3C88E)}
.sec--dark .sig,.sec--film .sig,.sec--plate .sig{color:var(--gold-on-dark,#E3C88E)}

/* ==========================================================================
   TWO · MOVEMENT

   The page had motion in two places and stillness everywhere else, so it
   read as a series of stills. Three devices, none of them a trick:

   1. GOLD DRAWS. The hairline in front of every chapter mark draws itself
      from nothing when the chapter arrives. It is the house formula happening
      rather than being stated.
   2. Photographs settle. Each arrives fractionally large and comes to rest,
      the way a slide lands in a projector. Nothing pans, nothing parallaxes.
   3. Light moves. A single warm source drifts very slowly across the ivory
      chapters, never repeating position within a minute. MISHKAH is a niche
      made to hold light; the page should behave like one.

   All three are gated behind a class JavaScript adds, so if the script never
   runs the page is simply still — never broken, never blank.
   ========================================================================== */

/* 1 — the rule draws */
html.mv [data-mv="rule"]::before{
  width:0;
  transition:width 760ms cubic-bezier(.22,.61,.36,1) 140ms;
}
html.mv [data-mv="rule"].mv-in::before{width:26px}

/* 2 — photographs settle */
html.mv [data-mv="settle"]{
  transform:scale(1.032);
  transition:transform 1200ms cubic-bezier(.19,.66,.3,1);
  will-change:transform;
}
html.mv [data-mv="settle"].mv-in{transform:none;will-change:auto}

/* 3 — the light that moves through the page */
.tw,.worn,.founder,.invite{position:relative;overflow:hidden}
.tw::before,.worn::before,.founder::before{
  content:"";
  position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-30%;inset-inline-start:-25%;
  width:80%;height:120%;
  background:radial-gradient(closest-side,rgba(255,244,222,.85),rgba(255,244,222,0) 72%);
  filter:blur(30px);
  animation:drift 68s ease-in-out infinite alternate;
}
.worn::before{animation-duration:84s;animation-delay:-20s}
.founder::before{animation-duration:74s;animation-delay:-40s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(46%,14%,0) scale(1.12)}
  100%{transform:translate3d(88%,-6%,0) scale(1)}
}
.tw__in,.worn > *,.founder > *{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  html.mv [data-mv="rule"]::before{width:26px;transition:none}
  html.mv [data-mv="settle"]{transform:none;transition:none}
  .tw::before,.worn::before,.founder::before{animation:none;opacity:.5}
}

/* the words now lead the twelve rather than following them: on a phone the
   objects fill a screen, so a line set beneath them is a line most people
   never reach. Stated first, it frames what the turning then demonstrates. */
.tw__words{
  padding-top:0;
  padding-bottom:clamp(30px,5.5vh,60px);
}

/* ==========================================================================
   BUILD 17 — THE RULE, AS ITS OWN CHAPTER

   The four terms were captions sitting under a film. A caption under a film
   is read as a description of the film. They are not that — they are the law
   the whole house is built on, and they should be stated before anything
   demonstrates them.

   So the order at the top of the page is now: the reveal, then the rule,
   then the drawing becoming the jewel, then the twelve. Vision first,
   proof second, evidence third. The film that follows shows the first three
   terms happening in sequence — pencil line, then gold, then cobalt, then
   turquoise — so the words are answered within one scroll of being read.

   Three terms in gold, because you can see what they do. The fourth in
   limestone, quieter, because the order it names is on the side nobody else
   is looking at.
   ========================================================================== */

.rule{
  position:relative;overflow:hidden;
  background:var(--green);color:var(--ivory);
  padding-block:clamp(76px,15vh,168px);
  text-align:center;
}
.rule::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-40%;inset-inline-start:-30%;
  width:80%;height:180%;
  background:radial-gradient(closest-side,rgba(227,200,142,.16),rgba(227,200,142,0) 70%);
  filter:blur(34px);
  animation:drift 76s ease-in-out infinite alternate;
}
.rule .wrap{position:relative;z-index:1}


@media (prefers-reduced-motion:reduce){
  .rule::before{animation:none}
}

/* ==========================================================================
   BUILD 18 — BREATHING

   Entrance animations are not movement. A thing that animates once and then
   sits still for the rest of the scroll is a still image with a flourish;
   the page still reads as a stack of photographs.

   So the photographs are now tied to the scroll itself. Each one enters the
   frame fractionally large, comes to true scale as it reaches the middle of
   the screen, and lifts again as it leaves — an inhale on the way in, an
   exhale on the way out. It never moves unless the reader moves, so nothing
   drifts unprompted and nothing hijacks a gesture. Scroll slowly and it
   breathes slowly. Stop, and it stops with you.

   This uses scroll-driven CSS animation rather than a scroll listener: it
   runs on the compositor, so it costs nothing on a phone and cannot stutter
   the way a JavaScript scroll handler does. Where the browser does not
   support it, the one-shot settle from Build 16 stays in place and the page
   is simply calmer.

   The image is scaled, never the layout — so nothing reflows, nothing shifts
   under a thumb, and every container clips rather than overlapping the next.
   ========================================================================== */

.sec--wide,.group,.figure,.worn__i,.twosides__film,.proofshot{overflow:hidden}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){

    /* the scroll-driven breath supersedes the one-shot settle */
    html.mv [data-mv="settle"]{transform:none;transition:none;will-change:auto}

    .wide__img,
    .group__img,
    .group img,
    .proofshot__img,
    .worn__i img,
    .split .figure img,
    .twosides__film video{
      animation:breath linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
      transform-origin:50% 50%;
    }
    @keyframes breath{
      0%  {transform:scale(1.075)}
      50% {transform:scale(1)}
      100%{transform:scale(1.055)}
    }

    /* the twelve rise a little as they arrive and settle as they pass,
       so the field is never quite at rest even between turns */
    .tw__field{
      animation:field linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes field{
      0%  {transform:translateY(14px)}
      50% {transform:none}
      100%{transform:translateY(-10px)}
    }
  }
}

/* the light itself breathes, on a period that never syncs with the drift,
   so no two passes down the page look the same */
.tw::before,.worn::before,.founder::before,.rule::before{
  animation:drift 68s ease-in-out infinite alternate,
            breathe-light 19s ease-in-out infinite alternate;
}
.worn::before{animation-duration:84s,23s;animation-delay:-20s,-7s}
.founder::before{animation-duration:74s,17s;animation-delay:-40s,-11s}
.rule::before{animation-duration:76s,21s;animation-delay:-30s,-4s}
@keyframes breathe-light{
  from{opacity:.55;filter:blur(30px)}
  to  {opacity:1;filter:blur(42px)}
}

@media (prefers-reduced-motion:reduce){
  .tw::before,.worn::before,.founder::before,.rule::before{animation:none;opacity:.6}
}

/* ==========================================================================
   BUILD 19 — the invisible paragraph, and the back rule shown

   ONE · A PARAGRAPH THAT WAS NOT THERE
   Build 10 made the paragraph after a headline a deck, and set it in Deep
   Green. It then lifted that to ivory on .sec--dark, .sec--film and
   .sec--plate — but .twosides is a Deep Green section that carries none of
   those classes. So on that chapter the deck was Deep Green on Deep Green:
   a contrast ratio of exactly 1.0, text rendered perfectly and completely
   invisible. That is the empty green void under "Every piece has two faces."

   Dark grounds are now named once, on the section itself, and every piece of
   text in them takes its color from that — so a new dark chapter can never
   silently swallow its own copy again.

   TWO · THE BACK RULE, SHOWN
   "Every piece has two faces" was a claim with nothing beneath it. It is now
   demonstrated: the Fish, front and reverse, either side of the axis it
   turns on. Same outline, same openings, nothing added. The rule stated on
   page one of the book, happening in front of the reader.
   ========================================================================== */

/* every dark ground, named once */
.sec--dark,.sec--film,.sec--plate,.twosides,.proofshot,.faces,.rule,.open{
  --ink:#FFFDF8;
  --ink-soft:rgba(243,234,223,.9);
}
.twosides .lede,.twosides .d2 + .lede,
.faces .lede,
.sec--dark .d2 + .lede,.sec--film .d2 + .lede,.sec--plate .d2 + .lede{
  color:var(--ink,#FFFDF8);
}
.twosides .lede{max-width:36ch}

/* ---- the two faces ---- */

.faces{
  background:var(--green);
  color:var(--ink);
  padding-block:clamp(20px,4vh,48px) clamp(64px,12vh,132px);
  position:relative;overflow:hidden;
}
.faces__pair{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,4vw,54px);
  margin:0 auto clamp(30px,5vh,58px);
  max-width:820px;
}
.faces__one{margin:0;flex:0 1 auto;text-align:center}
.faces__one img{
  width:100%;height:auto;display:block;
  max-width:clamp(126px,32vw,320px);
  margin:0 auto clamp(14px,2.4vh,22px);
}
.faces__one figcaption{
  font-family:var(--body);
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-on-dark,#E3C88E);
}
html[lang="ar"] .faces__one figcaption{letter-spacing:0;font-size:13px;font-weight:500}

/* the axis the piece turns on */
.faces__axis{
  flex:0 0 auto;
  align-self:stretch;
  width:1px;
  background:linear-gradient(180deg,
    rgba(227,200,142,0),
    rgba(227,200,142,.55) 22%,
    rgba(227,200,142,.55) 78%,
    rgba(227,200,142,0));
}

.faces__note{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(17px,2.5vw,23px);
  line-height:1.44;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--ink-soft);
  max-width:40ch;
  margin:0 auto;
  text-align:center;
}
html[lang="ar"] .faces__note{letter-spacing:0;line-height:1.8;font-size:clamp(16px,2.3vw,21px)}

/* ==========================================================================
   BUILD 20 — the worn grid, uncropped and led

   Each of the three photographs carried a declared aspect-ratio — 16/9, 3/4,
   4/3 — with object-fit:cover. None of those match the pictures, which are
   1.28, 1.19 and 1.30. So every one of them was being cut to a shape it was
   never composed for, and the third lost its lower third: the shirt, the
   line of the neckline, the whole bottom of the frame.

   The declared ratios are gone. Each photograph is now shown at the shape it
   was taken in.

   And one of the three leads. The layered shot is the one that carries the
   argument — three chain lengths, three pieces, one of them a reverse worn
   as a front — so it runs full width and the other two sit beneath it. The
   single Fig is a beautiful picture but it is not the story.
   ========================================================================== */

.worn__i img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  max-height:none;
}
.worn__i--tall img,
.worn__i--wide img,
.worn__i--full img{aspect-ratio:auto}

.worn__grid{align-items:start}

@media (min-width:760px){
  .worn__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .worn__i--lead{grid-column:1 / -1}
}
@media (min-width:1100px){
  .worn__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the breath stays, but shallower here — a photograph asked to be uncropped
   should not be quietly cropped 7% by its own animation */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .worn__i img{animation-name:breath-shallow}
    @keyframes breath-shallow{
      0%  {transform:scale(1.03)}
      50% {transform:scale(1)}
      100%{transform:scale(1.022)}
    }
  }
}

/* ==========================================================================
   BUILD 21 — THE NAME

   This was the most important reading moment on the site and the weakest
   piece of setting on it: six short lines, all centred, all in the same
   serif at nearly the same size, floating in a screen and a half of empty
   ivory with a lazy-loading photograph reserving a void above them.

   Centred short lines are the worst possible setting for prose. The eye has
   to hunt for the start of every line, nothing is larger than anything else,
   so there is no reason to read the fourth line after the third. It reads as
   a poem nobody asked for rather than the story of the house.

   Rebuilt with four real tiers — the word, what it means, who took it, and
   why. The prose sits left-aligned at reading size, because it is Hala
   speaking and a person speaking is not a caption. The thesis is pulled out
   against a gold rule, where it belongs.

   And the photograph is beside the words rather than above them, so the
   chapter is one composition instead of a picture and then a void.
   ========================================================================== */

.name{
  background:#EFE4D6;
  padding-block:clamp(56px,10vh,120px);
  position:relative;overflow:hidden;
}
.name__in{
  max-width:1240px;margin:0 auto;
  padding-inline:var(--gut);
  display:grid;
  gap:clamp(34px,5vw,64px);
  align-items:center;
}
@media (min-width:900px){
  .name__in{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
}

.name__pic{margin:0;overflow:hidden}
.name__pic img{width:100%;height:auto;display:block}

.name__body{max-width:38em}

/* the word */
.name__ar{
  font-family:"Readex Pro",system-ui,sans-serif;
  font-size:clamp(52px,11vw,104px);
  font-weight:400;line-height:1.24;
  color:var(--green);
  margin:0;
}
.name__latin{
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.4em;
  color:#8A6520;
  margin:6px 0 0;
}

/* what it means */
.name__say{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(23px,3.6vw,38px);
  line-height:1.16;letter-spacing:-.018em;font-weight:400;
  color:var(--green);
  margin:clamp(22px,3.6vh,38px) 0 0;
  padding-top:clamp(20px,3.4vh,34px);
  border-top:1px solid rgba(21,53,45,.2);
  max-width:16ch;
}
html[lang="ar"] .name__say{letter-spacing:0;line-height:1.5;max-width:20ch}

/* who took it — a person speaking, set as reading text */
.name__prose{
  font-family:var(--body);
  font-size:clamp(16px,1.85vw,18px);
  line-height:1.72;
  color:rgba(21,53,45,.88);
  margin:clamp(20px,3vh,30px) 0 0;
  max-width:46ch;
}
html[lang="ar"] .name__prose{line-height:2.05;font-size:clamp(16px,1.9vw,18px)}

/* why */
.name__thesis{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(22px,3.4vw,34px);
  line-height:1.2;letter-spacing:-.015em;font-weight:400;
  color:var(--green);
  margin:clamp(28px,4.6vh,50px) 0 0;
  padding-inline-start:clamp(16px,2.6vw,26px);
  border-inline-start:2px solid var(--gold);
}
html[lang="ar"] .name__thesis{letter-spacing:0;line-height:1.55}

/* the light passes through here too */
.name::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-30%;inset-inline-end:-25%;
  width:70%;height:150%;
  background:radial-gradient(closest-side,rgba(255,244,222,.7),rgba(255,244,222,0) 72%);
  filter:blur(34px);
  animation:drift 72s ease-in-out infinite alternate,
            breathe-light 22s ease-in-out infinite alternate;
  animation-delay:-15s,-6s;
}
.name__in{position:relative;z-index:1}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .name__pic img{
      animation:breath linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  .name::before{animation:none;opacity:.6}
}

/* ==========================================================================
   BUILD 22 — one gold variable, not two hard-coded ones

   My own fault, from Build 16. Fixing the gold that was unreadable on green,
   I applied the dark-ground gold to .seek__list--small as well — and those
   chapters sit on ivory. #E3C88E on #F3EADF measures 1.37:1. The word was
   there; the page was effectively blank where it stood.

   The mistake was hard-coding a color instead of naming a role. There is
   now one variable, --gold-text. It defaults to the light-ground gold and is
   overridden to the dark-ground gold on dark sections only, so a gold label
   always resolves against whatever it is actually sitting on.

   #8A6520 on ivory: 4.45:1.  #E3C88E on Deep Green: 8.18:1.
   ========================================================================== */

:root{--gold-text:#8A6520}

.sec--dark,.sec--film,.sec--plate,.twosides,.proofshot,
.faces,.rule,.open,.seek--becoming{
  --gold-text:#E3C88E;
}

.eyebrow,
.hint,
.sig,
.worn__note,
.index__n,
.name__latin,
.faces__one figcaption,
.proofshot__cap,
.founder__where,
.seek__list--small li,
.seek__list--formula li,
.seek__formula{
  color:var(--gold-text);
}
.tw__line--close{color:var(--gold-text)}

/* ==========================================================================
   BUILD 23 — closing the page

   Two faults at the end of the scroll.

   ONE · THE LETTER SIGNED ITSELF IN THE WRONG ORDER
   The credentials sat between the last sentence and the signature, so a
   personal letter was interrupted by a CV and then signed. The signature now
   follows the writing directly, the role follows the signature, and the
   credentials are the footnote they always were.

   TWO · DEAD SPACE
   .last carried min-height:76svh — three quarters of a screen guaranteed,
   for a logo and two short lines — and .invite and .last each added their
   own generous block padding on top of that. Between the signature and the
   closing mark there was the better part of a screen of nothing, which reads
   as an error rather than as air.

   Air is only luxurious when something is sitting in it. These three
   chapters are now sized to their content, and the closing plate reads as a
   sign-off rather than an unfinished page.
   ========================================================================== */

.founder{padding-block:clamp(56px,9vh,110px) clamp(48px,7vh,90px)}
.founder__sig{margin:clamp(30px,5vh,54px) 0 12px}
.founder .sig{margin:0}
.founder__cv{
  margin-top:clamp(22px,3.4vh,34px);
  padding-top:clamp(16px,2.4vh,24px);
}

.invite{padding-block:clamp(60px,10vh,110px) clamp(44px,6vh,80px)}
.invite__sig{margin-top:clamp(32px,5vh,58px)}

.last{
  min-height:0;
  padding-block:clamp(48px,7vh,88px);
  border-top:1px solid var(--rule);
}
.last__logo{margin:0 auto clamp(18px,2.6vh,26px)}
.last__meta{margin:0 0 clamp(12px,1.8vh,18px)}
.last__line{margin:0}

/* ==========================================================================
   BUILD 24 — THE CLOSE

   Anyone who reached the bottom without subscribing met a decorative plate:
   a logo, a date, a line. Nothing to act on. The ask had already happened
   further up and then dissipated into ornament, which is the most expensive
   mistake a pre-launch page can make — the readers who go all the way to the
   end are the ones who wanted it most, and the page was letting them leave.

   So the page now ends on the ask, and the ask is built to answer the three
   reasons someone hesitates at a form:

   1. "What do I actually get?" — the offer is stated once, plainly, at deck
      size, above the field rather than in grey type beneath it: one message
      in November, a month before anyone else can order. The benefit is real
      and it is the only thing this list does.
   2. "What will it cost me?" — the objection is removed before the field is
      reached, not after: nothing else, leave whenever.
   3. "Is this a real house?" — the signature, at full weight, and the date.

   And it closes the loop. The page opened on Deep Green with the hero line;
   it ends on Deep Green with the same line returning, and then the house
   line as the last words on the page. Beginning and end are the same color
   and the same sentence, which is what makes a scroll feel finished rather
   than exhausted.
   ========================================================================== */

.close{
  position:relative;overflow:hidden;
  background:var(--green);color:var(--ivory);
  --gold-text:#E3C88E;
  padding-block:clamp(64px,11vh,130px) clamp(52px,8vh,96px);
  text-align:center;
}
.close__sun{
  display:block;position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-30%;inset-inline-start:-24%;
  width:78%;height:150%;
  background:radial-gradient(closest-side,rgba(227,200,142,.2),rgba(227,200,142,0) 70%);
  filter:blur(38px);
  animation:drift 64s ease-in-out infinite alternate,
            breathe-light 18s ease-in-out infinite alternate;
}
.close__in{position:relative;z-index:1}

.close__star{
  display:block;width:22px;height:22px;
  fill:var(--gold-text);
  margin:0 auto clamp(22px,3.6vh,36px);
  opacity:.9;
}

/* the line the page opened on, returning */
.close__return{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(28px,6.4vw,58px);
  line-height:1.08;letter-spacing:-.022em;font-weight:400;
  color:var(--ivory);
  margin:0 auto;
  max-width:15ch;
}
html[lang="ar"] .close__return{letter-spacing:0;line-height:1.42;max-width:18ch}

/* the offer, above the field — not in grey type beneath it */
.close__ask{
  margin:clamp(34px,5.6vh,62px) auto clamp(26px,4vh,40px);
  padding-top:clamp(28px,4.4vh,46px);
  border-top:1px solid rgba(227,200,142,.28);
  max-width:36ch;
}
.close__k{
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-text);
  margin:0 0 14px;
}
html[lang="ar"] .close__k{letter-spacing:0;font-size:13px;font-weight:500}
.close__offer{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(19px,2.9vw,27px);
  line-height:1.38;letter-spacing:-.01em;font-weight:400;
  color:var(--ivory);
  margin:0;
}
html[lang="ar"] .close__offer{letter-spacing:0;line-height:1.7;font-size:clamp(18px,2.7vw,24px)}

/* the field, on green */
.close__form{display:grid;gap:14px;max-width:440px;margin:0 auto;text-align:start}
.close__form input[type="email"]{
  width:100%;padding:17px 18px;font:inherit;font-size:16px;line-height:1.3;
  color:var(--green);background:#FFFCF7;
  border:1px solid rgba(243,234,223,.4);border-radius:3px;
  text-align:start;appearance:none;-webkit-appearance:none;
}
.close__form input::placeholder{color:rgba(21,53,45,.42)}
.close__form input:focus{outline:0;border-color:var(--gold-text);box-shadow:0 0 0 3px rgba(227,200,142,.22)}
.close__btn{
  width:100%;padding:17px 22px;border:0;border-radius:3px;cursor:pointer;
  background:var(--ivory);color:var(--green);
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:background-color .25s,transform .1s;
}
html[lang="ar"] .close__btn{letter-spacing:0;font-size:15px;font-weight:600}
.close__btn:hover{background:var(--limestone)}
.close__btn:active{transform:translateY(1px)}
.close__btn[disabled]{opacity:.6;cursor:progress}
.close .msg{margin:14px 0 0;font-size:14px;color:var(--ivory);text-align:center}
.close .msg--err{color:#F2C6B4}
.close .msg__body{display:block;margin-top:6px;color:rgba(243,234,223,.8);font-size:13px}

.close__micro{
  font-size:13px;line-height:1.6;
  color:rgba(243,234,223,.66);
  margin:16px auto 0;max-width:34ch;
}
html[lang="ar"] .close__micro{font-size:14px;line-height:1.9}

.close__sig{
  display:block;width:clamp(168px,24vw,240px);height:auto;
  color:var(--ivory);opacity:.92;
  margin:clamp(38px,6vh,70px) auto clamp(20px,3vh,30px);
}

.close__meta{
  font-family:var(--body);
  font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-text);
  margin:0 0 clamp(16px,2.4vh,24px);
}
html[lang="ar"] .close__meta{letter-spacing:0;font-size:13px;font-weight:500}

/* the last words on the page */
.close__house{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(22px,4vw,38px);
  line-height:1.1;letter-spacing:-.018em;font-weight:400;
  color:var(--gold-text);
  margin:0;
}
html[lang="ar"] .close__house{letter-spacing:0;line-height:1.45}

.foot{background:var(--ivory)}

@media (prefers-reduced-motion:reduce){
  .close__sun{animation:none;opacity:.6}
}

/* ==========================================================================
   BUILD 25 — THE EDITION

   Twenty-five of each. Three hundred pieces in the whole first collection.

   Stated exactly twice, and never as pressure. Once in the collection
   chapter, where it is a fact about how the work is made and it quietly
   reframes everything above it — these are not charms, they are an edition.
   Once in the finale, where it is the reason the November message is worth
   having.

   Not stated a third time, and never with a counter, a countdown or a
   "hurry". Scarcity said once, plainly, by a house that clearly does not
   need to say it, is worth more than scarcity shouted. Said three times it
   stops being a fact about the making and becomes a sales technique, and
   the reader can feel the difference immediately.
   ========================================================================== */

.edition{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(19px,2.7vw,26px);
  line-height:1.34;letter-spacing:-.012em;font-weight:400;
  color:var(--gold-text);
  max-width:26ch;
  margin:clamp(22px,3.4vh,34px) 0 0;
  padding-top:clamp(18px,2.6vh,26px);
  border-top:1px solid var(--rule);
}
html[lang="ar"] .edition{letter-spacing:0;line-height:1.7;max-width:30ch}

/* ==========================================================================
   BUILD 26 — INSPIRATION, NOT DOCUMENTATION

   The front/back pair was a spec sheet. Two cutouts floating either side of
   a hairline with FRONT and BACK labelled underneath is how a factory
   drawing looks, and the house red lines say no technical drawings on the
   consumer site. It was also redundant: the twelve at the top of the page
   already demonstrate two faces, continuously, on real objects, far better
   than a static diagram ever could.

   In its place, the sources. Water, tile, screen, arch, muqarnas — pinned
   like references on a wall rather than laid out in a grid, each frame
   sitting at a slightly different height so the row reads as something
   collected rather than something specified.

   The closing line is the rule that governs all of it: the source is
   transformed, never illustrated.
   ========================================================================== */

.mood{
  background:var(--ivory);
  padding-block:clamp(56px,9vh,116px);
  position:relative;overflow:hidden;
}

.mood__strip{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,3vw,26px);
  margin:clamp(30px,5vh,56px) 0 0;
  align-items:start;
}
@media (min-width:620px){
  .mood__strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:980px){
  .mood__strip{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}
}

.mood__f{
  margin:0;
  overflow:hidden;
  border-radius:2px;
  box-shadow:0 6px 18px rgba(21,53,45,.1);
}
.mood__f img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  aspect-ratio:3/4;
}
.mood__f--1 img,.mood__f--2 img{aspect-ratio:4/3}

/* pinned, not gridded */
@media (min-width:980px){
  .mood__f--1{transform:translateY(-14px)}
  .mood__f--2{transform:translateY(10px)}
  .mood__f--3{transform:translateY(-6px)}
  .mood__f--4{transform:translateY(16px)}
  .mood__f--5{transform:translateY(-10px)}
}

.mood__note{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(18px,2.6vw,25px);
  line-height:1.36;letter-spacing:-.012em;font-weight:400;
  color:var(--gold-text);
  max-width:30ch;
  margin:clamp(26px,4vh,42px) 0 0;
}
html[lang="ar"] .mood__note{letter-spacing:0;line-height:1.7;max-width:34ch}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .mood__f img{
      animation:breath linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}

/* ==========================================================================
   BUILD 27 — the signature was black, not missing

   An SVG loaded through <img src> is an isolated document. fill="currentColor"
   inside it resolves against that document's own color, which is black —
   page CSS cannot reach in. So every rule I wrote setting .close__sig,
   .invite__sig or .founder__sig to a color did nothing at all. The signature
   has been black since the first build. On ivory that read as ink and looked
   correct. On Deep Green it is black on dark: present, and invisible.

   There is now a second file, signature-ivory.svg, carrying the color inside
   it. The dark finale uses that one; the founder chapter keeps the black.

   And the finale's form no longer borrows .invite__ class names. It was
   inheriting the old ivory-section rules underneath the new ones — full-width
   green button, 19px padding, centred selects — which is what made the button
   run edge to edge with no gutter. New names, so nothing legacy can reach it.
   ========================================================================== */

.close__sig{opacity:1}

/* nothing in the finale may lay out wider than the screen */
.close,.close__in{max-width:100%}
.close__in > *{max-width:100%}
.close__form,.close__btn,.close__form input{max-width:100%}
.close__micro,.close__meta,.close__offer,.close__return,.close__house{
  overflow-wrap:break-word;
}

/* ==========================================================================
   BUILD 28 — the second screen

   Two things were wrong with the first thing seen after the hero.

   ONE · THE DOOR WAS SELLING TOO EARLY
   A large ivory button, one screen after the opening, before a single object
   has been seen. A shortcut for a returning visitor is legitimate; giving it
   the visual weight of a chapter is not. It now reads as a quiet line with an
   underlined link — findable by anyone who came back to order, invisible to
   anyone who did not.

   TWO · FOUR WORDS IN A VOID
   Gold draws. Color lives. Space reveals. Order remembers. Four answers with
   no question in front of them, centred in a screen of empty green. Beautiful
   as a mark on a package; useless as the moment that has to earn the next
   scroll, because a stranger has no idea yet what any of it refers to.

   It is now a method. A line that tells you a method exists, then the four
   decisions numbered in the order they are taken, each with the clause that
   makes it mean something. Numbering earns its place here: this is a real
   sequence — draw the form, fill it, open it, remember it on the back.

   Someone reading this should feel let in, which is what makes a person keep
   going. Mystery works after comprehension, never instead of it.
   ========================================================================== */

/* the door steps back */
.door--top{
  background:var(--ivory);
  padding-block:clamp(14px,2.4vh,22px);
  border-bottom:1px solid var(--rule);
}
.door--top .door__in{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:6px 14px;text-align:center;
}
.door--top .door__line{
  font-family:var(--body);
  font-size:12.5px;font-weight:400;letter-spacing:0;
  color:rgba(21,53,45,.62);
  margin:0;
}
.door--top .door__cta{
  display:inline;
  background:none;border:0;border-radius:0;padding:0;
  font-family:var(--body);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:var(--green);
  border-bottom:1px solid rgba(21,53,45,.35);
  text-decoration:none;
  transition:border-color .2s;
}
.door--top .door__cta:hover{border-bottom-color:var(--gold)}
html[lang="ar"] .door--top .door__line,
html[lang="ar"] .door--top .door__cta{font-size:14px;letter-spacing:0}

/* ---- the method ---- */

.rule{
  position:relative;overflow:hidden;
  background:var(--green);color:var(--ivory);
  --gold-text:#E3C88E;
  padding-block:clamp(58px,10vh,124px);
  text-align:start;
}
.rule .wrap{position:relative;z-index:1}

.rule__lead{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(28px,5.6vw,54px);
  line-height:1.08;letter-spacing:-.022em;font-weight:400;
  color:var(--ivory);
  margin:0 0 clamp(30px,5vh,54px);
  max-width:18ch;
}
html[lang="ar"] .rule__lead{letter-spacing:0;line-height:1.42;max-width:22ch}

.rule__list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(227,200,142,.26);
  max-width:60em;
}
.rule__i{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"n t" ". d";
  column-gap:clamp(14px,3vw,26px);
  row-gap:4px;
  align-items:baseline;
  padding-block:clamp(16px,2.8vh,26px);
  border-bottom:1px solid rgba(227,200,142,.26);
}
@media (min-width:820px){
  .rule__i{
    grid-template-columns:auto minmax(0,11em) minmax(0,1fr);
    grid-template-areas:"n t d";
    column-gap:clamp(20px,3vw,42px);
  }
}
.rule__n{
  grid-area:n;
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.18em;
  color:var(--gold-text);
  font-variant-numeric:tabular-nums;
}
html[lang="ar"] .rule__n{letter-spacing:0;font-size:13px;font-weight:500}
.rule__t{
  grid-area:t;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(22px,3.4vw,32px);
  line-height:1.1;letter-spacing:-.018em;font-weight:400;
  color:var(--gold-text);
}
html[lang="ar"] .rule__t{letter-spacing:0;line-height:1.45}
.rule__d{
  grid-area:d;
  font-family:var(--body);
  font-size:clamp(14px,1.7vw,16px);
  line-height:1.6;
  color:rgba(243,234,223,.82);
}
html[lang="ar"] .rule__d{font-size:clamp(14px,1.8vw,16px);line-height:1.95}

/* ==========================================================================
   BUILD 29 — the twelve, given a plate

   The copy was floating on the same ivory as the objects beneath it, so the
   most important sentence in the house had no more presence than a caption.
   It now sits on a Deep Green plate, full width, edge to edge — a chapter
   mark rather than a label.

   COLOR, MEASURED BEFORE CHOOSING. Every candidate was checked against its
   ground rather than picked by eye, because the last three faults on this
   site were all text that technically rendered and could not be read:

     on limestone   deep green 8.07 PASS · gold #8A6520 3.21 FAIL
     on ivory       deep green 11.18 PASS · gold #8A6520 4.45 marginal
     on Deep Green  ivory 11.18 PASS · gold #E3C88E 8.18 PASS

   Deep Green is the only ground where two different colors both clear the
   4.5:1 floor comfortably — so it is the only one that allows a real
   hierarchy between the two lines rather than one flat color for both.
   Ivory for the statement, dark-ground gold for the reveal. Nothing here is
   close to the line.
   ========================================================================== */

.tw{padding-block:0 clamp(48px,8vh,104px)}

.tw__band{
  background:var(--green);
  --gold-text:#E3C88E;
  padding-block:clamp(46px,8vh,92px);
  text-align:center;
  margin-bottom:clamp(40px,7vh,84px);
  position:relative;z-index:2;
}

.tw__line--open{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(26px,5vw,46px);
  line-height:1.1;letter-spacing:-.02em;
  color:var(--ivory);
  margin:0 auto;
  max-width:16ch;
}
html[lang="ar"] .tw__line--open{letter-spacing:0;line-height:1.44;max-width:20ch}

.tw__line--close{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(30px,6.2vw,58px);
  line-height:1.08;letter-spacing:-.022em;
  color:#E3C88E;
  margin:clamp(22px,3.4vh,36px) auto 0;
  padding-top:clamp(20px,3vh,32px);
  max-width:18ch;
  position:relative;
}
html[lang="ar"] .tw__line--close{letter-spacing:0;line-height:1.42;max-width:22ch}

/* a short gold rule between the statement and the reveal */
.tw__line--close::before{
  content:"";
  position:absolute;inset-block-start:0;inset-inline-start:50%;
  transform:translateX(-50%);
  width:44px;height:1px;
  background:#E3C88E;opacity:.55;
}

/* ==========================================================================
   BUILD 30 — MOVEMENT YOU CAN ACTUALLY FEEL

   Everything before this was tuned at 3–7%. That is below the threshold at
   which a person notices motion at all on a phone, so the page was paying
   the full cost of animation and getting none of the effect. Amplitude is
   now 3 to 5 times larger across the board.

   The devices, in order of how much they do:

   1. PARALLAX INSIDE THE FRAME. Photographs of people now sit larger than
      their frame and travel through it as you scroll — the picture moves at
      a different rate to the page, which is the one thing that reliably
      reads as depth rather than decoration. Not applied to the flat-lays or
      the worn grid: those must stay uncropped, so their frames move instead
      of their contents.

   2. DIFFERENTIAL SPEED. In the worn grid and the constellation, neighbours
      travel at different rates. Things at different speeds are read as
      things at different distances. This is what makes a page feel like a
      space instead of a list, and it costs nothing because it is transform
      only.

   3. ARRIVAL WITH WEIGHT. Text was rising 16px in a third of a second —
      over before the eye reaches it. Now 34px over two thirds of a second,
      with lines staggered, so a chapter assembles rather than appears.

   All of it is scroll-driven, so nothing moves unless the reader moves.
   Reduced-motion still gets a completely still page.
   ========================================================================== */

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){

    /* --- 1. photographs of people: real travel through the frame --- */
    .sec--wide{overflow:hidden}
    .wide__img,
    .name__pic img,
    .twosides__film video,
    .proofshot__img{
      animation:pan linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
      transform-origin:50% 50%;
      will-change:transform;
    }
    @keyframes pan{
      0%  {transform:scale(1.16) translateY(-5.5%)}
      50% {transform:scale(1.06) translateY(0)}
      100%{transform:scale(1.16) translateY(5.5%)}
    }

    /* the mood board frames are crops by design, so they can travel further */
    .mood__f img{
      animation:pan-deep linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes pan-deep{
      0%  {transform:scale(1.24) translateY(-7%)}
      50% {transform:scale(1.06) translateY(0)}
      100%{transform:scale(1.24) translateY(7%)}
    }

    /* --- 2. the worn grid: frames move, pictures stay whole --- */
    .worn__i img{animation:none;transform:none}
    .worn__i{
      animation:lift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
      will-change:transform;
    }
    .worn__i:nth-child(1){--amp:26px}
    .worn__i:nth-child(2){--amp:62px}
    .worn__i:nth-child(3){--amp:40px}
    @keyframes lift{
      0%  {transform:translateY(var(--amp,40px))}
      100%{transform:translateY(calc(var(--amp,40px) * -1))}
    }

    /* the flat-lay of the twelve stays whole too — the frame carries it */
    .group{
      animation:lift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
      --amp:34px;
    }
    .group__img,.group img{animation:none;transform:none}

    /* --- the constellation gains depth: columns at different rates --- */
    .tw__field{animation:none;transform:none}
    .tw__i{
      animation:drift-piece linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    .tw__i:nth-child(3n+1){--amp:56px;--tilt:-5%}
    .tw__i:nth-child(3n+2){--amp:24px;--tilt:4%}
    .tw__i:nth-child(3n+3){--amp:78px;--tilt:-1%}
    @keyframes drift-piece{
      0%  {transform:translateY(calc(var(--amp) + var(--tilt)))}
      100%{transform:translateY(calc((var(--amp) * -1) + var(--tilt)))}
    }

    /* the index rows fan in */
    .index__i{
      animation:fan linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 42%;
    }
    @keyframes fan{
      from{transform:translateY(34px);opacity:0}
      to  {transform:none;opacity:1}
    }
  }
}

/* --- 3. arrival with weight --- */
.rise{
  opacity:0;transform:translateY(34px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .72s cubic-bezier(.19,.66,.3,1);
}
.rise.is-in{opacity:1;transform:none}
.rise.is-in > *{animation:riseIn .68s cubic-bezier(.19,.66,.3,1) both}
.rise.is-in > *:nth-child(2){animation-delay:.10s}
.rise.is-in > *:nth-child(3){animation-delay:.20s}
.rise.is-in > *:nth-child(4){animation-delay:.30s}
.rise.is-in > *:nth-child(5){animation-delay:.40s}
.rise.is-in > *:nth-child(6){animation-delay:.50s}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* the chapter rule draws further and slower */
html.mv [data-mv="rule"]::before{transition:width 1s cubic-bezier(.22,.61,.36,1) .18s}

/* the ambient light moves enough to notice */
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(58%,20%,0) scale(1.22)}
  100%{transform:translate3d(112%,-10%,0) scale(1)}
}
.tw::before,.worn::before,.founder::before,.rule::before,.name::before,.close__sun{
  animation-duration:46s,15s;
}

@media (prefers-reduced-motion:reduce){
  .rise,.rise.is-in > *{opacity:1 !important;transform:none !important;animation:none !important}
  .worn__i,.group,.tw__i,.index__i{animation:none !important;transform:none !important}
}

/* ==========================================================================
   BUILD 31 — what the word actually means

   A reader with no Arabic met a large word they could not read, a small
   transliteration, and then a line of poetry. "A place made to hold light"
   is the meaning felt, not the meaning known — beautiful, and useless to
   someone who still does not know what the object is or how to say the name
   of the house out loud.

   It is now a dictionary entry: the word, how to say it, what part of speech
   it is, and the plain definition. Only then the poetic reading. Fact first,
   feeling second — a stranger cannot be moved by a word they have not been
   given.

   Saying the name is commercial as well as courteous. Nobody recommends a
   brand they are afraid of mispronouncing.
   ========================================================================== */

.name__ar{text-align:start}

.name__latin{
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.4em;
  color:var(--gold-text);
  margin:10px 0 0;
}

.name__pron{
  font-family:var(--body);
  font-size:13px;font-weight:400;letter-spacing:.02em;
  color:rgba(21,53,45,.6);
  margin:8px 0 0;
}
html[lang="ar"] .name__pron{font-size:15px;letter-spacing:0}

.name__def{
  font-family:var(--body);
  font-size:clamp(15px,1.8vw,17px);
  line-height:1.62;
  color:var(--green);
  margin:12px 0 0;
  max-width:34ch;
}
html[lang="ar"] .name__def{line-height:1.95;font-size:clamp(15px,1.9vw,17px)}

/* the poetic reading now follows the plain one */
.name__say{margin-top:clamp(26px,4vh,42px)}

/* ==========================================================================
   BUILD 32 — the gold was too pale, and two chapters were floating

   ONE · THE LABEL GOLD
   #8A6520 on ivory measures 4.45:1 — technically over the 4.5 floor by
   nothing, and that floor assumes normal text, not 11px set at .24em
   tracking. Every chapter mark on the site was sitting at the very edge of
   legible. It is now #6E4E13 at 6.39:1, and a point larger with less
   tracking. Still unmistakably gold, no longer a squint.

   TWO · THE FLOATING LINES
   "One form. Again. And again. And again." and "Looking became seeking."
   were built for a sticky scroll-step reveal that was removed long ago. What
   was left is a few short lines centred in a screen of empty ivory with no
   ground, no rule and no relationship to the picture above them.

   They are now tied to their images: sitting close underneath, left-aligned
   against a gold rule, at a size that carries. And the repetition line is
   set as a stack that fades — the four lines lose weight as they descend, so
   the typography does what the sentence describes instead of announcing it.

   THREE · The founder's Arabic name was pushed to the opposite edge from the
   Latin one by its own dir attribute — the same fault as the name chapter,
   fixed the same way.
   ========================================================================== */

:root{--gold-text:#6E4E13}

.eyebrow{font-size:12px;letter-spacing:.2em}
html[lang="ar"] .eyebrow{font-size:13.5px;letter-spacing:0}

.founder__ar{text-align:start}
.founder__where{font-size:12px;letter-spacing:.2em}

/* ---- the two working chapters ---- */

.seek__words{
  padding-block:clamp(30px,5vh,56px) clamp(44px,7vh,90px) !important;
  text-align:start !important;
}
.seek__words .seek__open,
.seek__words .seek__list{margin-inline:0}

.seek__open{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(27px,5.2vw,50px) !important;
  line-height:1.08;letter-spacing:-.022em;
  color:var(--green);
  margin:0 0 clamp(20px,3vh,32px) !important;
  max-width:16ch;
}
html[lang="ar"] .seek__open{letter-spacing:0;line-height:1.42;max-width:20ch}

/* the process words: a tight tracked row, tied to a rule */
.seek__list--small{
  display:flex;flex-wrap:wrap;gap:.4em 1.4em;
  padding-top:clamp(16px,2.4vh,24px);
  border-top:1px solid var(--rule);
  max-width:32ch;
}
.seek__list--small li{
  font-family:var(--body);
  font-size:12px !important;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text) !important;
}
html[lang="ar"] .seek__list--small li{letter-spacing:0;font-size:14px !important}

/* the repetition line: it loses weight as it repeats */
.seek--sheet .seek__list{
  display:grid;gap:2px;
  padding-inline-start:clamp(16px,2.6vw,26px);
  border-inline-start:2px solid var(--gold-text);
  max-width:20ch;
}
.seek--sheet .seek__list li{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:clamp(26px,5vw,46px) !important;
  line-height:1.14;letter-spacing:-.02em;
  color:var(--green) !important;
}
.seek--sheet .seek__list li:nth-child(2){opacity:.74}
.seek--sheet .seek__list li:nth-child(3){opacity:.5}
.seek--sheet .seek__list li:nth-child(4){opacity:.3}
html[lang="ar"] .seek--sheet .seek__list li{letter-spacing:0;line-height:1.5}

/* ==========================================================================
   BUILD 33 — the line has to arrive, not appear

   The house line was opening the finale as a decorative headline: a small
   star above it, then a phrase wrapping wherever the column ran out — which
   on a phone left "again" stranded alone on its own line. An orphan on the
   most important sentence on the page.

   Four changes, and three of them are punctuation.

   1. THE BREAK IS NOW A DECISION. "Memory," then "given light again." — the
      comma made into a line break, so the sentence is read in two beats
      instead of one. It reads slowly, which is what a conclusion needs.

   2. IT HAS A FULL STOP. The hero says "Memory, given light again" with no
      period, because an opening is unfinished. Here the same five words end
      with one. Same sentence, arriving rather than departing — and a reader
      feels that without ever noticing why.

   3. THE STAR MOVED UNDERNEATH IT. Above the line it was decoration. Below
      it, alone and centred, it is punctuation — the house mark used as a
      full stop, which is what the book says it is for.

   4. A LONG RULE ABOVE. A hairline the width of the column, the way the last
      line of a ledger is ruled off. It says: everything before this has been
      totalled, and here is what it comes to.
   ========================================================================== */

.close__return{
  font-size:clamp(32px,7.4vw,66px);
  line-height:1.06;
  letter-spacing:-.026em;
  max-width:none;
  margin:0 auto;
  padding-top:clamp(34px,5.6vh,64px);
  border-top:1px solid rgba(227,200,142,.34);
}
html[lang="ar"] .close__return{letter-spacing:0;line-height:1.36;max-width:none}

.close__star{
  display:block;width:18px;height:18px;
  fill:var(--gold-text);
  margin:clamp(26px,4.4vh,44px) auto 0;
  opacity:.85;
}

.close__ask{
  margin-top:clamp(44px,7.5vh,86px);
  padding-top:clamp(30px,4.8vh,50px);
}

/* ==========================================================================
   BUILD 34 — the last of the pale gold

   #B78A45 is the house gold. It is a beautiful metal color and a bad text
   color: on ivory it measures 3.02:1, well under the 4.5 floor. It was
   still being used for text in ten places — the footer mark, the hint, the
   role line, the fragment label, the litany, the closing meta — every one of
   them a label the eye had to work at.

   This is the fourth time the same fault has appeared, so it is being closed
   by rule rather than one selector at a time: every small label on the site
   now takes --gold-text, which resolves to #6E4E13 on light grounds and
   #E3C88E on dark ones. #B78A45 is kept for rules, marks and borders, where
   contrast ratios do not apply and it belongs.

   And the footer mark was still three terms. The method is four.
   ========================================================================== */

.foot{--gold-text:#6E4E13}
.foot__mark,
.hint,
.sig,
.last__meta,
.fragment__label,
.formula p,
.share__btn,
.proofshot__cap,
.door__count,
.invite__counter,
.litany li:last-child{
  color:var(--gold-text);
}

.foot__mark{font-size:11.5px;letter-spacing:.16em;line-height:1.7}
html[lang="ar"] .foot__mark{letter-spacing:0;font-size:13px}
.foot__line{color:rgba(21,53,45,.7);font-size:12.5px}

/* ==========================================================================
   BUILD 35 — the last sweep

   A final pass over every element that still resolved to the pale house gold
   for text. .door__cta on the mid door, and any label reached by an older
   declaration that a later block happened not to name. Text takes
   --gold-text; #B78A45 keeps rules, borders and marks, where a contrast
   ratio does not apply.
   ========================================================================== */

/* the mid door is an IVORY section, not a dark one — it was listed with the
   dark grounds by mistake in Build 19, which would have put pale gold on
   cream. Light ground, light-ground gold. */
.door--mid{--gold-text:#6E4E13;--ink:#15352D}
.door--mid .door__sub{color:rgba(21,53,45,.78)}
.door--mid .door__cta{color:var(--gold-text)}

.tw__line--close{color:#E3C88E}

/* the archive star is a mark, not a label — it may stay at house gold */
.star{color:var(--gold)}

/* ==========================================================================
   BUILD 36 — why none of it moved

   Every scroll device on this site was written with animation-timeline:view().
   That is a genuinely good technique — it runs on the compositor and cannot
   stutter a scroll — but it only exists in very recent browsers. On anything
   older the entire @supports block is skipped, and skipped silently: no
   error, no warning, just a page that does not move. Which is precisely what
   was happening.

   I built the whole motion system on a feature most phones do not have yet
   and wrote no fallback. That is the fault.

   The script now feature-tests it. Where the CSS timeline exists, nothing
   changes. Where it does not, the same motion is produced from a single
   requestAnimationFrame loop that writes two custom properties per visible
   element — --sc and --ty — which these rules apply as transform. Same
   amplitudes, same easing feel, same respect for reduced motion.
   ========================================================================== */

html.js-px [data-px]{
  transform:scale(var(--sc,1)) translateY(var(--ty,0px));
  will-change:transform;
}
html.js-px [data-px="pan"],
html.js-px [data-px="deep"]{transform-origin:50% 50%}

/* the containers that must clip a travelling picture */
html.js-px .sec--wide,
html.js-px .name__pic,
html.js-px .mood__f,
html.js-px .twosides__film,
html.js-px .proofshot{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html.js-px [data-px]{transform:none !important}
}

/* ==========================================================================
   BUILD 37 — the sources, at their real resolution

   The five frames were extracted from a process sheet at between 148 and 277
   pixels wide, upscaled twice, and only survived because I designed them
   small on purpose. These are the originals: 331 x 566 each, six of them,
   and the sixth is the working sheet — the Fish drawn in pencil with the
   cobalt and turquoise sitting beside it.

   That sixth frame changes what the chapter says. Five source images are a
   mood board. Five sources and the drawing they became is an argument: this
   is where it comes from, and this is what happened to it. It earns the
   closing line rather than decorating it.

   All six are portrait at the same aspect, so the row no longer needs two
   different ratios to sit level.
   ========================================================================== */

.mood__f img{aspect-ratio:331/566}
.mood__f--1 img,.mood__f--2 img{aspect-ratio:331/566}

@media (min-width:620px){
  .mood__strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:980px){
  .mood__strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
  .mood__f--6{transform:translateY(6px)}
}

/* the drawing is the one that is not a source — it is the result */
.mood__f--6{box-shadow:0 8px 24px rgba(21,53,45,.16)}

/* ==========================================================================
   BUILD 38 — the language bar was hidden until you scrolled

   .top was set to opacity:0 and visibility:hidden and only revealed once the
   reader had scrolled three quarters of the way past the opening film. On a
   single-language site that is a defensible piece of restraint. On a house
   published in four languages it is a serious fault: language is the first
   decision a visitor makes, and an Arabic or Spanish reader landing on the
   English page had no way to leave it without first scrolling through a
   chapter they could not read. Some of them will simply have gone.

   The bar is now present from the first frame. Over the dark opening it is
   transparent with the reverse logo and ivory type, held legible by a soft
   scrim rather than a panel. Once the opening is behind you it becomes the
   ivory bar it always was. Nothing is added to the page; the same header
   simply exists before it is scrolled to.
   ========================================================================== */

.top{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:background-color .45s,border-color .45s;
}

/* over the opening: no panel, just enough shade to keep the type readable */
.top::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(21,53,45,.55),rgba(21,53,45,0));
  transition:opacity .45s;
}
.top.is-on::before{opacity:0}

.top__logo{display:block;position:relative;line-height:0}
.top__mk{height:28px;width:auto;display:block;transition:opacity .45s}
@media (min-width:600px){.top__mk{height:34px}}
.top__mk--dark{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0}
.top.is-on .top__mk--light{opacity:0}
.top.is-on .top__mk--dark{opacity:1}

.langs a{color:rgba(243,234,223,.8)}
.langs a[aria-current="true"]{color:var(--ivory);background:rgba(243,234,223,.16)}
.langs a:hover{color:var(--ivory);background:rgba(243,234,223,.12)}

.top.is-on .langs a{color:rgba(21,53,45,.66);background:transparent}
.top.is-on .langs a[aria-current="true"]{color:var(--green);background:rgba(21,53,45,.09)}
.top.is-on .langs a:hover{color:var(--green);background:rgba(21,53,45,.06)}

/* ==========================================================================
   BUILD 39 — why the method was staggering

   Not a layout choice. When the four terms were rebuilt as a method in
   Build 28, the previous version's declarations were never removed and they
   reach the same elements. The old .rule__list was display:grid with
   justify-items:center — so every row was shrink-to-fit and centred in its
   own track. Rows with different amounts of text therefore started at
   different left edges, and the hairline under each ran a different width.
   That is the drift down the page.

   The old rule also left each row carrying a 68px font-size at line-height
   1.04, which the terms and clauses then overrode for themselves but which
   still set the line box — that is the excess vertical air.

   Both stale blocks are deleted rather than patched. The list is an ordinary
   block again: every row starts on the same margin, every rule spans the
   full column, and the spacing is the padding that was intended.
   ========================================================================== */

.rule__list{
  display:block;
  gap:0;
  justify-items:stretch;
  font-size:1rem;
  line-height:inherit;
}
.rule__i{
  margin:0;
  justify-items:stretch;
  padding-block:clamp(14px,2.2vh,22px);
}
.rule__i:last-child{border-bottom:0}

/* ==========================================================================
   BUILD 40 — the mechanism, and why it was failing

   The bug: every scroll device was written as

       animation: breath linear both;
       animation-timeline: view();

   A scroll-driven animation takes its progress from the timeline, so no
   duration is declared. But if the timeline does not attach — and @supports
   can answer yes to animation-timeline:view() on engines where it then does
   not behave — the animation falls back to a normal time-based one with the
   default duration of 0s. With fill mode "both" that pins every element on
   its final keyframe, permanently. Nothing moves, nothing errors, and the
   page looks precisely as if no animation had ever been written.

   That is the failure, and it is invisible from the code: the CSS is valid,
   the feature query passes, the keyframes are correct.

   The fix is to stop depending on it. One requestAnimationFrame loop now
   drives every device on every browser, writing --sc and --ty on visible
   elements only. It is the same technique that worked before, and it cannot
   silently do nothing. The CSS timeline animations are cancelled on these
   elements so the two cannot fight.
   ========================================================================== */

html.js-px [data-px]{
  animation:none !important;
  transform:scale(var(--sc,1)) translateY(var(--ty,0px));
  will-change:transform;
}
html.js-px .tw__field,
html.js-px .worn__i img,
html.js-px .group__img{animation:none !important}

/* reduced motion: no travel, no scale — but the pieces may still turn, as a
   cross-fade, which is the accommodation rather than a frozen page */
@media (prefers-reduced-motion:reduce){
  html.js-px [data-px]{transform:none !important}
  .tw__box{transition:none}
  .tw__i[data-turned="true"] .tw__box{transform:none}
  .tw__face{transition:opacity 900ms linear}
  .tw__face--b{display:block;transform:none;opacity:0}
  .tw__i[data-turned="true"] .tw__face--b{opacity:1}
  .tw__i[data-turned="true"] .tw__face--f{opacity:0}
}

/* ==========================================================================
   BUILD 41 — the mood board was blurry because I was magnifying it

   New sources are in: 327 x 659 each, measurably sharper than the last set.
   But the softness was not only the files. Those frames carried the deepest
   parallax on the site — scaling to 1.24 — and at 1.24 a 327px picture shown
   in a 180px frame on a 3x screen is being asked for roughly twice the
   detail it has. The magnification was doing as much damage as the source.

   So the travel on these frames is now the gentlest on the page rather than
   the deepest: 1.08 instead of 1.24. They still move — the row still has
   depth against the text around it — but nothing is enlarged past what the
   file can carry.

   The frames are also taller now, 327 x 659, which means less is cropped
   away by object-fit and more of each photograph survives.
   ========================================================================== */

.mood__f img{aspect-ratio:327/659}
.mood__f--1 img,.mood__f--2 img{aspect-ratio:327/659}

/* ==========================================================================
   BUILD 42 — show the whole photograph, and stop asking it to be bigger

   Two separate things were softening these, and neither was the file.

   1. THEY WERE BEING ENLARGED. Even the gentle parallax scaled them, and any
      scale above 1 on a 327px picture is asking for detail that is not in
      it. These frames now translate only. They move with the page and are
      never magnified by a single per cent.

   2. THEY WERE DISPLAYED TOO LARGE FOR THE SOURCE. Two per row on a phone
      gives each frame about 167 CSS pixels, which a 3x screen renders at
      501 device pixels from a 327 pixel file — a 1.5x upscale, and that is
      the blur. Three per row gives about 105 CSS pixels, which is 315 device
      pixels: below the file's own resolution, so it is downscaled and stays
      crisp. Six per row on a desktop lands at 180 CSS pixels against a 2x
      screen, which is near enough to native.

   Nothing is cropped: the frames are set to exactly the aspect of the files,
   so object-fit has nothing to cut. The whole photograph, at a size it can
   actually hold.
   ========================================================================== */

.mood__strip{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,2vw,16px);
}
@media (min-width:620px){
  .mood__strip{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:980px){
  .mood__strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
}

.mood__f{max-width:184px;justify-self:center;width:100%}
.mood__f img{
  width:100%;height:auto;
  aspect-ratio:327/659;
  object-fit:fill;
  image-rendering:auto;
}
.mood__f--6{transform:none}

/* ==========================================================================
   BUILD 43 — the blank page, and the rule that caused it

   The index of the twelve was invisible: its hairline drew, the rows took up
   their full height, and nothing appeared inside them. A blank ivory screen
   with one line across the top.

   The cause is mine, from Build 40. To stop the CSS scroll-timeline
   animations fighting the JavaScript driver I wrote

       html.js-px [data-px]{ animation:none !important }

   and the script marks .index__i as a parallax element. But .index__i was
   declared at opacity:0 and was made visible by an animation — riseIn. So
   the rule that was meant to cancel a competing transform also cancelled the
   only thing making those rows appear at all.

   The lesson, written down: never hide an element in CSS and rely on an
   animation to reveal it. If anything anywhere cancels animations — a
   preference, a fallback, a later rule, a script that fails — the content is
   gone, and gone silently. Elements are visible by default and animation
   only moves them.

   Every element the script touches is now audited for this. Only .index__i
   was affected; .worn__i and the rest use transitions on .rise, which
   survive an animation reset.
   ========================================================================== */

.index__i{opacity:1;transform:none}
html.js-px .index__i,
html.js-px .worn__i,
html.js-px .group,
html.js-px .mood__f,
html.js-px .tw__i{opacity:1}

/* the stagger is kept, but as a transition on a visible element rather than
   an animation that owns its visibility */
.index .index__i{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.index.is-in .index__i{animation:none}

/* ==========================================================================
   BUILD 44 — the chapters that were still standing still

   Some sections moved and some did not, which reads worse than nothing
   moving at all: the eye notices the inconsistency before it notices the
   motion. The cause was simply that the driver was given a list of
   selectors, and four photographs were not on it —

     the-table.jpg      the working chapter
     the-sheet.jpg      the repetition chapter
     group-mixed-tall   the reverses plate in "Finished on both sides"
     ancient-gaze.jpg   the plate behind "What remains?"

   Every one of them a full-bleed photograph in a chapter whose neighbours
   were travelling. All four are now driven, and their containers clip, so
   they behave like everything else.

   The three that remain deliberately still: the two films, which move by
   themselves, and the signatures, which are handwriting and should sit
   where they were put.
   ========================================================================== */

html.js-px .split .figure,
html.js-px .seek__sticky,
html.js-px .sec--plate,
html.js-px .sec--stone{overflow:hidden}

html.js-px .seek__img,
html.js-px .plate__img,
html.js-px .split .figure img{
  width:100%;height:auto;display:block;
}

/* ==========================================================================
   BUILD 45 — the header mark

   The header was carrying the full stacked lockup: the arch, MISHKAH and
   مشكاة, one above the other, in 28 pixels of height. Measured, that puts
   the wordmark at roughly 3 pixels tall. It was not small, it was gone —
   a smudge where a name should be.

   The lockup is not a header mark and cannot be made into one by enlarging
   it: for the wordmark to reach a legible 11 pixels the whole lockup would
   need to be about 110 pixels tall, which is a masthead, not a bar.

   The logo pack already answers this: below 28 pixels wide, use the arch
   alone. So the header now carries the arch — one clear glyph at 38 pixels,
   in ivory over the opening and gold below it. The house name is in the
   page title, the hero and the aria-label, so nothing is lost to a reader
   or to a search engine.
   ========================================================================== */

.top__mk{
  height:38px;width:auto;
}
@media (min-width:600px){.top__mk{height:46px}}

/* ==========================================================================
   BUILD 46 — the field Safari fills for you

   Safari paints its own yellow over an autofilled input and there is no way
   to set the background directly. The trick is a very long inset box-shadow,
   which paints above it, plus -webkit-text-fill-color for the text.
   ========================================================================== */

.close__form input:-webkit-autofill,
.close__form input:-webkit-autofill:hover,
.close__form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #FFFCF7 inset;
  box-shadow:0 0 0 1000px #FFFCF7 inset;
  -webkit-text-fill-color:var(--green);
  caret-color:var(--green);
  transition:background-color 9999s ease-in-out 0s;
}

/* ==========================================================================
   BUILD 47 — the hero was black whenever the film did not play

   The opening film is designed to begin in darkness and find its own light,
   which is right. But its poster frame was taken from that first moment:
   measured, the file had a mean brightness of 0.4 out of 255 — a black
   rectangle. So on every occasion the video does not autoplay, the first
   thing a visitor sees is nothing at all.

   Video does not autoplay in iOS Low Power Mode, on a slow connection before
   enough has buffered, under Data Saver, or in several in-app browsers.
   That is not an edge case; it is a normal share of arrivals, and every one
   of them was landing on a black screen.

   The poster is now the film's resolved frame — the Eye, lit, on skin. And
   the same frame sits behind the video as a background image, so the hero
   shows the jewel from the first paint whatever the video does. When the
   film plays it covers it; when it cannot, nothing is lost.
   ========================================================================== */

.open__film{
  background-image:url("../video/opening-poster.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--green);
}
.open__video{position:relative;z-index:1}

/* the text over it stays legible against either */
.open__in{position:relative;z-index:2}

/* a film that refuses to start steps aside for the still behind it */
.open__video.is-stalled{opacity:0}
.open__video{transition:opacity .5s ease}

/* ==========================================================================
   BUILD 48 — a door with nothing to open

   The mid door said "order before anyone else", explained the offer, and
   then offered a button that only scrolled somewhere else. Worse, the button
   carried the same words as the submit button in the finale, so it looked
   like it would take an address and did not. Someone reading that section is
   at the point of most wanting one; sending her away to find a field is how
   a signup is lost.

   The door now takes an email itself. Same component, same endpoint, same
   messages — the script binds to every form carrying data-join rather than
   to one id, so both places work and analytics records which one converted.
   ========================================================================== */

.door__form{
  display:grid;
  gap:10px;
  max-width:420px;
  margin:0 auto;
  text-align:start;
}
@media (min-width:560px){
  .door__form{grid-template-columns:minmax(0,1fr) auto;gap:10px}
}

.door__form input[type="email"]{
  width:100%;padding:15px 17px;font:inherit;font-size:16px;line-height:1.3;
  color:var(--green);background:#FFFCF7;
  border:1px solid rgba(21,53,45,.28);border-radius:3px;
  text-align:start;appearance:none;-webkit-appearance:none;
}
.door__form input::placeholder{color:rgba(21,53,45,.42)}
.door__form input:focus{
  outline:0;border-color:var(--gold-text);
  box-shadow:0 0 0 3px rgba(110,78,19,.14);
}
.door__form input:-webkit-autofill,
.door__form input:-webkit-autofill:hover,
.door__form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #FFFCF7 inset;
  box-shadow:0 0 0 1000px #FFFCF7 inset;
  -webkit-text-fill-color:var(--green);
  transition:background-color 9999s ease-in-out 0s;
}

.door--mid .door__btn{
  display:block;width:100%;
  padding:15px 26px;border:0;border-radius:3px;cursor:pointer;
  background:var(--green);color:var(--ivory);
  font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .25s,transform .1s;
}
html[lang="ar"] .door--mid .door__btn{letter-spacing:0;font-size:15px;font-weight:600}
.door--mid .door__btn:hover{background:var(--carbon)}
.door--mid .door__btn:active{transform:translateY(1px)}
.door--mid .door__btn[disabled]{opacity:.6;cursor:progress}

.door--mid .msg{
  margin:14px auto 0;max-width:420px;
  font-size:14px;line-height:1.6;color:var(--green);text-align:center;
}
.door--mid .msg--err{color:#7A2E22}
.door--mid .msg__body{display:block;margin-top:5px;font-size:13px;color:rgba(21,53,45,.7)}

/* ==========================================================================
   BUILD 49 — the signature was on the wrong margin in Arabic

   margin-inline takes start then end, and the rule had been written the
   other way round: margin-inline:auto 0 pushes an element to the END edge,
   which in Arabic is the left. So the signature sat opposite the role line
   beneath it and opposite every other line in the chapter — the one place
   on the page where the eye had to cross the column to follow the writing.

   A signature belongs on the same margin the writing ends on. Set once, in
   logical properties, so it is the right edge in Arabic and the left in the
   other three without a separate rule for each.
   ========================================================================== */

.founder__sig{
  margin-inline:0 auto;
  margin-block:clamp(30px,5vh,54px) 12px;
}
.founder .sig{text-align:start}
.founder__cv{text-align:start}

/* ==========================================================================
   BUILD 50 — where it is made

   "Made by hand, and slowly" was true and unprovable. A named place is a
   different kind of claim: Andalusia is the house's grammar, and a small
   workshop outside Granada is where that grammar is actually cut in metal.
   Design and manufacture in the same place is rare enough at this scale to
   be worth stating plainly, once, where the collection is introduced.

   Stated twice, like the rest: once in full where the twelve are named, and
   once as a quiet line in the footer, which is where a reader looks when she
   is deciding whether a house is real.
   ========================================================================== */

.foot__place{
  font-family:var(--body);
  font-size:12.5px;line-height:1.7;
  color:rgba(21,53,45,.7);
  margin:8px 0 0;
}
html[lang="ar"] .foot__place{font-size:14px;line-height:1.9}

.edition{max-width:30ch}
html[lang="ar"] .edition{max-width:34ch}

/* ==========================================================================
   BUILD 51 — the source, photographed by the person who used it

   The six frames in this chapter were extracted from a process sheet: small,
   generated, and standing in for something. They are now Hala's own
   photographs of the Alhambra — the tilework, a muqarnas star, carved
   plaster over painted zellige, an arch with someone looking through it, the
   vault of a hall, and the place itself at the end of the day.

   That is a different claim entirely. A generated mood board says here is
   the kind of thing we like. A photograph taken by the designer, in the
   building, says she went and stood there. Nobody can fake the second one,
   and it is the first genuinely real image on this site.

   Held deliberately small. Shown as pinned references rather than plates,
   with one quiet line of credit — Granada, photographed by Hala Hijazi.
   The restraint is the point: these are working pictures, not campaign
   photography, and they should look like what they are.

   And the muqarnas moves. A slow tilt down a vault, cut forward and then
   reversed so it never jumps, silent, looping. It is the only thing on the
   page that moves without being scrolled, which is why it sits alone
   between the sources and the line that closes the chapter.
   ========================================================================== */

.mood__cred{
  font-family:var(--body);
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);
  margin:clamp(18px,3vh,26px) 0 0;
}
html[lang="ar"] .mood__cred{letter-spacing:0;font-size:13px;font-weight:500}

.mood__film{
  margin:clamp(34px,6vh,64px) 0 0;
  overflow:hidden;
  background:var(--green);
}
.mood__film video{
  width:100%;height:auto;display:block;
  max-height:78svh;
  object-fit:cover;
}
@media (min-width:900px){
  .mood__film{margin-inline:var(--gut)}
  .mood__film video{max-height:72svh}
}

.mood__note{margin-top:clamp(28px,4.6vh,48px)}

/* ==========================================================================
   BUILD 52 — the photograph of her

   The fourth frame in the sources was Hala, seen from behind, in the
   Alhambra, looking out through an arched window. Sitting in a row of small
   pinned references it was one texture among six.

   It belongs to the founder chapter, and it is worth more than a portrait
   would be. A portrait asks to be looked at. This one is looking at
   something else, so it stays as reserved as she asked to be, and it says
   the thing the whole house is built on: an opening, and what is seen
   through it. She is standing inside her own idea, in the building the
   grammar comes from.

   No caption. The credit line in the sources already says these are hers;
   here she is the subject rather than the photographer, and a caption would
   turn a quiet picture into an announcement.

   On a wide screen it sits beside the writing; on a phone it comes first,
   so you meet her before you read her.
   ========================================================================== */

.founder__pic{
  margin:0 0 clamp(30px,5vh,52px);
  overflow:hidden;
  max-width:420px;
}
.founder__pic img{width:100%;height:auto;display:block}

@media (min-width:900px){
  .founder .wrap{max-width:1180px}
  .founder__pic{
    float:inline-end;
    max-width:38%;
    margin:0 0 clamp(24px,3vw,36px) clamp(30px,4vw,56px);
  }
  html[dir="rtl"] .founder__pic{margin:0 clamp(30px,4vw,56px) clamp(24px,3vw,36px) 0}
  .founder .sig,.founder__sig{clear:both}
}

/* six again: three across on a phone, six on a wider screen */
@media (min-width:620px){
  .mood__strip{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ==========================================================================
   BUILD 53 — the top door takes an email too

   It had a link that scrolled the whole page to the finale. That is a long
   way to send someone who is ready now, and a smooth scroll across twenty
   sections reads as the page running away from you rather than helping.

   So the door takes an address itself. But it stays a door: one underlined
   field on a single line, no panel, no block button — the same weight as the
   line of text beside it. Someone who came back to order can act in two
   taps; someone who did not still sees a quiet strip and scrolls past it.

   Three places to join now — here, the mid door, and the close — all the
   same component, all recorded separately so it is clear in a month which
   moment actually converts.
   ========================================================================== */

.door--top .door__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 16px;
}

.door__slim{
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(21,53,45,.32);
  padding-bottom:3px;
  transition:border-color .25s;
}
.door__slim:focus-within{border-bottom-color:var(--gold-text)}

.door__slim input[type="email"]{
  font:inherit;
  font-size:16px;               /* 16 or iOS zooms the page on focus */
  line-height:1.3;
  width:clamp(150px,42vw,215px);
  padding:2px 0;
  color:var(--green);
  background:transparent;
  border:0;border-radius:0;
  appearance:none;-webkit-appearance:none;
}
.door__slim input:focus{outline:0}
.door__slim input::placeholder{color:rgba(21,53,45,.4)}
.door__slim input:-webkit-autofill,
.door__slim input:-webkit-autofill:hover,
.door__slim input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--ivory) inset;
  box-shadow:0 0 0 1000px var(--ivory) inset;
  -webkit-text-fill-color:var(--green);
  transition:background-color 9999s ease-in-out 0s;
}

.door__slim button{
  flex:0 0 auto;
  font-family:var(--body);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);
  background:none;border:0;padding:2px 0;cursor:pointer;
  transition:color .2s;
}
html[lang="ar"] .door__slim button{letter-spacing:0;font-size:15px;font-weight:600}
.door__slim button:hover{color:var(--gold-text)}
.door__slim button[disabled]{opacity:.5;cursor:progress}

.door--top .msg{
  flex:1 1 100%;
  margin:6px 0 0;text-align:center;
  font-size:13px;line-height:1.55;color:var(--green);
}
.door--top .msg--err{color:#7A2E22}
.door--top .msg__body{display:block;margin-top:3px;font-size:12.5px;color:rgba(21,53,45,.68)}

/* ==========================================================================
   BUILD 54 — the scroll landed in the wrong place

   Tapping "Get first access" ended halfway up the founder chapter instead of
   at the form. Not a scrolling fault: a reflow one.

   None of the five videos declared a size. A <video> with no dimensions and
   preload="none" occupies zero height until its metadata arrives. So the
   page begins scrolling, the videos further down load, each one suddenly
   claims several hundred pixels, everything below is pushed down, and the
   smooth scroll — which committed to a position before any of that happened
   — finishes short of where the form now is.

   All five now carry their true width and height, so the browser reserves
   the right box from the first paint and nothing moves under the scroll.
   The same fault was also causing content to shift while reading; it just
   was not visible until something depended on a fixed position.

   And the target gets a scroll margin, so it clears the header instead of
   sitting underneath it.
   ========================================================================== */

video{height:auto;max-width:100%}
.open__video{height:100%}

#join-section{scroll-margin-block-start:clamp(72px,12vh,110px)}
#collection,#the-turn,#the-name,#founder{scroll-margin-block-start:clamp(72px,12vh,110px)}

/* ==========================================================================
   BUILD 55 — the black mask over the page on iOS

   Mine, from Build 40. When I moved the motion into JavaScript I wrote

       html.js-px [data-px]{ will-change:transform }

   and the script marks about forty-five elements — twelve turning pieces,
   twelve index rows, six sources, the worn shots, every full-bleed
   photograph. will-change promotes each of those to its own GPU layer, and
   keeps it promoted for the life of the page whether it is on screen or not.
   Add twelve 3D flip contexts and a blurred backdrop on the header and iOS
   runs out of layer memory. When it does, Safari does not degrade: it
   renders the compositing area black. Which is exactly what is described —
   a black mask over the page, clearing near the end where fewer layers
   remain in play.

   Three corrections:

   The blanket will-change is gone. A transform written every frame is
   promoted by the browser anyway for as long as it is actually moving; the
   hint bought nothing and cost forty-five permanent layers.

   The header's backdrop blur is gone. backdrop-filter is the single most
   reliable way to provoke this on iOS, and a 97% opaque ivory bar is
   visually the same thing without a live blur behind it.

   And the flip cards only take a 3D context while they are turning, so
   twenty-four permanent layers become however many are mid-turn.
   ========================================================================== */

html.js-px [data-px]{will-change:auto}
.rise,.rise.is-in{will-change:auto}
html.mv [data-mv]{will-change:auto}

.top.is-on{
  background:rgba(243,234,223,.975);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* a 3D context only while the piece is actually turning */
.tw__box{transform-style:flat}
.tw__i[data-moving="true"] .tw__box{transform-style:preserve-3d;will-change:transform}
.tw__i[data-turned="true"] .tw__box{transform-style:preserve-3d}

/* ==========================================================================
   BUILD 56 — one action, one name

   The same button was called three different things: "Join" at the top door,
   "Join the list" at the mid door, "Enter Mishkah" at the close. A reader has
   no way to know those are the same act, so the page reads as three offers
   rather than one. All three now say the same words, in each language.

   "Enter Mishkah" went because it described entering rather than joining,
   and because it collided with the hero's own call.

   The finale also still claimed "made by hand, and slowly" — the line the
   provenance replaced. Naming Granada and then falling back to an unprovable
   phrase at the moment of the ask is the wrong order. The close now carries
   the same fact as the collection: where the work is done, and by whom.

   And the button gets an explicit background clip, because on iOS a
   :hover state left mid-scroll can paint a band of its hover colour across
   the top edge of a button that has no border to contain it.
   ========================================================================== */

.close__btn{
  background-clip:padding-box;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
}
@media (hover:none){
  .close__btn:hover,
  .door--mid .door__btn:hover,
  .door__slim button:hover{background:var(--ivory);color:var(--green)}
  .door--mid .door__btn:hover{background:var(--green);color:var(--ivory)}
  .door__slim button:hover{background:none;color:var(--green)}
}

/* ==========================================================================
   BUILD 57 — the opening was painting over the rest of the page

   The hero is a video with a dark gradient over it, both inside a section
   set to overflow:hidden. That should be the end of it. But on iOS, a
   playing <video> is handed to a separate compositor, and overflow:hidden
   on an ancestor does not always clip what that compositor draws. The video
   and the scrim above it keep painting at their original screen position
   while the page scrolls underneath — which reads exactly as described: a
   mask from the top of the page that travels down and darkens everything.

   overflow:hidden is a hint here, not a guarantee. Three things that are:

     contain:paint       tells the browser nothing inside may paint outside
     clip-path:inset(0)  clips on the compositor itself, where the video lives
     isolation:isolate   gives the hero its own stacking context so nothing
                         in it can composite against what comes after

   Applied to the section and to the film inside it, so the clip holds at
   both levels. The scrim is also pinned to the film rather than the section,
   so it can never be taller than the picture it darkens.
   ========================================================================== */

.open{
  contain:paint;
  isolation:isolate;
  clip-path:inset(0);
  -webkit-clip-path:inset(0);
}
.open__film{
  contain:paint;
  isolation:isolate;
  clip-path:inset(0);
  -webkit-clip-path:inset(0);
  overflow:hidden;
}
.open__film::after{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.open__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* the same guarantee for every other video on the page */
.twosides__film,
.seek__film--tall,
.seek__film--wide,
.mood__film{
  contain:paint;
  isolation:isolate;
  clip-path:inset(0);
  -webkit-clip-path:inset(0);
  overflow:hidden;
}