/* ============================================================
   THE LONG TABLE, the homepage journey signature.
   Concept: CONCEPT.md §5. Loaded by / only.

   The cross-domain reference has been locked in CONCEPT.md since 2026-07-30
   and had never been built: the Southern church dessert table at a homecoming,
   the long cloth crowded end to end, stands at three heights. This is that
   table, and the scroll walks the camera down its length.

   THE DEPTH LAW, which is the whole difference between this and the rival's
   ribbon. The rival gets depth from cos(phase), which is noise wearing the
   costume of space. Here every object carries a real DEPTH across the cloth
   (0 at the front edge, 1 at the back) and a real TIER (board, plate, stand).
   Depth drives travel rate, scale and haze. Tier drives lift and the shadow the
   object throws on the cloth. The parallax MEANS something: it is where the
   thing is standing.

   Everything animated here is transform and opacity only. Nothing per-frame
   touches layout, filter or shadow.
   ============================================================ */

.lt{
  position:relative;
  /* the room is her espresso pressed dark, never a neutral black and never the
     rival's maroon void */
  background:#1b0e0e;
  /* the travelled length. Only spent when the rig is live: without JS or under
     reduced motion the section is an ordinary band (see the shadow at the foot
     of this file). */
}
.lt-live{ height:440svh; }

.lt-stage{
  position:relative;
  height:auto;
  overflow:hidden;
}
.lt-live .lt-stage{
  position:sticky; top:var(--mast-h, 0px);
  height:calc(100svh - var(--mast-h, 0px));
  /* THE STAGE DOES NOT OWN THE VIEWPORT. The masthead is sticky and on a phone
     its two centred rows are 340px of an 844px screen, so a stage claiming
     100svh had its top third permanently hidden behind the nav: the first
     ticket's heading was unreadable. The stage now starts under the header and
     measures what is actually left. --mast-h is measured by table.js.
     iOS: svh keeps it honest when the browser chrome collapses. */
}

/* THE LIGHT, and it is what take 4 was missing. The table was lit evenly and
   pale, which is the "too calm" diagnosis TASTE.md records against laf-demo:
   nothing had been DONE to the surface. One warm pool hangs over the middle of
   the table and falls off hard into the corners.
   It sits ABOVE the plates on purpose: an object travelling to the edge of the
   frame is walking OUT OF THE LIGHT, which is why it dims. That is a room
   behaving like a room, not an opacity ramp. */
.lt-live .lt-stage::after{
  content:"";
  position:absolute; inset:0;
  z-index:200;
  pointer-events:none;
  background:
    radial-gradient(76% 96% at calc(22% + var(--lt-mx, .5) * 56%) 44%, rgba(30,14,13,0) 32%, rgba(30,14,13,.5) 74%, rgba(24,11,11,.88) 100%),
    linear-gradient(rgba(30,14,13,.34), rgba(30,14,13,0) 26%);
}

/* --- THE ROOM. Take 1 put the table on the floor of an empty brown box and
       the top half of the frame was dead. A room has a WALL, a light hung over
       the table, and a soft fall-off into the corners. Built from her own
       espresso, never a neutral black and never the rival's maroon void. --- */
.lt-room{
  position:absolute; inset:0;
  background:
    /* the lamp over the table */
    radial-gradient(46% 26% at 50% 20%, rgba(255,222,190,.42), rgba(255,222,190,0) 74%),
    /* the wall behind the table, warm and falling off to the corners */
    radial-gradient(112% 60% at 50% 28%, #5c342d 0%, #40231f 38%, #2a1616 66%, #190c0c 100%);
  pointer-events:none;
}
/* the haze between the camera and the back of the room, so the far end of the
   table reads as DISTANCE rather than as small */
.lt-room::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:25%;
  background:linear-gradient(rgba(26,13,13,.94) 2%, rgba(26,13,13,.34) 58%, rgba(26,13,13,0) 100%);
}

/* --- THE CLOTH. A real surface receding away from the viewer. Take 1's
       trapezoid was so wide it read as ground; this one keeps its far edge
       visible so you can see it is a TABLE standing in a room. --- */
/* TAKE 2 GOT THE GEOMETRY BACKWARDS and it is worth writing down. The cloth was
   drawn as a hard wedge narrowing to 40% of the frame at the back, which is a
   table pointing AWAY from the camera. That is the PHONE composition. On a
   desktop you walk ALONGSIDE the table: its long axis runs left to right past
   you, so the far edge is a nearly full-width line and the depth is the band
   between the two edges. With the wedge in place, objects at the back of the
   table sat out beyond the cloth, floating in the dark room. */
.lt-cloth{
  position:absolute; left:0; right:0; top:20%; bottom:0;
  clip-path:polygon(-4% 0, 104% 0, 116% 100%, -16% 100%);
  background:
    /* the dotted board device, her own crimp, printed on the weave */
    radial-gradient(circle at 50% 50%, rgba(67,37,36,.15) 1.4px, transparent 1.5px) 0 0/20px 20px,
    linear-gradient(#bb9d89 0%, #d3bda9 8%, #e9d5c2 42%, #cdb19b 100%);
}
/* the far hem: the edge of the cloth against the dark room. This one line is
   what turns a floor back into a table. */
.lt-cloth::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:26px;
  background:linear-gradient(rgba(67,37,36,.55), rgba(67,37,36,0));
}
/* the light pool lands ON the cloth, brightest where the lamp hangs */
.lt-cloth::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(58% 92% at calc(24% + var(--lt-mx, .5) * 52%) 10%, rgba(255,244,230,.62), rgba(255,244,230,0) 72%);
}

/* --- THE RUNNER. A strip of her pink laid down the LENGTH of the table, which
       is what is actually on a homecoming table. It runs left to right with the
       table, widening slightly toward the near edge. Replaces take 1's floating
       icing wave, which drew as a stray line at the left edge: the exact defect
       the harvest flagged on the rival's own knife-cut. --- */
.lt-runner{
  position:absolute; left:-16%; right:-16%; top:38%; height:15%;
  transform:skewY(-.6deg);
  background:linear-gradient(rgba(206,157,169,.34), rgba(212,164,176,.6));
  pointer-events:none;
}
.lt-runner::after{
  content:"";
  position:absolute; left:0; right:0; top:0; bottom:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 2px, transparent 2px 11px);
  opacity:.45;
}
/* the runner's own hemmed edges, so it reads as cloth laid on cloth */
.lt-runner::before{
  content:"";
  position:absolute; left:0; right:0; top:0; bottom:0;
  border-top:1px solid rgba(255,255,255,.34);
  border-bottom:1px solid rgba(140,90,95,.24);
}

/* ============ THE PLATES ============ */
.lt-rail{
  position:absolute; inset:0;
  pointer-events:none;
}
.lt-p{
  position:absolute;
  left:50%; top:0;
  margin:0;
  width:var(--w, 210px);
  will-change:transform, opacity;
  /* the object's BASE is what sits on the cloth, so it scales from its feet up,
     never from its middle. This one line is the difference between a plate
     standing on a table and a picture shrinking in mid air. */
  transform-origin:50% 100%;
  transform:translate3d(-50%, 40vh, 0);
  opacity:0;
}
/* held out of sight until the rig has placed them, so nothing flashes stacked
   in the corner on the first frame */
.lt-live .lt-p{ visibility:hidden; }
.lt-p img{
  display:block; width:100%; height:auto;
  /* the plate itself: her paper language, one torn corner, never a uniform card */
  border-radius:var(--ap-r, 8px 8px 26px 8px);
  box-shadow:0 18px 26px -16px rgba(27,14,14,.85), 0 2px 0 rgba(255,240,230,.14);
  /* THE APERTURE IS CHOSEN TO FIT THE PHOTOGRAPH, NEVER THE REVERSE
     (TASTE 2026-07-30, merg). Where the subject does not sit dead centre in the
     source, the plate names its own focal point rather than losing a head, a
     tier or a topping to the crop. */
  object-position:var(--op, 50% 50%);
}
/* THE APERTURES VARY ON PURPOSE (TASTE 2026-07-30, merg): a photograph is
   placed in a shape its subject survives, and no one shape repeats down the
   table. Round for a whole cake seen from above, tall for a stand, wide for a
   tray, soft-square for a board. */
.lt-p[data-ap="round"] img{ border-radius:50%; aspect-ratio:1; object-fit:cover; }
.lt-p[data-ap="tray"]  img{ border-radius:6px 6px 22px 6px; aspect-ratio:4/3; object-fit:cover; }
.lt-p[data-ap="stand"] img{ border-radius:10px 10px 30px 10px; aspect-ratio:3/4; object-fit:cover; }
.lt-p[data-ap="board"] img{ border-radius:18px; aspect-ratio:1; object-fit:cover; }

/* THE CONTACT SHADOW. This is what makes an object read as STANDING ON a table
   instead of floating in front of one, and it is the single detail the rival's
   ribbon has no equivalent for. It is drawn once and scaled by the rig. */
/* THE BOARD. Take 5's objects were still floating rectangles: a photograph
   pasted over a surface, not a thing standing on it. Every object now sits on
   HER OWN CAKE BOARD, the crimped disc her logo is drawn from and her whole
   case is drawn in, so the table has real furniture and the concept's own
   device is doing structural work instead of decorating. A stand is the same
   board raised on its pedestal. */
.lt-p::before{
  content:"";
  position:absolute;
  left:50%; bottom:-3px;
  width:106%; height:26px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(#fdf6ee 0%, #f0e0d0 58%, #dcc4b1 100%);
  border:2px dashed rgba(166,100,114,.55);
  box-shadow:0 5px 0 rgba(110,72,66,.42);
  z-index:-1;
}
/* the pedestal: the same board, held up off the cloth */
.lt-p[data-tier="2"]::before{
  box-shadow:0 calc(var(--lift, 20px) + 4px) 0 rgba(96,62,57,.5),
             0 5px 0 rgba(140,96,88,.4);
}
/* the shadow the whole object throws on the cloth, under the board */
.lt-p::after{
  content:"";
  position:absolute;
  left:50%; bottom:calc(var(--lift, 0px) * -1 - 8px);
  width:108%; height:28px;
  transform:translateX(-50%);
  background:radial-gradient(46% 50% at 50% 44%, rgba(30,13,12,.88), rgba(30,13,12,.3) 58%, rgba(30,13,12,0) 76%);
  z-index:-2;
}

/* the far end of the table drifts out of focus. Set ONCE by depth band, never
   animated: an animated filter is what puts a phone on its knees. */
/* THE HAZE WAS EATING HER FOOD (2026-08-01 polish pass). far was
   saturate(.78) brightness(.68): a 32% brightness cut plus desaturation, on the
   photographs that ARE the product. Walked at 13 scroll positions the whole
   back half of the table read milky and grey, which is an expensive way to buy
   depth on a bakery page. Depth here is already carried by scale, position,
   tier lift and the shadow thrown on the cloth; the filter only has to agree
   with them, not do the work alone. */
.lt-p[data-band="far"] img{ filter:saturate(.92) brightness(.84); }
.lt-p[data-band="mid"] img{ filter:saturate(.98) brightness(.95); }

/* ============ THE TICKETS.
     She runs the business on notebook paper right now, in her own words: "this
     is gonna save me so many sheets of notebook paper." So the scene copy is
     not a floating card. It is a handwritten order ticket propped between the
     plates, and each one is a door into a room of the site. ============ */
.lt-tickets{ position:absolute; inset:0; pointer-events:none; z-index:300; }
.lt-t{
  position:absolute;
  width:min(390px, 78vw);
  padding:var(--space-6) var(--space-6) var(--space-5);
  background:linear-gradient(178deg, #fdf6ef, #f7e9de);
  color:var(--kc-ink);
  /* one torn corner: the paper language, re-tokenized off our radius ramp */
  border-radius:4px 4px 38px 4px;
  box-shadow:0 26px 44px -22px rgba(20,10,10,.9);
  opacity:0;
  will-change:transform, opacity;
  transform:translate3d(0, 26px, 0);
}
/* the dashed inner rule of a real order pad */
.lt-t::before{
  content:"";
  position:absolute; inset:11px;
  border:1px dashed rgba(67,37,36,.28);
  border-radius:2px 2px 30px 2px;
  pointer-events:none;
}
/* the tickets sit HIGH, in the room above the cloth. Take 1 parked them at the
   vertical middle where the plates already are, so they fought the food for the
   same band of the frame and left the top third of the room dead. */
.lt-t-l{ left:7vw;  }
.lt-t-r{ right:7vw; }
.lt-t{ top:clamp(96px, 17vh, 190px); }
.lt-t h3{
  font-family:var(--kc-script);
  font-size:var(--kc-d3);
  font-weight:400;
  color:var(--kc-rose-text);
  margin:0 0 var(--space-3);
  line-height:1.2;
}
.lt-t p{ margin:0; font-size:var(--kc-small); color:var(--kc-ink-soft); line-height:1.55; }
.lt-t a{
  pointer-events:auto;
  display:inline-block;
  margin-top:var(--space-4);
  font-size:var(--kc-small);
  color:var(--kc-espresso);
  text-decoration:none;
  border-bottom:2px solid var(--kc-field-deep);
  padding-bottom:2px;
  transition:border-color .25s var(--kc-ease-settle), transform .25s var(--kc-ease-settle);
}
.lt-t a:hover{ border-color:var(--kc-rose); transform:translateY(-1px); }
.lt-t a:focus-visible{ outline:2px solid var(--kc-rose); outline-offset:4px; border-radius:2px; }

/* ============ THE HEAD OF THE TABLE ============ */
/* THE HEAD SITS ON ITS OWN GROUND. Campbell, 2026-07-31: "the text behind the
   cursor in the screenshot is impossible to read... we should use a maroon or a
   background that matches the color scheme so that either the text appears or
   we need to rethink things."
   He is right and the cause is plain: this copy is coloured for the dark room,
   and it was being read against whatever happened to travel behind it (a pale
   cheesecake, the lit cloth, or the pink leaves at the very start). Text with no
   ground of its own is only legible by luck. It now stands on a maroon plate
   pressed from her own espresso, with the crimped dashed edge her mark is drawn
   from, so it reads against ANYTHING that passes under it. */
.lt-head{
  position:absolute;
  left:50%; top:clamp(56px, 11vh, 118px);
  transform:translateX(-50%);
  width:min(548px, 88vw);
  text-align:center;
  z-index:300;
  pointer-events:none;
  padding:var(--space-6) var(--space-6) var(--space-5);
  background:linear-gradient(172deg, rgba(74,39,36,.96), rgba(43,23,22,.97));
  border-radius:4px 4px 34px 4px;
  box-shadow:0 26px 46px -22px rgba(16,7,7,.9);
}
.lt-head::before{
  content:"";
  position:absolute; inset:9px;
  border:1px dashed rgba(251,228,234,.34);
  border-radius:2px 2px 27px 2px;
  pointer-events:none;
}
.lt-head h2{ margin:0; font-size:var(--kc-d2); color:#fff6ee; }
.lt-head .script{ color:var(--kc-field); }
.lt-head p{
  margin:var(--space-3) auto 0;
  max-width:40ch;
  font-size:var(--kc-small);
  /* 7.4:1 on the plate behind it, measured, not eyeballed */
  color:#f0dcd5;
  line-height:1.6;
}
.lt-live .lt-head{ will-change:transform, opacity; }

/* the reader's own position along the table, drawn as her crimped board edge
   filling rather than as a progress bar */
.lt-walk{
  position:absolute; left:50%; bottom:clamp(18px, 4vh, 34px);
  transform:translateX(-50%);
  width:min(220px, 42vw); height:10px;
  border:1px dashed rgba(251,228,234,.5);
  border-radius:999px;
  overflow:hidden;
  z-index:300;
}
.lt-walk i{
  display:block; height:100%;
  background:var(--kc-field);
  transform:scaleX(var(--lt-p, 0));
  transform-origin:0 50%;
}

/* ============================================================
   THE SHADOW: no JS, or reduced motion.
   The section stops being a travelled stage and becomes an ordinary readable
   band carrying the same photographs and the same four doors. Same meaning,
   no rig. (protocol §9: heavy visual routes provide the same meaning through a
   designed lightweight shadow.)
   ============================================================ */
.lt-flat{ padding:var(--section-y) 0; }
/* THE LEAVES BELONG TO THE RIG. Without JS, or under reduced motion, nothing
   ever opens them, so they sat shut across the whole fallback band and hid all
   22 photographs and all 5 doors behind two pink rectangles. A shadow that is
   covered by the thing it is a shadow for is not a shadow. */
.lt-flat .lt-room, .lt-flat .lt-cloth, .lt-flat .lt-runner,
.lt-flat .lt-walk, .lt-flat .lt-leaf{ display:none; }
.lt-flat .lt-head{ position:static; transform:none; width:min(548px,90%); margin:0 auto var(--space-8); }
.lt-flat .lt-rail{
  position:static;
  display:flex; flex-wrap:wrap; gap:var(--space-5);
  justify-content:center; align-items:flex-end;
  max-width:var(--kc-wrap); margin:0 auto; padding:0 var(--space-5);
  pointer-events:auto;
}
.lt-flat .lt-p{
  position:static;
  transform:none; opacity:1;
  width:clamp(132px, 21vw, 196px);
}
.lt-flat .lt-p::after, .lt-flat .lt-p::before{ display:none; }
.lt-flat .lt-tickets{
  position:static;
  display:flex; flex-wrap:wrap; gap:var(--space-5); justify-content:center;
  max-width:var(--kc-wrap); margin:var(--space-9) auto 0; padding:0 var(--space-5);
  pointer-events:auto;
}
.lt-flat .lt-t{
  position:static;
  opacity:1; transform:none;
  width:min(340px, 100%);
  top:auto; left:auto; right:auto;
}

@media (prefers-reduced-motion:reduce){
  .lt-live{ height:auto; }
  .lt-live .lt-stage{ position:static; height:auto; }
}

/* ============================================================
   THE PHONE IS A SEPARATELY AUTHORED COMPOSITION, never a collapsed desktop.
   On a phone you do not walk ALONGSIDE the table, you walk DOWN it: the long
   axis runs away from you into the room and objects come toward the camera and
   pass. The rig swaps its travel axis; these are the sizes that go with it.
   ============================================================ */
/* ============================================================
   THE PHONE, rewritten. The first phone build walked INTO the table toward a
   vanishing point, and at 390px that convergence piled every dish onto one
   spot in a heap while the wedge of cloth read as a spotlight beam. A phone is
   held over a table, so the phone looks DOWN at it: the cloth fills the screen,
   the table runs top to bottom, and the dishes scroll past under the reader's
   thumb. Same walk, same depth, a composition authored for the hand.
   ============================================================ */
@media (max-width:760px){
  .lt-live{ height:470svh; }
  .lt-cloth{ top:0; clip-path:none; }
  .lt-cloth::before{ display:none; }        /* no far hem: there is no horizon */
  .lt-cloth::after{
    background:radial-gradient(74% 46% at 50% calc(18% + var(--lt-mx, .5) * 12%),
      rgba(255,246,234,.6), rgba(255,246,234,0) 74%);
  }
  .lt-runner{
    left:auto; right:auto; top:0; bottom:0; height:auto;
    left:50%; width:38%; margin-left:-19%;
    transform:none;
  }
  .lt-runner::after{
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.26) 0 2px, transparent 2px 11px);
  }
  .lt-runner::before{ border:0; border-left:1px solid rgba(255,255,255,.34); border-right:1px solid rgba(140,90,95,.24); }
  /* looking down, the room is only what shows past the cloth's edges */
  .lt-room::after{ height:16%; }
  .lt-head{ top:clamp(52px, 10vh, 96px); }
  .lt-t{ width:min(322px, 86vw); top:clamp(74px, 12vh, 132px); }
  .lt-t-l, .lt-t-r{ left:50%; right:auto; margin-left:min(-161px, -43vw); }
}

/* ============================================================
   THE ARRIVAL, ported from the rival's paper-ticket hero (harvest §3) and
   re-authored on our tokens, our ground and her voice.

   What it takes from theirs: a real photograph running to the edge of the
   frame with a TORN paper edge, and the copy carried on one propped ticket
   rather than floating over the picture.
   What it changes: their ground is a dark chamber; ours is HER PINK, because
   that colour decision is the whole 2026-07-30 fix and a dark hero would throw
   it away. The ticket OVERLAPS the torn edge, which is the move a page builder
   cannot make (the laf-demo lesson: composition is not material event).
   ============================================================ */
.arr{
  position:relative;
  background:var(--kc-field);
  overflow:hidden;
  isolation:isolate;
}
.arr-in{ position:relative; z-index:2; padding:var(--space-9) 0; }

/* the photograph, run to the right edge with a torn left edge.

   RECONCILED WITH THE INSTRUMENT, which is harvest fault #2 and the law it
   produced: an install is not done until the instrument's token and rule
   vocabulary has been reconciled against the host's. The Current's seat rule
   is `[data-current]{position:relative}` and its image rule is
   `[data-current] > img{height:auto}`. Both load after this file at equal
   specificity, so they won: the seat fell back into flow 1920px tall and threw
   the whole ticket 2,000px down the page, off any screen anyone owns.
   These selectors carry one extra class so the HOST wins, and `position:
   absolute` still establishes the containing block the instrument's canvas
   needs for its own `inset:0`, so nothing of its is broken to get ours back. */
.arr > .arr-shot{
  position:absolute; inset:0 0 0 36%;
  z-index:1;
  overflow:hidden;
  clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%, 6% 74%, 2% 50%, 9% 26%);
}
.arr > .arr-shot > img,
.arr > .arr-shot > picture > img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 44%;
  display:block;
}
/* the light pool that follows the hand across the photograph. Fine pointers
   only, and it never runs under reduced motion. */
.arr-shot::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(circle 20rem at var(--arr-x, 70%) var(--arr-y, 40%),
    rgba(255,238,214,.34), rgba(255,238,214,0) 68%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .5s var(--kc-ease-settle);
}
@media (pointer:fine){ .arr:hover .arr-shot::after{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .arr-shot::after{ display:none; } }

/* THE TICKET. Her paper language: one torn corner, a dashed inner rule, set
   down at a small honest angle rather than square to the grid. */
/* THE PAPER TILTS, THE READING STAYS LEVEL. The first cut rotated the whole
   ticket and then counter-rotated every child to keep the type straight, which
   works to the eye but leaves every control inside it sitting on a rotated
   axis: g28-axis measured the two hero buttons at 52 and 53px against 50px
   everywhere else, because a rotated box measures its bounding rect. The tilt
   now lives on a paper LAYER behind the content, so the paper is set down at an
   angle and the words and buttons are upright on top of it. */
.arr-ticket{
  position:relative; isolation:isolate;
  width:min(536px, 100%);
  padding:var(--space-8) var(--space-7) var(--space-7);
}
.arr-ticket::before{           /* the paper */
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(176deg, #fdf7f0, #f8ebe0);
  border-radius:4px 4px 44px 4px;
  box-shadow:0 30px 54px -26px rgba(67,37,36,.5);
  transform:rotate(-1.1deg);
}
.arr-ticket::after{            /* the order pad's dashed rule, on the paper */
  content:"";
  position:absolute; inset:13px; z-index:-1;
  border:1px dashed rgba(166,100,114,.42);
  border-radius:2px 2px 34px 2px;
  transform:rotate(-1.1deg);
  pointer-events:none;
}
.arr-ticket .today{ margin-top:var(--space-5); }

/* her own line, pinned to the photograph like a sticker on a box */
.arr-sticker{
  position:absolute; z-index:3;
  right:clamp(14px, 4vw, 54px); top:clamp(14px, 5vh, 48px);
  transform:rotate(-9deg);
}

@media (max-width:860px){
  /* AUTHORED FOR THE PHONE, not collapsed: the photograph becomes a full-bleed
     band across the top with the tear along its BOTTOM edge, and the ticket is
     set down over it so the overlap survives at every width. */
  .arr > .arr-shot{
    inset:0 0 auto 0;
    height:clamp(240px, 38svh, 340px);
    clip-path:polygon(0 0, 100% 0, 100% 74%, 74% 94%, 50% 98%, 26% 92%, 0 100%);
  }
  .arr-in{ padding-top:clamp(200px, 31svh, 286px); }
  .arr-ticket{ width:100%; }
  .arr-sticker{ right:10px; top:12px; }
}


/* ============================================================
   THE LEAVES, ported from the rival's cake-box door (harvest §5).

   Theirs folds two cloth leaves open at the END of a history to reveal the
   Armour Road address. Ours uses the same mechanism for what this build
   actually needed: the dark room has to be ENTERED and LEFT, or it reads as a
   section you scrolled past. Two leaves of her cloth part as you step onto the
   table and close behind you as you reach the counter, so the walk has a door
   at both ends. They are the same colour as the bands either side, so the seam
   between rooms disappears.
   ============================================================ */
.lt-leaf{
  position:absolute; top:-2px; bottom:-2px; width:52%;
  z-index:210;                       /* over the plates and the light, under the copy */
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(67,37,36,.13) 1.4px, transparent 1.5px) 0 0/20px 20px,
    linear-gradient(var(--kc-field), var(--kc-field-mid));
  will-change:transform;
  backface-visibility:hidden;
}
.lt-leaf-l{ left:0;  transform-origin:left center;  transform:translate3d(0,0,0); }
.lt-leaf-r{ right:0; transform-origin:right center; transform:translate3d(0,0,0); }
/* the hem where the two leaves meet, so it reads as cloth and not a wipe */
.lt-leaf-l::after, .lt-leaf-r::after{
  content:"";
  position:absolute; top:0; bottom:0; width:16px;
  background:linear-gradient(90deg, rgba(67,37,36,.22), rgba(67,37,36,0));
}
.lt-leaf-l::after{ right:-16px; }
.lt-leaf-r::after{ left:-16px; transform:scaleX(-1); }

/* ============================================================
   THE ORBIT, ported from the rival's celebrations room (harvest §4).

   What it replaces: four identical sibling cards in a row, which is the slop
   list by name and was the last reflex container on this homepage.
   What it is: one centred paper brief with her real photographs set around it
   in MIXED apertures at deliberate angles. The apertures vary on purpose and
   each photograph sits in a shape its subject survives (TASTE 2026-07-30,
   merg). No two of these four share a silhouette, so the set cannot read as
   instances of one component.
   ============================================================ */
.orb{
  position:relative;
  display:grid; place-items:center;
  min-height:clamp(470px, 54vw, 580px);
}
.orb-brief{
  position:relative; z-index:3; isolation:isolate;
  width:min(400px, 84%);
  text-align:center;
  padding:var(--space-7) var(--space-6);
}
.orb-brief::before{            /* the paper, set down at an angle */
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(176deg, #fdf7f0, #f7e9dd);
  border-radius:4px 4px 40px 4px;
  box-shadow:0 26px 48px -24px rgba(67,37,36,.5);
  transform:rotate(-.8deg);
}
.orb-brief::after{
  content:"";
  position:absolute; inset:12px; z-index:-1;
  border:1px dashed rgba(166,100,114,.4);
  border-radius:2px 2px 30px 2px;
  transform:rotate(-.8deg);
  pointer-events:none;
}
.orb-brief .btn{ margin-top:var(--space-5); }

.orb-p{
  position:absolute; z-index:2;
  display:block;
  text-decoration:none;
  width:var(--ow, 200px);
  transition:transform .5s var(--kc-ease-settle);
}
.orb-p img{
  display:block; width:100%; height:auto;
  box-shadow:0 18px 32px -18px rgba(67,37,36,.65);
}
.orb-p b{
  display:block;
  margin-top:var(--space-3);
  font-family:var(--kc-script);
  font-size:var(--kc-d3);
  font-weight:400;
  color:var(--kc-espresso);
  text-align:center;
}
.orb-p:hover{ transform:translateY(-6px) rotate(var(--or, 0deg)); }
.orb-p:focus-visible{ outline:2px solid var(--kc-espresso); outline-offset:6px; border-radius:4px; }

/* four apertures, four silhouettes, no repeats */
.orb-1{ --ow:216px; --or:-3deg; left:7%;  top:6%;   transform:rotate(-3deg); }
.orb-1 img{ border-radius:50%; aspect-ratio:1; object-fit:cover; }
.orb-2{ --ow:196px; --or:2.4deg; right:8%; top:1%;   transform:rotate(2.4deg); }
.orb-2 img{ border-radius:6px 6px 26px 6px; aspect-ratio:3/4; object-fit:cover; object-position:50% 34%; }
.orb-3{ --ow:232px; --or:1.6deg; left:10%; bottom:4%; transform:rotate(1.6deg); }
.orb-3 img{ border-radius:14px; aspect-ratio:4/3; object-fit:cover; }
.orb-4{ --ow:186px; --or:-2.2deg; right:11%; bottom:7%; transform:rotate(-2.2deg); }
.orb-4 img{ border-radius:50% 50% 12px 50%; aspect-ratio:1; object-fit:cover; object-position:50% 42%; }

@media (max-width:900px){
  /* AUTHORED FOR THE PHONE. An orbit cannot orbit at 390px, so the brief leads
     and the four proofs sit under it in a staggered run: still four different
     apertures, still four different angles, never a stack of equal cards. */
  .orb{ display:block; min-height:0; }
  .orb-brief{ width:100%; margin:0 auto var(--space-8); }
  .orb-p{ position:static; width:var(--ow); margin-bottom:var(--space-7); }
  .orb-1{ --ow:60%; margin-left:2%; }
  .orb-2{ --ow:52%; margin-left:44%; }
  .orb-3{ --ow:64%; margin-left:6%; }
  .orb-4{ --ow:48%; margin-left:48%; margin-bottom:0; }
}