/* ============================================================
   DAMASCENE — Scenes
   Each scene owns its own layout and its own motion idea.
   ============================================================ */

/* ============================================================
   01 · ARRIVAL — THE CASE
   Image-led and still. Five pieces set out on one baseline like a
   line of type. Nothing is scaled past its source resolution, so
   nothing softens. The only motion is weight: things settle, then
   lift away at their own rates.
   ============================================================ */
.hero{height:150svh;background:var(--sand);color:var(--ink);}
.hero__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--edge) * 3.4) var(--edge) 0;
}

/* --- the masthead line of the composition: label left, standfirst right
   The slack collects above this row, under the header, where it reads as
   breathing room. Anywhere lower it would read as a hole. */
.hero__meta{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--gut);margin-top:auto;margin-bottom:clamp(2rem,5.4vh,4rem);
}
.hero__note{
  max-width:34ch;font-size:var(--t-sm);line-height:1.74;opacity:.8;
  text-align:right;flex:none;
}

/* --- the statement ---------------------------------------- */
/* The statement is read clear of the case rather than resting on it. The
   slack still collects above the meta row, where it reads as breathing room
   under the masthead — the air below this line is a stated measure, not the
   leftover of the layout, so it cannot open into a hole on a tall screen.
   It is taken back off the row above, which keeps the standfirst and the
   statement reading as one group and leaves a short screen no worse off. */
.hero__upper{
  position:relative;z-index:4;pointer-events:none;
  margin-top:0;
  margin-bottom:clamp(1.4rem,6.6vh,5.4rem);
}
.hero__type{line-height:.9;letter-spacing:-.024em;}
.hero__line{display:block;overflow:hidden;padding-block:.13em;margin-block:-.13em;}
.hero__line>span{display:block;}
/* The statement is set as separate words so each can be written in on its
   own. Nothing finer than a word: kerning does not survive being cut between
   two elements, and a word is the smallest piece that still measures exactly
   what the face sets. No will-change and no layer of its own either — a word
   is transformed once, on the way in, and after that it has to sit on the
   baseline and rasterise like the plain text it is. */
.hero__word{display:inline-block;white-space:nowrap;}

/* --- the case --------------------------------------------- */
.hero__case{
  /* centred with even gaps rather than justified to the page edges: the
     baseline runs past the outermost pieces, which reads as a line of type
     rather than a row stretched to fit */
  display:flex;align-items:flex-end;justify-content:center;
  width:100%;gap:clamp(.8rem,2.3vw,2.7rem);position:relative;z-index:1;
  /* One knob for the whole case. The widths below are the drawn proportions
     and stay as written; this sets the case down as a set, so the row can be
     sized without disturbing the relationship between the pieces. Only ever
     below 1 — past it a piece would be drawn larger than its source. */
  --case:.91;
}
.piece--1,.piece--3{z-index:2;}
.piece{position:relative;flex:none;width:calc(var(--w) * var(--case,1));
  will-change:transform;}
.piece__in{display:block;will-change:transform,filter,opacity;}
.piece img{width:100%;height:auto;
  filter:drop-shadow(0 12px 14px rgba(74,40,26,.14));}
/* the contact shadow is what puts each piece on the line — without it the
   objects read as floating, because each was photographed from its own angle */
.piece::after{
  content:"";position:absolute;z-index:-1;left:-9%;right:-9%;bottom:-5px;height:30px;
  background:radial-gradient(50% 50% at 50% 50%,
             color-mix(in oklab,#3A1D12 50%,transparent) 0%,
             color-mix(in oklab,#3A1D12 20%,transparent) 44%,
             transparent 76%);
  filter:blur(8px);
}
.piece figcaption{
  position:absolute;top:calc(100% + 1.05rem);left:0;white-space:nowrap;
  font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;opacity:.7;
}
/* the contact shadow grows with the piece as it is set down */
.piece::after{scale:var(--sh,1);transform-origin:50% 100%;}
/* widths tuned like letter widths, not like a grid */
/* Four pieces, not five. Widths chosen so they land at similar OPTICAL
   HEIGHTS rather than equal widths — a wide-ratio object rendered at an
   equal width comes out shortest and reads as the weak link. */
.piece--1{--w:22.5vw;}   /* 1.63 ratio — the footed stand */
.piece--2{--w:19.5vw;}   /* 1.53 — the gilt plate         */
.piece--3{--w:24vw;}     /* 1.64 — the rosette            */
.piece--4{--w:12vw;}     /* 1.15 — the full stop          */

/* --- the line everything sits on --------------------------- */
.hero__rule{position:relative;height:1px;width:100%;z-index:0;}
.hero__rule i{display:block;height:1px;width:100%;transform-origin:0 50%;
  background:color-mix(in oklab,var(--ink) 34%,transparent);}

.hero__foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gut);
  padding:clamp(3.2rem,6.4vh,4.4rem) 0 clamp(1rem,2.2vh,1.7rem);
}

/* ============================================================
   02 · THE LEXICON  (pinned horizontal register)
   Motion idea: lateral travel. Entries arrive from the reading
   direction; objects lag behind their type.
   ============================================================ */
.lex{position:relative;z-index:3;background:var(--ink);}
.lex__pin{position:sticky;top:0;height:100svh;overflow:hidden;}
.lex__rail{display:flex;height:100%;will-change:transform;}
.lex__intro{
  position:relative;flex:none;width:min(84vw,820px);height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:var(--stack-m);
  padding:calc(var(--edge) * 1.5) calc(var(--edge) * 1.35);
  background:var(--ink);color:var(--sand);overflow:hidden;isolation:isolate;
}
.lex__title{font-size:var(--t-xxl);line-height:.96;letter-spacing:-.018em;max-width:14ch;}
.lex__intro .lede{max-width:38ch;}
.lex__introBleed{position:absolute;inset:0;z-index:-1;}
.lex__introBleed img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;}
.lex__introBleed img{transform:scale(var(--lex-z,1.06));transform-origin:62% 50%;}
.lex__introBleed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 4%,
             color-mix(in oklab,var(--ink) 86%,transparent) 44%,
             color-mix(in oklab,var(--ink) 30%,transparent) 100%);}
.lex__count{display:flex;align-items:baseline;gap:.8rem;opacity:.7;}

.entry{
  flex:none;position:relative;height:100%;width:min(84vw,780px);
  padding:calc(var(--edge)*1.4) var(--edge) var(--edge);
  display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:var(--bg);color:var(--fg);
  border-left:1px solid var(--rule);
}
.entry__idx{position:absolute;top:calc(var(--edge)*1.15);left:var(--edge);opacity:.66;}
.entry__head{margin-top:auto;display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;}
.entry__latin{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.75rem,2.75vw,2.75rem);letter-spacing:-.016em;line-height:1;}
.entry__ipa{font-size:var(--t-sm);opacity:.74;font-style:italic;}
.entry__pos{font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;opacity:.68;}
.entry__def{margin-top:1.05rem;padding-top:1.05rem;max-width:40ch;
  font-size:var(--t-sm);line-height:1.75;opacity:.92;
  border-top:1px solid var(--rule);}
.entry__obj{position:absolute;pointer-events:none;will-change:transform;}
.entry__obj img{width:100%;height:auto;filter:drop-shadow(0 34px 46px rgba(0,0,0,.42));}
.entry__bleed{position:absolute;inset:0;z-index:-2;}
.entry__bleed img,.entry__bleed video{width:100%;height:100%;object-fit:cover;}
.entry__bleed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in oklab,var(--bg) 88%,transparent) 8%,
             color-mix(in oklab,var(--bg) 10%,transparent) 62%);}

/* per-entry art direction — deliberately not a repeated component */
.entry--baklava  { --bg:var(--rose);     --fg:var(--sand); }
.entry--baklava  .entry__obj{right:-16%;top:8%;width:78%;}
.entry--qishta   { --bg:var(--sand);     --fg:var(--ink);  width:min(88vw,900px); }
.entry--qishta   .entry__obj{right:-6%;top:14%;width:62%;}
.entry--knafeh   { --bg:var(--ink);      --fg:var(--sand); }
.entry--knafeh   .entry__obj{left:50%;translate:-50% 0;top:4%;width:66%;}
.entry--knafeh   .entry__head{justify-content:center;}
.entry--knafeh   .entry__def{margin-inline:auto;}
.entry--knafeh   .entry__def{margin-inline:auto;text-align:center;}
.entry--shamiyat { --bg:var(--rose-120); --fg:var(--sand); width:min(90vw,940px); }
.entry--shamiyat .entry__obj{left:-14%;bottom:6%;width:70%;}
.entry--shamiyat .entry__body{margin-left:auto;text-align:right;max-width:24ch;}
.entry--shamiyat .entry__head{justify-content:flex-end;}
.entry--shamiyat .entry__def{margin-left:auto;}
.entry--maamoul  { --bg:var(--sand-dark);--fg:var(--ink);  width:min(74vw,660px); }
.entry--booza    { --bg:var(--ink-90);   --fg:var(--sand); }
.entry--booza    .entry__obj{right:-10%;top:16%;width:70%;}

.lex__end{
  position:relative;flex:none;width:min(78vw,720px);height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:var(--stack-m);
  padding:var(--edge);background:var(--ink);color:var(--sand);
  border-left:1px solid var(--rule);overflow:hidden;
}
.lex__rest{font-size:clamp(1.3rem,1.85vw,1.9rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:-.008em;}
.lex__endObj{position:absolute;right:-22%;bottom:-14%;width:56%;pointer-events:none;
  opacity:.85;}
.lex__endObj img{width:100%;height:auto;filter:drop-shadow(0 30px 44px rgba(0,0,0,.55));}

/* ============================================================
   03 · THE MATERIAL  (the specimen slide)
   Motion idea: the scroll drives the pour. Nothing loops, so nothing
   repeats; the clip only ever advances. The plate is feathered into the
   ground on every edge, so there is no frame, no seam and no right-hand
   line to catch — the failure the previous rectangle kept producing.
   ============================================================ */
.material{position:relative;height:190svh;z-index:3;background:var(--rose-120);}
.material__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;
  align-content:center;}
.material__grid{
  display:grid;grid-template-columns:1fr;gap:var(--stack-l);align-items:center;
}
@media (min-width:900px){
  .material__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:calc(var(--gut) * 1.15);}
}
.material__col{display:grid;gap:var(--stack-m);color:var(--sand);max-width:42ch;}
.material__count{display:flex;align-items:baseline;gap:.8rem;}
.material__n{font-family:var(--font-display);font-size:clamp(2.2rem,3.6vw,4rem);line-height:.86;}
.material__unit{opacity:.72;padding-bottom:.5em;}
.material__lede{max-width:34ch;}

/* the three terms, set as a specimen list rather than pinned onto the image */
.material__spec{display:grid;gap:0;border-top:1px solid var(--rule-on-rose);}
.spec{display:grid;grid-template-columns:minmax(0,8.5rem) 1fr;gap:1rem;
  padding-block:.78rem;border-bottom:1px solid var(--rule-on-rose);
  font-size:var(--t-sm);}
.spec dt{font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;opacity:.62;padding-top:.22em;}
.spec dd{opacity:.94;}

/* --- the plate ------------------------------------------------
   A soft aperture, not a frame. The mask is composited from two linear
   gradients so all four edges dissolve into the rose. */
.material__plate{
  position:relative;width:100%;aspect-ratio:16/9.4;overflow:hidden;
  border-radius:var(--radius-plate);will-change:transform;
  box-shadow:0 0 0 1px color-mix(in oklab,var(--sand) 16%,transparent),
             0 44px 90px -30px rgba(0,0,0,.5);
}
.material__plate video,.material__plate img{
  width:100%;height:100%;object-fit:cover;display:block;
  scale:var(--m-z,1.06);transform-origin:52% 48%;
}
.material__side{
  position:absolute;right:calc(var(--edge) * .55);top:50%;translate:0 -50%;z-index:4;
  writing-mode:vertical-rl;font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--sand);opacity:.34;
}

/* ============================================================
   04 · THE HAND  (craft — the quiet scene)
   Motion idea: near stillness. One arch, one cut, one sentence.
   ============================================================ */
.hand{position:relative;z-index:3;background:var(--ink);color:var(--sand);
  padding-block:var(--scene-y);}
.hand__grid{display:grid;grid-template-columns:1fr;gap:var(--stack-l);align-items:center;}
@media (min-width:900px){
  .hand__grid{grid-template-columns:1.05fr .95fr;gap:var(--gut);}
}
.hand__arch{
  position:relative;width:min(100%,600px);aspect-ratio:3/3.9;justify-self:center;
  clip-path:var(--arch);overflow:hidden;background:var(--ink-90);
}
.hand__arch video,.hand__arch img{width:100%;height:100%;object-fit:cover;}
.archline{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  color:color-mix(in oklab,currentColor 22%,transparent);}
.hand__body{display:grid;gap:var(--stack-m);max-width:40ch;}
.hand__q{font-family:var(--font-display);font-size:clamp(1.65rem,2.6vw,2.85rem);
  line-height:1.06;text-transform:uppercase;letter-spacing:-.014em;}
.hand__spec{display:grid;gap:.55rem;border-top:1px solid var(--rule);padding-top:1.1rem;}
.hand__spec div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);
  padding-block:.5rem;border-bottom:1px solid color-mix(in oklab,var(--sand) 9%,transparent);}
.hand__spec div:last-child{border-bottom:0;}
.hand__spec dt{opacity:.72;letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-xs);
  align-self:center;}
.hand__spec dd{opacity:.95;}

/* ============================================================
   05 · THE ORIGIN  (Damascus — the pace change)
   Rebuilt. It used to be a headline on an empty screen followed by a
   small picture, so it read as two weak halves. It is now one held
   composition: a tall aperture opposite a single column of type, on a
   shared vertical thread, with the petals drifting on their own clock.
   The scene is pinned so the pace genuinely changes.
   ============================================================ */
.origin{position:relative;z-index:3;height:155svh;background:var(--sand);color:var(--ink);}
.origin__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-content:center;
}
.origin__grid{
  display:grid;grid-template-columns:1fr;gap:var(--stack-l);
  align-items:center;position:relative;z-index:1;
  padding-top:clamp(3.5rem,7vh,5rem);
}
@media (min-width:960px){
  .origin__grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
    gap:calc(var(--gut) * 1.5);padding-top:0;
  }
}

/* --- the aperture --------------------------------------------- */
.origin__win{
  position:relative;width:min(100%,520px);aspect-ratio:3/3.7;overflow:hidden;
  clip-path:var(--arch);background:var(--sand-dark);justify-self:start;
  --reveal:0;
}
.origin__win img{
  width:100%;height:100%;object-fit:cover;
  /* biased low and held a little wide: the wall relief is beautiful but it
     should not take half the aperture */
  scale:var(--o-z,1.2);transform-origin:50% 82%;
  clip-path:inset(calc(100% - var(--reveal) * 100%) 0 0 0);
}
.origin__win .archline{color:color-mix(in oklab,var(--ink) 34%,transparent);}
.hand__arch .archline{color:color-mix(in oklab,var(--sand) 20%,transparent);}

/* --- the column ----------------------------------------------- */
.origin__text{display:grid;gap:var(--stack-m);max-width:46ch;}
.origin__lede{max-width:40ch;}
.origin__pull{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.45rem,2.15vw,2.25rem);line-height:1.14;letter-spacing:-.012em;
}
.origin__rose{display:grid;gap:.45rem;border-left:1px solid var(--rule);padding-left:1.15rem;}

/* --- the thread running between the two ------------------------ */
.origin__thread{position:absolute;left:calc(50% - var(--gut) * .18);top:-8vh;bottom:-8vh;
  width:1px;pointer-events:none;display:none;z-index:0;}
@media (min-width:960px){.origin__thread{display:block;}}
.origin__thread svg{height:100%;width:2px;overflow:visible;}
.origin__thread path{fill:none;stroke:var(--ink);stroke-opacity:.2;stroke-width:1;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);}

.petals{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.petal{position:absolute;width:7px;height:11px;
  border-radius:70% 30% 62% 38%/58% 42% 58% 42%;
  background:color-mix(in oklab,var(--rose) 62%,var(--sand));
  opacity:0;will-change:transform;filter:blur(.2px);}

/* ============================================================
   06 · THE GIFT  (the object)
   Motion idea: the scroll opens the box; the pointer gives it weight.
   The object bleeds off the right edge so the page cannot contain it.
   ============================================================ */
.gift{position:relative;z-index:3;height:260svh;background:var(--rose);color:var(--sand);}
.gift__pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.5rem,4vw,4rem);padding:var(--edge);}
.gift__copy{display:grid;gap:var(--stack-m);max-width:34ch;z-index:3;position:relative;}
/* The statement takes a forced two-line break, and its longer line has to sit
   inside the reading measure next to it. The measure is 34ch of the UI face, on
   the --t-md curve; the statement is on --t-lg. Across every desktop width those
   two curves run near enough parallel to leave 2–6px between them — inside the
   variance of one platform's rasterisation against another, so the line would
   break to three on a machine that sets it a hair wider. Set a step down here,
   which buys it real clearance and leaves the shared d-lg scale alone. */
.gift__copy .display{font-size:clamp(1.45rem,2.34vw,2.7rem);}
.gift__line{border-top:1px solid var(--rule);padding-top:1.1rem;opacity:.82;}
.gift__obj{
  position:relative;z-index:1;justify-self:end;
  width:min(74vw,900px);aspect-ratio:16/9;
  margin-right:calc(var(--edge) * -1 - 3vw);
  transform:perspective(1500px) rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg));
  transition:transform .5s var(--e-soft);will-change:transform;
}
.gift__obj video,.gift__obj img{width:100%;height:100%;object-fit:cover;
  box-shadow:0 54px 100px -34px rgba(0,0,0,.62);}

/* ============================================================
   07 · THE DESTINATION  (store selector, in page)
   The choice is the scene. Two grounds meet at a seam, each already
   the colour of the market it belongs to; hovering one lets it take
   room from the other. Nothing floats and nothing is left over.
   ============================================================ */
.dest{position:relative;z-index:3;background:var(--ink);color:var(--sand);
  min-height:100svh;display:grid;grid-template-rows:auto 1fr;}
.dest__band{
  padding:clamp(3.4rem,8vh,6rem) var(--edge) clamp(2rem,4.5vh,3.2rem);
  display:grid;gap:clamp(.8rem,1.8vh,1.3rem);justify-items:center;text-align:center;
}
.dest__ask{font-size:clamp(1.9rem,3.9vw,4.4rem);line-height:1.02;
  letter-spacing:-.018em;max-width:20ch;}

/* --- the seam ------------------------------------------------- */
.dest__split{display:flex;min-height:min(62svh,640px);}
.dest__split .market{
  flex:1 1 50%;min-width:0;justify-content:space-between;
  /* the index sits clear of the fixed masthead rather than under it */
  padding:calc(clamp(1.4rem,3vw,2.4rem) + 3.2rem) clamp(1.3rem,3vw,2.6rem)
          clamp(1.6rem,3.4vw,2.8rem);
  transition:flex-grow .85s var(--e-lux);
}
@media (min-width:760px){
  .dest__split:hover .market{flex-grow:.86;}
  .dest__split .market:hover{flex-grow:1.28;}
}
.dest__split .market__body{display:grid;gap:.3rem;}
.dest__split .market--sa{border-left:1px solid color-mix(in oklab,var(--ink) 12%,transparent);}

.dest__split .market__media{opacity:.16;}
.dest__split .market--sa .market__media{opacity:.12;}

.dest__split .market__where{margin-top:0;}

/* ============================================================
   08 · COLOPHON
   Motion idea: the wordmark rises into place and stays.
   ============================================================ */
.colophon{position:relative;z-index:3;background:var(--ink);color:var(--sand);
  padding:var(--scene-y) 0 clamp(1.4rem,3vw,2.2rem);overflow:hidden;}
.colophon__cols{margin-bottom:var(--stack-l);}
.colophon__cols{display:grid;gap:var(--stack-l);grid-template-columns:1fr;}
@media (min-width:820px){.colophon__cols{grid-template-columns:1.4fr 1fr 1fr;gap:var(--gut);}}
/* The mark signs the column off. It is pinned to the 25% tint rather than
   --logo-fg: the colophon is always on ink, so it must not follow whatever
   ground the masthead happens to be crossing as the page scrolls. */
.colophon__logo{display:block;width:clamp(150px,15vw,208px);color:var(--rose-25);
  margin-bottom:clamp(1.2rem,2.4vw,1.9rem);}
.colophon__logo svg{width:100%;height:auto;}
.colophon__cols h3{font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;opacity:.66;margin-bottom:.9rem;font-weight:500;}
.colophon__cols li+li{margin-top:.42rem;}
.colophon__cols a{font-size:var(--t-sm);opacity:.85;transition:opacity .3s;}
.colophon__cols a:hover{opacity:1;}
/* the phone header drops the section strip, so the colophon carries it */
.colophon__sections{display:none;}
@media (max-width:719px){.colophon__sections{display:block;}}
.colophon__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:clamp(1.4rem,3vw,2rem) var(--edge) 0;border-top:1px solid var(--rule);
  margin-top:clamp(1.4rem,3vw,2rem);font-size:var(--t-xs);opacity:.66;
  letter-spacing:.08em;text-transform:uppercase;}

/* --- fixes / additions ------------------------------------- */
.entry__body{display:contents;}
/* These three panels need a block body for their own alignment, which
   removes them from the flex column — so the body itself takes the auto
   margin that would otherwise sit on the Arabic word. */
.entry--maamoul .entry__body,
.entry--shamiyat .entry__body,
.entry--knafeh .entry__body{display:block;margin-top:auto;}
.material__rule .label{max-width:22ch;line-height:1.35;text-align:left;}