/* Modagenic — the editorial vendor page (docs/design.md › Editorial). Loaded by the vendor page only (js/editorial.js)
   and scoped to dialog.detail.editorial: a vendor with stored Instagram posts gets an ivory page, a serif display face
   (Cormorant Garamond, OFL: /fonts/CORMORANT-OFL.txt), a soft sage band and thin warm rules. The feed, search and the
   rest of the site stay Hairline. Every editorial value is a token on .editorial below. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/fonts/cormorant-garamond.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/cormorant-garamond-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.editorial {
  /* ---------- colour (AA: ink 13.2:1 on ivory; muted 5.8:1 on ivory, 4.9:1 on sage) ---------- */
  --ed-bg: #f7f4ee;        /* ivory page */
  --ed-paper: #fbf9f5;     /* buttons, cards */
  --ed-ink: #2b2926;       /* warm ink: text, the primary button */
  --ed-ink-2: #4a4640;
  --ed-ink-hover: #45413b;
  --ed-muted: #645e55;     /* meta, accents, labels */
  --ed-band: #dce2d6;      /* the sage band behind Momen pilihan */
  --ed-rule: #e6e0d6;      /* thin rules */
  --ed-rule-strong: #d6cdbf;
  --ed-btn-line: #8f8576;  /* the secondary button's outline (3.3:1 on ivory) */
  --ed-tile: #ece6dc;      /* photo placeholder */
  --ed-on-photo: #ffffff;
  /* the lightbox: a warm near-black scrim (ink 15.7:1, muted 10.2:1 on it) */
  --ed-lb-bg: rgb(22 21 19 / .96);
  --ed-lb-ink: #f2ede4;
  --ed-lb-muted: #c9c1b4;
  --ed-lb-btn: rgb(255 255 255 / .1);
  --ed-lb-btn-hover: rgb(255 255 255 / .2);

  /* ---------- type: Cormorant Garamond for display, Geist for everything else ---------- */
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --ed-t-name: 40px;  --ed-lh-name: 44px;   /* the vendor name */
  --ed-t-title: 36px; --ed-lh-title: 40px;  /* Momen pilihan */
  --ed-t-quote: 24px; --ed-lh-quote: 32px;  /* the bio line */
  --ed-t-accent: 19px; --ed-lh-accent: 24px; /* italic accent lines */
  --ed-t-label: 11px; --ed-lh-label: 16px; --ed-ls-label: .22em; /* the tiny spaced-caps label */
  --ed-t-sec: 26px; --ed-lh-sec: 32px;      /* Pricelist, Lokasi & perjalanan, Vendor serupa */
  --ed-w-display: 400; --ed-w-quote: 300;
  --ed-ls-display: -.005em;

  /* ---------- space and shape ---------- */
  --ed-pad: var(--gutter);         /* side padding */
  --ed-sec: var(--s-12);           /* between editorial blocks */
  --ed-gap: 4px;                   /* the photo grid's thin gaps */
  --ed-gap-collage: var(--s-2);
  --ed-measure: 600px;             /* text column (and the Pricelist / Lokasi / Vendor serupa sections) */
  --ed-collage-w: 760px;
  --ed-w: 880px;                   /* the detail panel from 640 px */
  --ed-w-gap: var(--s-16);         /* scrim left beside the panel on tablets (tap to close) */
  --ed-cover-h: clamp(320px, 50vh, 560px); /* the cover's height from 640 px: the contact buttons stay above the fold */
  --ed-lb-nav: 48px;               /* lightbox buttons */
  --ed-lb-side: var(--s-2);        /* the photo's side margin in the lightbox (room for ‹ › from 640 px) */
  --ed-lb-play: 64px;
  --ed-lb-measure: 640px;
  --ed-rule-w: 48px;               /* the short ornamental rule */
  --ed-play: 22px;
  --ed-fade: 600ms;                /* photos fade in once loaded (0 with reduced motion) */
  --ed-zoom: 1.02;                 /* photo hover */

  /* ---------- the Hairline tokens the rest of the detail uses, warmed to sit on ivory ---------- */
  --bg: var(--ed-bg); --raised: var(--ed-bg); --surface: var(--ed-paper); --subtle: #f1ece4; --skeleton: var(--ed-tile);
  --hover: rgb(43 41 38 / .05); --hover-solid: #efe9df; --grey: var(--ed-band);
  --border: var(--ed-rule); --border-strong: var(--ed-rule-strong); --border-hover: #c4baab;
  --ink: var(--ed-ink); --ink-2: var(--ed-ink-2); --muted: var(--ed-muted); --link: var(--ed-ink); --focus: var(--ed-ink); --ring-selected: var(--ed-ink);
  --primary: var(--ed-ink); --primary-hover: var(--ed-ink-hover); --primary-ink: var(--ed-bg);
  --info: var(--ed-ink-2); --info-bg: #f1ece4; --info-bd: var(--ed-rule);
}
@media (min-width: 640px) {
  .editorial {
    --ed-t-name: 56px; --ed-lh-name: 60px;
    --ed-t-title: 48px; --ed-lh-title: 52px;
    --ed-t-quote: 30px; --ed-lh-quote: 38px;
    --ed-t-accent: 21px; --ed-lh-accent: 28px;
    --ed-t-sec: 30px; --ed-lh-sec: 36px;
    --ed-pad: var(--s-12);
    --ed-sec: 72px;
    --ed-gap: 6px;
    --ed-gap-collage: var(--s-6);
  }
}
/* dark: a warm night version of the same page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .editorial {
    --ed-bg: #161513; --ed-paper: #1d1b18; --ed-ink: #ede7dc; --ed-ink-2: #cfc8bc; --ed-ink-hover: #ffffff; --ed-muted: #a8a094;
    --ed-band: #232822; --ed-rule: #2e2b26; --ed-rule-strong: #3b3730; --ed-tile: #24211d; --ed-btn-line: #6b6458;
    --subtle: #1d1b18; --hover: rgb(255 255 255 / .05); --hover-solid: #24211d; --border-hover: #4a453d; --info-bg: #1d1b18;
  }
}
:root[data-theme="dark"] .editorial {
  --ed-bg: #161513; --ed-paper: #1d1b18; --ed-ink: #ede7dc; --ed-ink-2: #cfc8bc; --ed-ink-hover: #ffffff; --ed-muted: #a8a094;
  --ed-band: #232822; --ed-rule: #2e2b26; --ed-rule-strong: #3b3730; --ed-tile: #24211d; --ed-btn-line: #6b6458;
  --subtle: #1d1b18; --hover: rgb(255 255 255 / .05); --hover-solid: #24211d; --border-hover: #4a453d; --info-bg: #1d1b18;
}

/* ---------- the page ---------- */
@media (min-width: 640px) { dialog.detail.editorial { inline-size: min(var(--ed-w), calc(100vw - var(--ed-w-gap))); } }
.editorial .d-bar, .editorial .d-body { background: var(--ed-bg); }
.editorial ::selection { background: var(--ed-band); color: var(--ed-ink); }

/* photos: a fixed box (no layout shift), cover crop, a soft fade-in */
.ed-cover, .ed-tile { position: relative; overflow: hidden; margin: 0; background: var(--ed-tile); }
/* every photo is a button that opens the lightbox (editorial.js); none links to Instagram */
.ed-open { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--ed-on-photo); font: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.ed-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; user-select: none;
  transition: opacity var(--ed-fade) var(--ease), scale var(--dur-3) var(--ease); }
.ed-img.is-in { opacity: 1; }
/* while a photo loads: the light that sweeps over every photo box (components.css), on the warm placeholder */
.ed-cover:has(.ed-img:not(.is-in)), .ed-tile:has(.ed-img:not(.is-in)) { background-image: var(--shimmer-g); background-size: 250% 100%; background-repeat: no-repeat; animation: shimmer var(--dur-shimmer) linear infinite; }
.ed-open:hover .ed-img.is-in { scale: var(--ed-zoom); }
.ed-open:focus-visible { outline: var(--ring-w) solid var(--ed-on-photo); outline-offset: calc(-2 * var(--ring-w)); box-shadow: inset 0 0 0 calc(3 * var(--ring-w)) var(--ed-ink); }
.ed-play { position: absolute; inset-block-start: var(--s-2); inset-inline-end: var(--s-2); display: grid; place-items: center; inline-size: var(--ed-play); block-size: var(--ed-play);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45)); }
.ed-play svg.i { fill: currentColor; stroke: none; }

/* 1 · the cover: full bleed, 4:5 on phones, a wider crop in the panel */
.ed-cover { aspect-ratio: 4 / 5; }
.ed-cover .ed-img { object-position: 50% 40%; }
@media (min-width: 640px) { .ed-cover { aspect-ratio: auto; block-size: var(--ed-cover-h); } .ed-cover .ed-img { object-position: 50% 30%; } }

/* the header under the cover: centred, the name in the serif */
.editorial .d-hero { justify-items: center; gap: var(--s-2); max-inline-size: var(--ed-measure); margin-inline: auto; padding: var(--s-6) var(--ed-pad) var(--ed-sec); text-align: center; }
.editorial .d-hero h2 { font: var(--ed-w-display) var(--ed-t-name)/var(--ed-lh-name) var(--serif); letter-spacing: var(--ed-ls-display); text-wrap: balance; overflow-wrap: anywhere; }
.editorial .d-handle { margin-block-start: calc(-1 * var(--s-1)); color: var(--ed-muted); font-size: var(--t-14); line-height: 22px; overflow-wrap: anywhere; }
.editorial .d-meta { margin-block-start: var(--s-1); font-size: var(--t-14); line-height: 22px; }
.editorial .d-hero .stat { justify-content: center; margin: 0; }
.editorial .d-cta { justify-self: stretch; inline-size: 100%; max-inline-size: 440px; margin: var(--s-4) auto 0; }
.editorial .btn:not(.primary) { border-color: var(--ed-btn-line); }
@media (min-width: 640px) { .editorial .d-cta:has(> :only-child) { max-inline-size: 280px; } }
.editorial .q-links { justify-content: center; }

/* 2 · a line from the vendor's Instagram profile (a tagline, not a quote) */
.ed-intro { display: grid; justify-items: center; gap: var(--s-3); max-inline-size: var(--ed-measure); margin-inline: auto; padding: 0 var(--ed-pad) var(--ed-sec); text-align: center; }
.ed-intro::before { content: ""; inline-size: var(--ed-rule-w); block-size: var(--bw); margin-block-end: var(--s-4); background: var(--ed-rule-strong); }
.ed-accent { color: var(--ed-muted); font: italic var(--w-regular) var(--ed-t-accent)/var(--ed-lh-accent) var(--serif); }
.ed-quote { margin: 0; color: var(--ed-ink); font: var(--ed-w-quote) var(--ed-t-quote)/var(--ed-lh-quote) var(--serif); text-wrap: balance; }

/* 3 · Momen pilihan: the sage band and the asymmetric collage (small left, tall centre, small right; 1 + 2 on phones) */
.ed-band { display: grid; justify-items: center; gap: var(--s-2); padding: var(--ed-sec) var(--ed-pad); background: var(--ed-band); text-align: center; }
.ed-label { color: var(--ed-muted); font: var(--w-medium) var(--ed-t-label)/var(--ed-lh-label) var(--sans); letter-spacing: var(--ed-ls-label); text-transform: uppercase; }
.ed-title { margin-block-start: var(--s-1); color: var(--ed-ink); font: var(--ed-w-display) var(--ed-t-title)/var(--ed-lh-title) var(--serif); letter-spacing: var(--ed-ls-display); }
.ed-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "b b" "a c"; gap: var(--ed-gap-collage); inline-size: 100%; max-inline-size: var(--ed-collage-w); margin-block-start: var(--s-8); }
.ed-collage > .ed-tile { aspect-ratio: 4 / 5; }
.ed-collage > :nth-child(1) { grid-area: a; }
.ed-collage > :nth-child(2) { grid-area: b; }
.ed-collage > :nth-child(3) { grid-area: c; }
@media (min-width: 640px) {
  .ed-collage { grid-template-columns: 1fr 1.45fr 1fr; grid-template-areas: "a b c"; align-items: start; }
  .ed-collage > :nth-child(2) { aspect-ratio: 2 / 3; }
  .ed-collage > :nth-child(1) { margin-block-start: var(--s-10); }
  .ed-collage > :nth-child(3) { align-self: end; margin-block-end: var(--s-10); }
}
/* fewer than 4 photos: no collage, no band; the title sits on the page above the plain grid */
.ed-band.is-few { padding-block-end: var(--s-8); background: none; }
.ed-band.is-few .ed-collage { display: none; }

/* 4 · the other photos: a calm grid, thin gaps; spans (data-s phones, data-l panel) keep rows full (editorial.js) */
.ed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ed-gap); padding: var(--ed-sec) var(--ed-pad) 0; }
.ed-band.is-few + .ed-grid { padding-block-start: 0; }
.ed-grid > .ed-tile { aspect-ratio: 4 / 5; }
.ed-grid > [data-s] { grid-column: span 2; aspect-ratio: 3 / 2; }
@media (min-width: 640px) {
  .ed-grid { grid-template-columns: repeat(3, 1fr); }
  .ed-grid > [data-s] { grid-column: auto; aspect-ratio: 4 / 5; }
  .ed-grid > [data-l="2"] { grid-column: span 2; aspect-ratio: auto; }
  .ed-grid > [data-l="3"] { grid-column: span 3; aspect-ratio: 2 / 1; }
}

/* 5 · the attribution: "Lihat semua di Instagram @user" */
.ed-more { display: grid; justify-items: center; padding: var(--s-8) var(--ed-pad) var(--s-12); }
.ed-more > a { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s-2); min-block-size: var(--touch); padding: var(--s-1) var(--s-2); color: var(--ed-ink);
  font-size: var(--t-14); line-height: 22px; text-align: center; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ed-rule-strong); }
.ed-more .ed-user { overflow-wrap: anywhere; }
/* no stored posts: the link sits right under the header, not after a gallery */
.ed-more.d-igonly { padding-block: 0 var(--s-6); }
.ed-more > a:hover { text-decoration-color: currentColor; }

/* 6 · the closing contact block, where interest peaks (after the gallery) */
.ed-close { display: grid; justify-items: center; gap: var(--s-2); max-inline-size: var(--ed-measure); margin-inline: auto; padding: 0 var(--ed-pad) var(--ed-sec); text-align: center; }
.ed-close::before { content: ""; inline-size: var(--ed-rule-w); block-size: var(--bw); margin-block-end: var(--s-6); background: var(--ed-rule-strong); }
.ed-close-t { color: var(--ed-ink); font: var(--ed-w-display) var(--ed-t-quote)/var(--ed-lh-quote) var(--serif); letter-spacing: var(--ed-ls-display); }
.ed-close-s { color: var(--ed-muted); font-size: var(--t-14); line-height: 22px; }

/* phones: the contact bar at the bottom while no other contact buttons are on screen (detail.js) */
.ed-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-2); flex: none;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border-block-start: var(--bw) solid var(--ed-rule); background: var(--ed-bg); }
.ed-bar .btn { block-size: var(--h-xl); padding-inline: var(--s-2); }
.ed-bar[hidden] { display: none; }
@media (min-width: 640px) { .ed-bar, .ed-bar[hidden] { display: none; } }

/* the sections that follow: the same text column and the serif titles, so the page reads as one */
.editorial .d-sec, .editorial .src-note { max-inline-size: var(--ed-measure); margin-inline: auto; }
.editorial .d-sec { border-block-start-color: var(--ed-rule); }
.editorial .d-sec > h3 { font: var(--ed-w-display) var(--ed-t-sec)/var(--ed-lh-sec) var(--serif); letter-spacing: var(--ed-ls-display); }
.editorial :is(.ed-pf, .ed-close) + .d-sec { border-block-start: 0; }
.editorial :is(.ed-pf, .ed-close) + .d-sec::before { content: ""; inline-size: var(--ed-rule-w); block-size: var(--bw); background: var(--ed-rule-strong); }
.editorial .mini { background: var(--ed-paper); border-color: var(--ed-rule); }

/* 7 · the lightbox: a tapped photo, large, on a dark scrim (editorial.js) */
dialog.ed-lb { position: fixed; inset: 0; inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); border: 0; background: var(--ed-lb-bg); color: var(--ed-lb-ink); overflow: hidden; }
dialog.ed-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
dialog.ed-lb::backdrop { background: var(--ed-lb-bg); }
.ed-lb [hidden] { display: none; }
.ed-lb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
.ed-lb-count { color: var(--ed-lb-muted); font-size: var(--t-14); line-height: 22px; font-variant-numeric: tabular-nums; }
.ed-lb-btn { display: grid; place-items: center; inline-size: var(--ed-lb-nav); block-size: var(--ed-lb-nav); padding: 0; border: 0; border-radius: 50%;
  background: var(--ed-lb-btn); color: var(--ed-lb-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ed-lb-btn:hover { background: var(--ed-lb-btn-hover); }
.ed-lb-btn:focus-visible, .ed-lb-ig:focus-visible { outline: var(--ring-w) solid var(--ed-lb-ink); outline-offset: var(--s-0h); }
/* the photo fills the stage's box (the grid row left between the top bar and the caption) and is contained in it */
.ed-lb-stage { position: relative; min-block-size: 0; margin: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.ed-lb-img { position: absolute; inset-block: 0; inset-inline: var(--ed-lb-side); inline-size: calc(100% - 2 * var(--ed-lb-side)); block-size: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; opacity: 0; }
.ed-lb-img.is-in { opacity: 1; }
/* a large photo on its way: a small ring turns in the middle of the stage until it is in */
.ed-lb-stage:has(> .ed-lb-img[src]:not(.is-in))::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: var(--ic-lg); block-size: var(--ic-lg); border-radius: 50%;
  border: var(--s-0h) solid var(--ed-lb-muted); border-inline-end-color: transparent; animation: spin var(--dur-spin) linear infinite; }
.ed-lb-play { position: absolute; inset: 0; display: grid; place-items: center; margin: auto; inline-size: var(--ed-lb-play); block-size: var(--ed-lb-play); border-radius: 50%;
  background: var(--ed-lb-btn); color: var(--ed-lb-ink); pointer-events: none; }
.ed-lb-play svg.i { inline-size: var(--ic-lg); block-size: var(--ic-lg); fill: currentColor; stroke: none; }
.ed-lb-nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; }
.ed-lb-nav.is-prev { inset-inline-start: var(--s-2); }
.ed-lb-nav.is-next { inset-inline-end: var(--s-2); }
.ed-lb-foot { display: grid; justify-items: center; gap: var(--s-1); inline-size: 100%; max-inline-size: var(--ed-lb-measure); margin-inline: auto; padding: var(--s-3) var(--gutter) var(--s-4); text-align: center; }
.ed-lb-cap { color: var(--ed-lb-ink); font: italic var(--w-regular) var(--ed-t-accent)/var(--ed-lh-accent) var(--serif); text-wrap: balance; }
.ed-lb-ig { display: inline-flex; align-items: center; min-block-size: var(--touch); padding-inline: var(--s-2); color: var(--ed-lb-muted); font-size: var(--t-14); line-height: 22px;
  text-decoration: underline; text-underline-offset: 4px; }
.ed-lb-ig:hover { color: var(--ed-lb-ink); }
@media (min-width: 640px) {
  .ed-lb { --ed-lb-side: calc(var(--ed-lb-nav) + var(--s-8)); }
  .ed-lb-nav.is-prev { inset-inline-start: var(--s-6); }
  .ed-lb-nav.is-next { inset-inline-end: var(--s-6); }
  .ed-lb-top { padding: var(--s-4) var(--s-6) var(--s-2) var(--s-8); }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.ed-lb[open] { animation: ed-lb-in var(--dur-2) var(--ease); }
  .ed-lb-img { transition: opacity var(--dur-2) var(--ease); }
}
@keyframes ed-lb-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ed-img, .ed-lb-img { opacity: 1; transition: none; }
  .ed-cover, .ed-tile { animation: none !important; background-image: none !important; }
  .ed-open:hover .ed-img.is-in { scale: none; }
}