/* ============================================================
   PALETTE
   ============================================================ */
:root{
  --grey:#EDE4D2;      /* beige, and nothing else on it */
  --grey-2:#CDCAC3;
  --card:#E7E4DD;
  --card-lift:#EFEDE7;
  --ink:#1C1C1A;       /* near-black — text, and the name bar */
  --blue:#3B5243;      /* deep sage — text accents (a pastel here would vanish) */
  --dim:#A9A498;
  --rule:#C6C1B6;
  /* the four plate pastels */
  --sage:#BFCFB4; --butter:#F0E4A8; --sky:#B6CBDE; --rose:#EAC4CB;
  --grot:'Helvetica Neue',Helvetica,Arial,'Inter',system-ui,sans-serif;
  --ui:'Arial Narrow','Helvetica Neue Condensed','Liberation Sans Narrow',
       Arial,sans-serif;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  /* Georgia first: it was drawn for screens, so it stays legible at the
     size a short note wants to be read at */
  --note:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,serif;
  --body:'Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* the red handwriting: a marker pen, not a copperplate */
  /* The magazine look wants three faces the rest of the site never uses:
     a formal engraver's script for the kicker, a fat display serif for the
     shout, and a workhorse book serif for the columns. */
  /* No script face at all. A copperplate read as generated and a brush
     script wasn't wanted either, so the kicker is simply the display face
     in italic — which is what plenty of real advertisements did. Two faces
     on the page instead of three. */
  /* the kicker only; the foot of the page is a rule now, not words */
  --script:'Coal Hand Luke','Bradley Hand','Segoe Script','Chalkboard SE',
           cursive;
  /* back to where this started: a high-contrast display serif. Annonce is
     still embedded below if you want to flip back to it. */
  --shout:'Bodoni 72','Didot','Playfair Display','Times New Roman',Times,serif;
  /* for the card initials. Old English Text MT comes with Office, Luminari
     ships with macOS; both are medieval enough, and the Didot is a decent
     last resort. */
  --black:'Old English Text MT','UnifrakturMaguntia','Luminari',
          'Blackadder ITC','Bodoni 72','Didot',serif;
  /* what a magazine actually set text in around 1955: a Scotch or a
     Century, failing that the Times that replaced them everywhere */
  --press:'Century Schoolbook','New Century Schoolbook',
          'Iowan Old Style','Palatino Linotype',Palatino,
          'Times New Roman',Times,Georgia,serif;
  --ink-blue:#1E2A4A;
  --press-red:#B8242A;
  --paper:#F3EAD6;
  --hand:'Coal Hand Luke','Bradley Hand','Segoe Script','Chalkboard SE',
         'Comic Sans MS',cursive;
  --red:#DC4B33;       /* the pen the notes are written in */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--grey);color:var(--ink);
  font-family:var(--grot);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}
.up{text-transform:uppercase;letter-spacing:.06em}
.micro{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em}

/* ============================================================
   THE BOUQUET — nothing else on the screen
   ============================================================ */
.field{
  height:100vh;            /* fallback */
  height:100svh;           /* the small viewport, so the URL bar can't crop it */
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:3.5vh 20px 0;
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}

/* The search line's rules live with the rack, further down. There were
   older ones here, left over from the bouquet index, and they were still
   winning on the properties the new rule doesn't set — a 420px width and
   flex-direction:column, which turned `flex:1 1 200px` into a 200px tall
   input. Same trap as the .sheet collision: dead CSS from a design that
   was removed. */
#q::-webkit-search-cancel-button{-webkit-appearance:none}

.bouquet{
  position:relative;
  /* height-led, so the whole thing lands inside one screen */
  width:min(97vw, 98vh);
  aspect-ratio:1/1;
  margin-top:.8vh;
  flex-shrink:0;
}
.aboutlink{
  margin-top:1.1vh;flex-shrink:0;
  background:none;border:none;cursor:pointer;
  font-family:var(--ui);font-stretch:condensed;font-size:16px;
  color:#8A7A62;border-bottom:1px solid transparent;
  padding:0 0 2px;transition:color .25s ease,border-color .25s ease;
}
.aboutlink:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* the note: a florist's card, sitting slightly askew the way one does
   when it's tucked into a bunch */
/* the about card's backdrop. This was called .sheet too, and its rule —
   fixed, grid, place-items:center — was landing on the page sheets as
   well, shrinking their contents to max-content. Renamed so the two
   can't collide again. */
.overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px}
.overlay[hidden]{display:none}
.scrim{
  position:absolute;inset:0;background:rgba(58,46,30,.34);
  opacity:0;transition:opacity .24s ease;
}
.card-about{
  position:relative;max-width:min(408px,90vw);
  background:var(--paper);
  border:1px solid var(--press-red);
  padding:34px 32px 28px;
  box-shadow:0 1px 0 rgba(120,100,66,.35), 0 22px 46px rgba(58,46,28,.22);
  opacity:0;transform:translateY(12px) rotate(-1.4deg) scale(.985);
  transition:opacity .24s ease,transform .34s cubic-bezier(.2,.7,.3,1);
}
.card-about::before{                       /* the printed rule inset from the edge */
  content:'';position:absolute;inset:9px;
  border:1px solid rgba(184,36,42,.78);pointer-events:none;
}
.overlay.on .scrim{opacity:1}
.overlay.on .card-about{opacity:1;transform:rotate(-1.4deg)}

.card-about p{
  font-family:var(--press);
  font-size:16.5px;line-height:1.72;color:#2E2A20;
  text-align:left;text-wrap:pretty;
}
.card-about p + p{margin-top:16px}
.card-about .sprig{display:block;margin:24px auto 0;width:46px;height:auto;color:#8FAE72}

.close{
  position:absolute;top:4px;right:8px;
  background:none;border:none;cursor:pointer;
  font-size:22px;line-height:1;color:#BCA981;padding:6px 8px;
  transition:color .2s ease;
}
.close:hover{color:#5C5136}

/* stems and leaves behind, flowers on top. No filters anywhere — the
   blur is what turned the paper and the greenery to mush. */
.stems,.leaves{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;
}
.stems .stem{
  fill:none;stroke:#6E9A57;stroke-linecap:round;
  stroke-width:calc(var(--w,1) * 1px);vector-effect:non-scaling-stroke;
}
.leafshape{stroke:#3F5E32;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.leafvein{fill:none;stroke:#3F5E32;stroke-width:.6;opacity:.45;vector-effect:non-scaling-stroke}

/* one bloom, one person.
   Each flower sits in a square box but is drawn as a circle inside it, so
   nearly 40% of the box is empty corner. Left hittable, those corners
   swallow the pointer and the wrong flower lights up — so the box takes no
   pointer events at all and only the painted petals do. */
.stalk{
  position:absolute;
  width:calc(18% * var(--s,1));
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  pointer-events:none;
  z-index:1;
  /* the base rule is the way OUT: quick, so moving away feels immediate.
     z-index waits for the shrink to finish before it drops. */
  transition:transform .17s cubic-bezier(.3,.85,.4,1),
             opacity   .22s ease,
             z-index    0s .17s;
}
.bloom *{pointer-events:auto}
.bloom{display:block;width:100%;height:auto;overflow:visible;
  transform:rotate(var(--spin,0deg))}
/* No black outline anywhere — that one line is what made them read as
   clipart. A petal is edged in its own deeper tone instead, and lit from
   the throat outwards. */
.bloom .fl  {stroke:var(--vein,#9A8A78);stroke-width:1;stroke-opacity:.85;
             stroke-linejoin:round}
.bloom .vein{fill:none;stroke:var(--vein,#9A8A78);stroke-width:.85;
             stroke-linecap:round;opacity:.5}
.bloom .mid {fill:var(--throat,#C9A227)}
.bloom .dark{fill:var(--throat,#4A3A2A)}
.bloom .fil {fill:none;stroke:var(--inner,#FFF6D9);stroke-width:2;
             stroke-linecap:round;stroke-linejoin:round}
.bloom .anth{fill:#F8C93C;stroke:#C9930E;stroke-width:.4}
.bloom .stig{fill:var(--throat,#C4527E)}
.bloom .ln  {fill:none;stroke:var(--vein,#9A8A78);stroke-width:1;
             stroke-linecap:round;opacity:.5}
.bloom .sep {fill:#8CAF6B;stroke:#6F9153;stroke-width:.8;stroke-linejoin:round}

.stalk{cursor:pointer}
.stalk.quiet{cursor:default}          /* no page behind it yet */

/* and this is the way IN: a touch slower, and it comes to the front at once */
.stalk:hover,.stalk.shown{
  transform:translate(-50%,-50%) scale(1.13);
  z-index:9;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),
             opacity   .22s ease,
             z-index    0s;
}
.stalk.shown .fname{opacity:1;transform:translateX(-50%) translateY(0)}

.fname{
  position:absolute;left:50%;bottom:100%;margin-bottom:8px;
  transform:translateX(-50%) translateY(4px);
  background:#fff;border:1px solid #2B2B28;border-radius:2px;
  padding:3px 9px;
  font-family:var(--ui);font-stretch:condensed;font-size:13px;
  color:#2B2B28;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .13s ease,transform .17s cubic-bezier(.3,.85,.4,1);
}
.stalk:hover .fname{
  opacity:1;transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease .03s,transform .26s cubic-bezier(.2,.7,.3,1) .03s;
}

/* while you're searching, everything that isn't a match steps back */
.bouquet.searching .stalk{opacity:.2}
.bouquet.searching .stalk.hit{opacity:1;transform:translate(-50%,-50%) scale(1.13);z-index:8}
.bouquet.searching .stalk.hit .fname{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   A PERSON'S PAGE — text on the left, pictures on the right
   ============================================================ */
.article{padding:34px 0 120px}
.back{
  display:inline-block;
  font-family:var(--ui);font-stretch:condensed;font-weight:400;
  font-size:16px;letter-spacing:.01em;color:#8A7A62;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .25s ease,border-color .25s ease;
}
.back:hover{color:var(--ink);border-bottom-color:var(--ink)}

.story{
  position:relative;                 /* caption boxes hang off this */
  max-width:1080px;
  margin-top:clamp(34px,5vh,64px);
}
.story::after{content:'';display:block;clear:both}   /* the float still counts */
.story p{
  font-family:var(--body);font-weight:500;font-feature-settings:'kern' 1;
  font-size:clamp(15.5px,1.1vw,17.5px);
  line-height:1.62;color:#1F1C15;text-wrap:pretty;
}
.story p + p{margin-top:1.55em}

/* the few colours worth having by name */
.story .red   {color:var(--red)}
.story .green {color:#5C8350}
.story .quiet {color:#8A8272}

/* the picture floats; its outer margin is where the note lives, and a
   margin is part of what text flows around, so the two never collide */
.fig{position:relative;width:var(--figw,42%)}
.fig.side-right{float:right;margin:4px 0 clamp(22px,3vh,34px) clamp(96px,14%,210px)}
.fig.side-left {float:left; margin:4px clamp(96px,14%,210px) clamp(22px,3vh,34px) 0}
.fig.side-full {float:none;width:100%;margin:clamp(26px,4vh,44px) 0}
.fig img{display:block;width:100%;height:auto}
.fig .ph{
  display:grid;place-items:center;aspect-ratio:3/4;padding:20px;text-align:center;
  background:#E3DAC6;border:1px dashed #B9A98A;
  font-family:var(--ui);font-stretch:condensed;font-size:14px;color:#8A7A62;
}

/* the handwritten aside sits wherever you put it, inside the picture or
   outside it */
.fig .note{
  position:absolute;left:var(--nx,-30%);top:var(--ny,52%);
  width:min(190px,26vw);
  font-family:var(--hand);color:var(--red);
  font-size:19px;line-height:1.24;
  transform:translate(-50%,-50%) rotate(var(--nrot,-4deg));
  z-index:3;
}
.fig.side-right .note{text-align:right}
.fig .arrowlayer{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;color:var(--red);z-index:2;
}

/* the crop: a window the picture sits behind, so you choose what shows */
.fig .crop{display:block;position:relative;overflow:hidden}
.fig .crop img{display:block;width:100%;height:100%;object-fit:cover;
  transform-origin:center;transition:transform .18s ease}
.fig .focal{
  display:none;position:absolute;width:18px;height:18px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,246,238,.85);border:2px solid var(--red);
  cursor:grab;touch-action:none;z-index:5;
}

/* a caption box, anywhere on the page */
.cap{
  position:absolute;z-index:6;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  line-height:1.25;
}
.cap.tone-red  {color:var(--red)}
.cap.tone-green{color:#5C8350}
.cap.tone-ink  {color:var(--ink)}
.cap .captext{display:block;outline:none}
.article.editing .cap{outline:1px dashed #C6B392;outline-offset:6px}

/* handles, only while writing */
.fig .grip{
  display:none;position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  font-style:normal;font-size:13px;line-height:1;
  background:var(--red);color:#FFF6EE;padding:3px 6px;border-radius:2px;
  cursor:grab;touch-action:none;user-select:none;
}
.fig .target{
  display:none;position:absolute;width:16px;height:16px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:#FFF6EE;border:2px solid var(--red);
  cursor:grab;touch-action:none;z-index:4;
}
.article.editing .fig .grip,
.article.editing .cap .grip,
.article.editing .fig .focal,
.article.editing .fig .target{display:block}
.article.editing .fig{outline:1px dashed #C6B392;outline-offset:6px}

/* ---- writing in the page ---- */
.tools{
  clear:both;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:22px;padding:10px 12px;
  background:#F6F0E0;border:1px solid #D6C7A6;
  position:sticky;top:8px;z-index:30;
}
.tools button{
  font-family:var(--ui);font-stretch:condensed;font-size:14px;
  background:#FCF8ED;border:1px solid #D6C7A6;color:#4A4234;
  padding:4px 10px;cursor:pointer;transition:background .15s ease;
}
.tools button:hover{background:#EFE6CE}
.tools .t-red{color:var(--red)}
.tools .t-green{color:#5C8350}
.tools .t-go{background:#2F2A1F;border-color:#2F2A1F;color:#F6F0E0}
.tools .sep{width:1px;height:20px;background:#D6C7A6;margin:0 4px}
.tools .saved{
  font-family:var(--ui);font-stretch:condensed;font-size:13px;color:#7E9A63;
  min-width:34px;
}
.tools .saved.bad{color:var(--red);font-weight:700}
/* ============================================================
   THE FRONT
   A deliberately spare landing sheet: title, search, and about.
   ============================================================ */
.hand-page{
  --outer-y:clamp(18px,3vh,36px);
  --outer-x:clamp(14px,3vw,36px);
  width:100vw;max-width:100vw;
  height:100vh;height:100svh;
  padding:var(--outer-y) var(--outer-x);
  background:#FFFFFF;
  display:grid;place-items:center;
  overflow:hidden;
}
.hand-page .sheet{
  position:relative;display:block;width:min(1040px,100%);min-width:0;
  background:var(--paper);
  border:1px solid #16150F;
  padding:clamp(22px,3vw,44px) clamp(18px,3vw,42px) clamp(24px,3vw,40px);
  background-image:linear-gradient(180deg,
    rgba(255,252,244,.55) 0%, rgba(255,252,244,0) 28%,
    rgba(150,122,74,.05) 100%);
}
.hand-page .masthead{
  margin:0 0 clamp(12px,1.8vh,18px);
  font-family:var(--shout);font-weight:700;
  font-size:clamp(26px,4.1vw,50px);line-height:.94;
  letter-spacing:-.03em;color:var(--press-red);
  text-transform:uppercase;
}
.hand-page .searchrow{
  display:flex;flex-direction:row;width:auto;
  align-items:center;gap:14px;flex-wrap:nowrap;
  border-bottom:1px solid rgba(22,21,15,.55);
  padding-bottom:9px;margin-bottom:clamp(10px,1.6vh,18px);
}
.hand-page #q{
  flex:1 1 auto;width:auto;min-width:0;text-align:left;
  height:26px;line-height:26px;box-sizing:border-box;
  border:0;background:transparent;outline:none;-webkit-appearance:none;
  font-family:var(--press);font-size:clamp(14px,1.4vw,17px);
  color:#241F19;padding:0;margin:0;
}
.hand-page #q::placeholder{color:#9A8E76}
.hand-page .aboutlink{
  border:0;background:transparent;cursor:pointer;padding:0;
  font-family:var(--body);font-size:12.6px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:#6E6350;
}
.hand-page .aboutlink:hover{color:var(--press-red)}

.hand-page .name-index{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(7px,1vw,11px);
  margin-top:2px;
}
.hand-page .name-oval{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px clamp(11px,1.25vw,16px) 5px;
  border:1px solid #16150F;
  border-radius:999px;
  background:transparent;
  color:#16150F;
  text-decoration:none;
  font-family:var(--press);
  font-size:clamp(11px,1.05vw,13px);
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
  text-transform:lowercase;
  white-space:nowrap;
}
.hand-page a.name-oval{
  cursor:pointer;
  transition:color .14s ease,border-color .14s ease;
}
.hand-page a.name-oval:hover,
.hand-page a.name-oval:focus-visible{
  color:var(--press-red);
  border-color:var(--press-red);
  outline:none;
}
.hand-page .name-oval.soon{cursor:default}
.hand-page .name-oval[hidden]{display:none!important}
@media(max-width:600px){
  .hand-page .name-index{gap:7px}
  .hand-page .name-oval{
    min-height:26px;
    padding:4px 10px 5px;
    font-size:11px;
  }
}

/* ============================================================
   THE PRESS LOOK
   A page off a 1950s magazine: aged stock, an engraved script line
   setting up a fat red shout, a photograph pasted in slightly crooked
   with a torn edge, and the body set in narrow justified columns with
   a dropped initial. Everything is drawn — no images, no libraries.
   ============================================================ */
.press{
  min-height:100svh;min-height:100vh;
  padding:clamp(14px,3vw,44px) clamp(10px,3vw,40px) 70px;
  background:#FFFFFF;
  display:flex;justify-content:center;align-items:flex-start;
}
/* the sheet itself, and the two behind it */
.press .sheet{
  position:relative;display:block;width:min(1180px,100%);
  background:var(--paper);
  padding:clamp(24px,3.4vw,52px) clamp(20px,3.2vw,50px) clamp(30px,3vw,44px);
  border:1px solid #16150F;              /* an outline, not a shadow */
}

/* age: uneven foxing and a faint fibre, all in gradients */
/* Flat stock. There was a halftone dot and foxing here to suggest age,
   but a magazine page isn't textured — the paper is smooth and evenly
   coloured, and only the photographs carry a screen. The texture was
   reading as noise. All that's left is the faintest warmth towards the
   foot, the way ink and light age a page unevenly. */
.press .sheet{
  background-image:linear-gradient(180deg,
    rgba(255,252,244,.55) 0%, rgba(255,252,244,0) 28%,
    rgba(150,122,74,.05) 100%);
}

.press .back{
  display:inline-block;margin-bottom:clamp(10px,1.6vh,20px);
  font-family:var(--ui);font-stretch:condensed;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;
  color:#6E6350;text-decoration:none;border-bottom:1px solid #B9AC90;
}
.press .back:hover{color:var(--press-red);border-color:var(--press-red)}

/* ---- the top: the headline across the whole sheet ----
   The photographs used to sit in a column beside it, which left a dead
   stripe under the last line while the picture ran on. Now the headline
   takes the full measure and the writing starts directly beneath it. */
/* One flow, and one obvious path through it: read the headline, start at
   the top of the left column, work right. Splitting the opening paragraphs
   out beside the headline filled the space but made the reader hunt for
   where the piece begins, which is a worse problem than a quiet corner. */
.press .top{margin-bottom:clamp(10px,1.6vh,18px)}

/* AI in a joined-up hand is two letters nobody can read, so it borrows the
   display face and the red. */
.press .kicker .rd{
  font-family:var(--shout);font-style:normal;font-weight:700;
  color:var(--press-red);letter-spacing:-.03em;
  /* the same size as the headline underneath. line-height:0 keeps it from
     shoving the kicker's own line apart, and the small rise sits its caps
     on the script's baseline rather than floating them. */
  font-size:clamp(46px,7.2vw,98px);line-height:0;
  padding:0 .04em;vertical-align:-.06em;
}
.press .kicker{
  margin:0 0 .1em;
  font-family:var(--script);
  font-size:clamp(26px,3.9vw,54px);line-height:1.02;
  color:var(--ink-blue);font-style:normal;font-weight:400;
  letter-spacing:0;
}
.press .shout{
  margin:0;font-family:var(--shout);font-weight:700;
  font-size:clamp(46px,7.2vw,98px);line-height:.86;
  letter-spacing:-.03em;color:var(--press-red);
  text-transform:uppercase;
}
.press .shout .brk{display:block}
.press .shout .headline-pair{
  display:flex;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  align-items:baseline;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:clamp(6px,.65vw,10px);
  padding-left:clamp(8px,1vw,14px);
  direction:ltr;
  overflow:visible;
}
.press .shout .ar-title{
  display:block;
  flex:0 0 auto;
  direction:rtl;unicode-bidi:isolate;
  text-align:right;
  white-space:nowrap;
  font-family:"Geeza Pro","Noto Naskh Arabic","Noto Sans Arabic",Arial,sans-serif;
  font-weight:700;letter-spacing:0;text-transform:none;
  line-height:1.08;
}
.press .shout .en-gloss{
  display:block;
  flex:0 1 auto;
  min-width:0;
  margin:0 0 .03em 0;
  text-align:right;
  white-space:nowrap;
  font-family:var(--script);
  font-size:clamp(20px,1.6vw,30px);
  font-weight:400;
  line-height:1.18;
  letter-spacing:0;
  text-transform:none;
  color:#11110F;
}
@media(max-width:900px){
  .press .shout .en-gloss{
    font-size:clamp(15px,2.1vw,22px);
  }
}
@media(max-width:600px){
  .press .shout .headline-pair{gap:4px;padding-left:4px}
  .press .shout .en-gloss{
    font-size:clamp(10px,2.6vw,14px);
    line-height:1.12;
  }
}
.press .kicker .ar-kicker{
  display:inline-block;
  direction:rtl;unicode-bidi:isolate;
  font-family:"Geeza Pro","Noto Naskh Arabic","Noto Sans Arabic",Arial,sans-serif;
  font-style:normal;font-weight:600;letter-spacing:0;
  color:var(--ink-blue);
}

/* the photograph: pasted on crooked, edges torn */
.press .hero{
  margin:0;transform:rotate(1.6deg);
  filter:drop-shadow(0 6px 12px rgba(60,48,30,.34));
}
.press .hero .crop{
  display:block;width:100%;overflow:hidden;background:#DED2B6;
  aspect-ratio:4/5;                      /* a tall portrait would otherwise
                                            stretch the whole top band */
  clip-path:polygon(
    1.4% 2%, 16% .6%, 33% 2.4%, 51% .4%, 68% 2.6%, 84% .8%, 98.6% 2.4%,
    99.4% 18%, 98% 35%, 99.6% 52%, 97.8% 69%, 99.4% 85%, 98.2% 98%,
    83% 99.4%, 66% 97.6%, 49% 99.6%, 32% 97.4%, 15% 99.4%, 1.8% 97.8%,
    .6% 84%, 2% 67%, .4% 50%, 2.2% 33%, .6% 17%);
}
.press .hero img{display:block;width:100%;height:100%;object-fit:cover}
.press .hero figcaption{
  margin-top:7px;font-family:var(--ui);font-stretch:condensed;
  font-size:11.6px;letter-spacing:.09em;text-transform:uppercase;
  color:#5C5342;
}

/* ---- photographs in among the writing --------------------------------
   Each one sits in the column flow and refuses to be split across a
   column break, so the text simply runs around it. The wide one spans all
   three columns; the other two take a single column each. */
.press .cols .plate{
  position:relative;display:block;margin:0 auto 1.05em;
  break-inside:avoid;page-break-inside:avoid;
}
.press .cols .plate.wide{
  column-span:all;margin:.4em 0 1.1em;
}
.press .plate-pair{
  display:block;width:100%;box-sizing:border-box;
  margin:.45em 0 1em;
  break-inside:avoid;page-break-inside:avoid;
}
.press .plate-pair .pairrow{
  display:flex;align-items:flex-start;justify-content:space-between;
  width:100%;
}
.press .plate-pair .pairshot{
  display:block;
  min-width:0;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(18,17,12,.85);
  background:#E4D9BE;
}
.press .plate-pair .pairshot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media(max-width:900px){
  .press .plate-pair{
    grid-template-columns:minmax(0,.663fr) minmax(0,1.253fr);
    gap:8px;
    margin:.7em 0 1em;
  }
}
.press .cols .shot{
  display:block;position:relative;height:0;   /* the height is written in */
  overflow:hidden;background:#E4D9BE;
  /* a photograph printed on a page doesn't cast a shadow either */
  border:1px solid rgba(18,17,12,.85);
}
.press .cols .shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* written straight onto the photograph, in the marker pen */
.press .cols .mark{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:2;
}
.press .cols .mark path{
  fill:none;stroke:var(--press-red);stroke-width:.7;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.press .cols .scribble{
  position:absolute;z-index:3;pointer-events:none;
  font-family:var(--hand);color:#FFFFFF;
  font-size:clamp(9px,.86vw,12px);line-height:1.16;
  /* the columns are justified and the note was inheriting it, which spread
     the words right across the picture */
  text-align:left;max-width:60%;
  transform:rotate(-4deg);transform-origin:0 0;
  /* flat white marker text: no glow or shadow */
  text-shadow:none;
}

/* the caption, under its photograph where a magazine puts it */
.press .cols .bub{
  display:block;margin-top:6px;text-align:center;
  font-family:var(--ui);font-stretch:condensed;
  font-size:10.6px;line-height:1.3;
  letter-spacing:.1em;text-transform:uppercase;color:#5A5140;
}
@media(max-width:900px){
  .press .cols .plate{margin-left:auto;margin-right:auto}
  .press .cols .plate.wide{column-span:none}
  .press .cols .bub{font-size:11px}
}

/* Ashley: same mid-century press system, with a plain warm paper ground. */
.ashley-press .sheet{
  background-color:#F3EAD6;
  background-image:linear-gradient(
    180deg,
    rgba(255,252,244,.58) 0%,
    rgba(255,252,244,0) 30%,
    rgba(150,122,74,.045) 100%
  );
}
.ashley-press .top{
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(39,74,82,.58);
}
.ashley-press .kicker{
  font-family:'Coal Hand Luke',var(--script);
  color:#000;
  font-style:normal;
}
.ashley-press .shout{
  color:var(--press-red);
  text-transform:none;
  font-weight:700;
  font-size:clamp(40px,6.1vw,82px);
  line-height:.9;
  letter-spacing:-.018em;
  word-spacing:.12em;
}
/* Let the general press drop-cap rule supply the exact same press red. */
.ashley-press .cols a[href]{
  color:#315B62;
  border-bottom-color:rgba(49,91,98,.42);
}
.ashley-press .cols a[href]:hover{border-bottom-color:#315B62}
.ashley-press .colophon::before{border-top-color:rgba(49,91,98,.58)}
.ashley-press .plate-pair .pairshot img,
.ashley-press .cols .plate .shot img{
  object-fit:contain;
  background:#E8DFC9;
}
.ashley-press .plate-pair,
.ashley-press .cols .plate{
  break-inside:avoid;
}


/* Anita: denser illustrated-newspaper composition. The writing remains the
   page; photographs are small printed insets with measured white space. */
.anita-press .top{
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(18,17,12,.6);
}
.anita-press .shout{
  color:var(--press-red);
  font-size:clamp(38px,5.4vw,72px);
  line-height:.9;
  letter-spacing:-.025em;
}
/* Anita title brooch: a tiny print tucked into the empty side of the headline. */
.anita-press .top header{
  display:grid;
  grid-template-columns:minmax(0,1fr) 2.3in;
  grid-template-rows:auto auto;
  column-gap:clamp(10px,1.35vw,16px);
  align-items:center;
}
.anita-press .top .kicker{grid-column:1;grid-row:1}
.anita-press .top .shout{grid-column:1;grid-row:2}
.anita-press .anita-title-pin{
  grid-column:2;grid-row:1 / span 2;
  display:block;width:2.3in;max-width:2.3in;height:auto;
  box-sizing:border-box;padding:2px;
  border:1px solid rgba(18,17,12,.72);
  background:#eadfc4;
  transform:rotate(1deg);
}
@media(max-width:560px){
  .anita-press .top header{
    grid-template-columns:minmax(0,1fr) 54px;
    grid-template-rows:auto auto;
    column-gap:6px;
    align-items:center;
  }
  .anita-press .top .kicker{grid-column:1;grid-row:1}
  .anita-press .top .shout{grid-column:1;grid-row:2}
  .anita-press .anita-title-pin{
    grid-column:2;grid-row:1 / span 2;
    justify-self:end;
    width:54px;max-width:54px;height:auto;
    margin:0;padding:1px;
  }
}
/* Keep Anita's final tips box in the actual column flow so it sits snugly
   against the sentence before it and the page ending after it. */
.anita-press .cols p:has(+ .panel){margin-bottom:.16em}
.anita-press .cols .panel{
  position:static;
  margin:.08em 0 0;
}
.anita-press .colophon{margin-top:10px}

.anita-press .story.cols{
  column-gap:clamp(16px,1.9vw,25px);
  column-rule:1px solid rgba(92,74,44,.42);
  padding-top:8px;
}
.anita-press .cols .plate{
  /* full column width. These were capped at 230px and centred, which left a
     hole down one side of the column and a gap under the picture. */
  width:100% !important;max-width:none;
  margin:.45em 0 1em;
  padding:4px;box-sizing:border-box;
  border:1px solid rgba(18,17,12,.76);
  background:#eadfc4;
}
.anita-press .cols .plate .shot{
  border:1px solid rgba(18,17,12,.92);
}
.anita-press .plate-pair{
  width:100%;max-width:none;
  margin:.45em 0 1em;
  padding:4px;box-sizing:border-box;
  border:1px solid rgba(18,17,12,.76);
  background:#eadfc4;
}
.anita-press .plate-pair .pairshot{
  border:1px solid rgba(18,17,12,.92);
  background:#d8ceb7;
}
.anita-press .plate-pair .pairshot img{
  filter:saturate(.84) contrast(.98);
}
/* The rule that killed a second drop cap after the photo pair is gone with
   the split it was patching — there is only one column run now, so there is
   only ever one first paragraph. */
@media(max-width:560px){
  /* on a phone the pair stacks rather than squeezing two pictures into a
     column barely wider than a thumbnail */
  .press .plate-pair .pairrow{flex-direction:column;gap:4px}
  .press .plate-pair .pairshot{width:100% !important}
}

/* a line she said, set as a pull quote rather than a bold paragraph that
   reads like a stray heading */
.press .cols p.pull{
  margin:.55em 0 .8em;
  padding:.42em 0 .5em;
  border-top:1px solid rgba(140,32,32,.5);
  border-bottom:1px solid rgba(140,32,32,.5);
  font-family:var(--shout);font-weight:700;font-style:normal;
  font-size:clamp(18px,1.9vw,27px);line-height:1.08;
  letter-spacing:-.018em;
  color:var(--press-red);
  text-align:center;hyphens:manual;
  text-wrap:balance;
  break-inside:avoid;
}
.press .cols p.pull strong{font-weight:inherit}
@media(max-width:560px){
  .press .cols p.pull{
    font-size:clamp(23px,6.2vw,29px);
    line-height:1.08;
    text-align:center;
    text-wrap:balance;
  }
}

/* the line under a pair of photographs */
.press .cols .paircap{
  margin:7px 0 0;
  font-family:var(--press);font-style:italic;
  font-size:clamp(11.2px,.94vw,13px);line-height:1.34;
  color:#5C5342;text-align:left;hyphens:manual;
  break-inside:avoid;
}

/* a ruled panel, the way a magazine boxes off a list of tips */
.press .cols .panel{
  break-inside:avoid;page-break-inside:avoid;
  margin:.55em 0 .9em;padding:11px 13px 12px;
  /* the same board and the same rule as the photo boxes, so every box on
     the page reads as the same object */
  border:1px solid rgba(18,17,12,.76);
  background:#eadfc4;
}
.press .cols .panel h4{
  margin:0 0 .5em;padding-bottom:.4em;
  border-bottom:1px solid rgba(140,32,32,.42);
  font-family:var(--shout);font-weight:700;
  font-size:clamp(15px,1.5vw,21px);line-height:1.1;
  letter-spacing:-.012em;text-transform:uppercase;
  color:var(--press-red);
}
.press .cols .panel ul{margin:0;padding:0;list-style:none}
.press .cols .panel li{
  margin:0 0 .46em;padding:0 0 0 15px;
  font-family:var(--press);
  font-size:clamp(12.2px,1.02vw,14.4px);line-height:1.4;
  color:#241F19;text-align:left;hyphens:manual;
  position:relative;
}
.press .cols .panel li:last-child{margin-bottom:0}
.press .cols .panel li::before{
  content:'';position:absolute;left:2px;top:.44em;
  width:5px;height:5px;background:var(--press-red);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* Anita's final tips box keeps the frame, but not the red subheading/rule.
   Keep the intro line attached to the box and override the generic panel
   margins that appear earlier in the stylesheet. */
.anita-press .cols .panel h4{display:none}
.anita-press .cols p:has(+ .panel){
  margin-bottom:.10em;
  break-after:avoid-column;
}
.anita-press .cols .panel{
  position:static;
  margin:.05em 0 0 !important;
  padding-top:12px;
}
.anita-press .colophon{margin-top:6px !important}

/* ---- the body, in columns ---- */
.press .cols{
  column-count:3;column-gap:clamp(20px,2.4vw,34px);
  column-rule:1px solid rgba(120,96,58,.30);
  padding-top:clamp(6px,1vh,12px);
  text-align:justify;hyphens:auto;
}
/* the dropped initial */
.press .cols p:first-of-type::first-letter{
  float:left;font-family:var(--shout);font-weight:700;
  font-size:4.85em;line-height:.735;
  margin:.02em .09em -.04em 0;color:var(--press-red);
}
.press .cols p{
  margin:0 0 .72em;font-family:var(--press);
  font-size:clamp(13px,1.08vw,15.6px);line-height:1.45;
  color:#241F19;
}

.press .cols em{font-style:italic}
/* a link in the writing: the red of the page, underlined thinly so it
   reads as a link without shouting */
.press .cols a[href]{
  color:var(--press-red);text-decoration:none;
  border-bottom:1px solid rgba(184,36,42,.45);
}
.press .cols a[href]:hover{border-bottom-color:var(--press-red)}
/* while you're writing, a link shows its own outline so you can see it */
.press.editing .cols a[href]{
  background:rgba(184,36,42,.09);border-radius:2px;
  box-shadow:0 0 0 1px rgba(184,36,42,.3);
}
/* the essay layout too */
.story a[href]{
  color:var(--red);text-decoration:none;
  border-bottom:1px solid rgba(220,75,51,.45);
}
.story a[href]:hover{border-bottom-color:var(--red)}

/* a caption box becomes a boxed recipe panel */
.press .cols .cap,
.press .cap{
  position:static!important;width:auto!important;
  break-inside:avoid;margin:0 0 1em;padding:9px 11px 10px;
  border:1px solid var(--ink-blue);
  transform:none!important;text-align:left;
}
.press .cap .captext{
  font-family:var(--ui);font-stretch:condensed;font-size:12.4px;
  line-height:1.34;letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink-blue);
}

/* a picture inside the columns: small, boxed, with its note beneath */
.press .cols .fig{
  float:none;width:100%!important;margin:0 0 1em;break-inside:avoid;
}
.press .cols .fig .crop{display:block;width:100%;border:1px solid rgba(60,48,30,.4)}
.press .cols .fig img{display:block;width:100%}
.press .cols .fig .note{
  position:static;display:block;width:auto;margin:5px 0 0;
  transform:none;text-align:left;
  font-family:var(--ui);font-stretch:condensed;font-size:11.4px;
  letter-spacing:.07em;text-transform:uppercase;color:#5C5342;
}
.press .fig .arrowlayer,.press .fig .target,.press .fig .focal{display:none}

/* ---- the foot of the page ----
   No words down here any more. One hairline, centred, stopping well short
   of both edges — the article simply stops. */
.press .colophon{
  margin-top:32px;text-align:center;line-height:0;
}
/* the rule itself is an inline-block centred by text-align, rather than a
   block centred by margin:auto — an empty block sitting straight after a
   multi-column element is where layout engines disagree */
.press .colophon::before{
  content:'';display:inline-block;vertical-align:top;
  width:38%;max-width:420px;height:0;
  border-top:1px solid rgba(22,21,15,.55);
}
@media(max-width:900px){
  .press .colophon{margin-top:24px}
  .press .colophon::before{width:60%}
}

@media(max-width:900px){
  .press{padding:10px 8px 60px;background:#FFFFFF}
  .press .shout{font-size:clamp(38px,12.5vw,80px)}
  .press .kicker{font-size:clamp(24px,7.4vw,40px)}
  .press .shout{max-width:none}
  .press .cols{column-count:1;text-align:left;hyphens:manual}
  .press .cols p{font-size:15.5px;line-height:1.52}
  /* a single narrow column can't carry a five-line initial */
  .press .cols p:first-of-type::first-letter{font-size:3.5em;line-height:.78}
}
@media(min-width:901px) and (max-width:1180px){
  .press .cols{column-count:2}
}

/* ============================================================
   HANDLING THINGS DIRECTLY
   In write mode a picture and a caption are objects, not settings.
   Click one and it gets a ring and corner handles. Drag it to move it.
   Drag a corner to resize it. Double-click a picture to crop it — then
   dragging inside pans the picture behind the frame and the bottom edge
   changes how tall the frame is. Double-click a caption to type in it.
   ============================================================ */
.article.editing .fig,
.article.editing .cap{ cursor:grab; }
.article.editing .fig.dragging,
.article.editing .cap.dragging{ cursor:grabbing;opacity:.72; }

.article.editing .fig::after,
.article.editing .cap::after{
  content:'';position:absolute;inset:-6px;pointer-events:none;
  border:1.5px dashed transparent;border-radius:3px;transition:border-color .12s;
}
.article.editing .fig:hover::after,
.article.editing .cap:hover::after{ border-color:#C4B79A; }
.article.editing .fig.picked::after,
.article.editing .cap.picked::after{ border-color:var(--red);border-style:solid; }

/* the little squares at the corners */
.hand{
  position:absolute;width:11px;height:11px;background:#fff;
  border:1.5px solid var(--red);border-radius:2px;z-index:6;display:none;
  touch-action:none;
}
.article.editing .picked > .hand{ display:block; }
@media(max-width:900px){ .hand{display:none!important} }
.hand.se{ right:-9px;bottom:-9px;cursor:nwse-resize; }
.hand.sw{ left:-9px;bottom:-9px;cursor:nesw-resize; }
.hand.ne{ right:-9px;top:-9px;cursor:nesw-resize; }
.hand.nw{ left:-9px;top:-9px;cursor:nwse-resize; }

/* where it will land when you let go */
.dropline{
  height:0;border-top:2.5px solid var(--red);margin:0;padding:0;
  list-style:none;pointer-events:none;
}

/* crop mode: the frame stays, the picture moves behind it */
.fig.cropping{ cursor:move; }
.fig.cropping .crop{ outline:2px solid var(--red);outline-offset:2px; }
.fig.cropping .crop img{ opacity:1; }
.fig.cropping .cropbar{
  position:absolute;left:0;right:0;bottom:-5px;height:11px;cursor:ns-resize;
  z-index:7;touch-action:none;
}
.fig.cropping .cropbar::before{
  content:'';position:absolute;left:50%;bottom:3px;width:46px;height:5px;
  transform:translateX(-50%);background:var(--red);border-radius:3px;
}
.crophint{
  position:absolute;left:0;top:-26px;z-index:7;white-space:nowrap;
  font-family:var(--ui);font-stretch:condensed;font-size:12px;
  background:var(--red);color:#fff;padding:2px 7px;border-radius:2px;
}
.article.editing .fig .focal{ display:none; }
.fig.cropping .focal{ display:block!important; }

.warn{
  clear:both;margin:10px 0 0;padding:10px 12px;max-width:760px;
  border:1px solid var(--red);border-radius:3px;background:#FBEDE9;
  font-family:var(--ui);font-stretch:condensed;font-size:13px;line-height:1.45;
  color:#8C3423;
}
.warn b{font-weight:700}
.kept{
  clear:both;margin-top:14px;
  font-family:var(--ui);font-stretch:condensed;font-size:13.5px;color:#9A8A6C;
}

#codebox{
  display:block;width:100%;min-height:190px;margin-top:12px;
  font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#2F2A1F;color:#EDE3C8;border:none;padding:14px;resize:vertical;
}
#codebox[hidden]{display:none}

.article.editing .story p:hover,
.article.editing .note:hover{outline:1px dashed #C6B392;outline-offset:4px}
.article.editing [contenteditable]:focus{
  outline:2px solid var(--red);outline-offset:4px;
}

/* ---- on a phone ---- */
@media(max-width:900px){
  .article{padding:26px 0 90px}
  .story{margin-top:26px}
  /* a floated picture in a narrow column leaves slivers of text, so
     everything goes full width and the note drops underneath it */
  .fig,.fig.side-right,.fig.side-left,.fig.side-full{
    float:none;width:100%;margin:24px 0 20px;
  }
  .fig .note{
    position:static;width:auto;text-align:left;margin-top:12px;
    transform:rotate(-2deg);font-size:17px;
  }
  .fig .arrowlayer,.fig .target,.fig .focal{display:none}
  /* a box pinned to a coordinate makes no sense on a narrow screen */
  .cap{position:static;transform:rotate(var(--rot,0deg));width:auto!important;
    margin:18px 0}
  .story p{max-width:none!important}
  .article.editing .fig .grip{
    position:static;display:inline-block;transform:none;margin-top:10px;
  }
  .tools{
    gap:5px;padding:8px;margin-top:16px;
    overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
  }
  .tools button{font-size:13px;padding:5px 9px;white-space:nowrap;flex:0 0 auto}
  .tools .sep{flex:0 0 auto}
  #codebox{min-height:150px;font-size:11.5px}
}


/* The mobile block that used to live here belonged to the bouquet index —
   .field, .bouquet, .stalk, .fname — none of which exist any more. It also
   restyled .card and .sheet, which now mean a playing card and a page, so
   it was actively wrong. Removed. */

/* Final mobile Anita title-pin override: keep image beside title, smaller, no overlap. */
@media(max-width:560px){
  .anita-press .top header{
    grid-template-columns:minmax(0,1fr) 44px !important;
    grid-template-rows:auto auto !important;
    column-gap:5px !important;
    align-items:center !important;
  }
  .anita-press .top .kicker{grid-column:1 !important;grid-row:1 !important;min-width:0}
  .anita-press .top .shout{grid-column:1 !important;grid-row:2 !important;min-width:0}
  .anita-press .anita-title-pin{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    justify-self:end !important;
    width:44px !important;
    max-width:44px !important;
    height:auto !important;
    margin:0 !important;
    padding:1px !important;
  }
}

/* Ashley's digital-life quote stays inside the same newspaper column.
   It is a small pullout, not a page-breaking display headline. */
.press.ashley-press .cols .ashley-pullquote{
  column-span:none;
  display:block;
  max-width:none !important;
  margin:.28em 0 .72em;
  padding:.42em .5em .48em;
  border-top:1px solid rgba(184,36,42,.55);
  border-bottom:1px solid rgba(184,36,42,.55);
  color:var(--press-red);
  font-family:var(--press) !important;
  font-style:italic;
  font-weight:600;
  font-size:clamp(12px,1vw,14px) !important;
  line-height:1.38 !important;
  letter-spacing:0;
  text-align:center !important;
  text-wrap:pretty;
  break-inside:avoid;
}
.press.ashley-press .cols p:has(+ .ashley-pullquote){
  margin-bottom:.12em;
  break-after:avoid-column;
}
.press.ashley-press .cols .ashley-pullquote{
  break-before:avoid-column;
}
.press.ashley-press .cols .ashley-pullquote strong,
.press.ashley-press .cols .ashley-pullquote em{
  font:inherit;
  color:inherit;
}
@media(max-width:900px){
  .press.ashley-press .cols .ashley-pullquote{
    margin:.35em 0 .8em;
    padding:.45em .45em .5em;
    font-size:13px !important;
  }
}

/* Ashley Puja captions: match the single-photo caption treatment exactly. */
.press.ashley-press .cols .paircap{
  display:block;
  margin-top:6px;
  text-align:center;
  font-family:var(--ui);
  font-style:normal;
  font-stretch:condensed;
  font-size:10.6px;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5A5140;
}
/* Ashley galleries stay inside the newspaper column flow. Each four-image
   set is one indivisible 2×2 matrix, never a pair of separate rows. */
.press.ashley-press .matrix-2x2{
  column-span:none;
  break-inside:avoid;
  page-break-inside:avoid;
  margin-top:.65em;
  margin-bottom:1.05em;
}

/* Do not let column balancing strand the first Puja gallery at the bottom
   of a column with a large blank beneath it. The following paragraph may
   split normally, but its first lines stay with the gallery. */
.press.ashley-press .puja-collection{
  break-after:avoid-column;
  page-break-after:avoid;
}
.press.ashley-press .puja-collection + p{
  break-before:avoid-column;
  page-break-before:avoid;
}
.press.ashley-press .matrix-2x2 .pairrow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  width:100%;
}
.press.ashley-press .matrix-2x2 .pairshot{
  width:auto !important;
  aspect-ratio:1 / 1 !important;
  min-width:0;
  overflow:hidden;
  box-sizing:border-box;
  padding:2px;
  border:1px solid rgba(18,17,12,.48);
  background:var(--paper);
}
.press.ashley-press .matrix-2x2 .pairshot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:transparent;
}
.zoomable-image{
  cursor:zoom-in;
}
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(10,10,9,.94);
}
.image-lightbox__panel{
  position:relative;
  display:grid;
  gap:10px;
  justify-items:center;
  max-width:96vw;
  max-height:96vh;
}
.image-lightbox__image{
  display:block;
  max-width:94vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
}
.image-lightbox__close{
  position:absolute;
  top:-10px;
  right:-10px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:#111;
  color:#fff;
  font:22px/1 Arial,sans-serif;
  cursor:pointer;
}
.image-lightbox__original{
  font-family:var(--ui);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
}
body.lightbox-open{overflow:hidden}