@charset "utf-8";
/* ==========================================================================
   Gangnam Finds — MZ EDITORIAL CATALOGUE
   ZOZOTOWN discipline (white ground, hairlines, 980px fixed centred column,
   dense catalogue, cyan reserved for the one CTA / link / focus state, square
   corners, 13-10-15 core type) pushed into an edgy Korean-commerce register:
   real black display type, 900 weights, tight tracking, full-bleed inverted
   bands, and photo-less cards rebuilt as large typographic plates.
   No colour emoji reaches the screen: every holder is zeroed and redrawn as a
   monochrome mask icon. Language-switcher flags are left alone (data).
   --------------------------------------------------------------------------
   1 Reset  2 Tokens  3 Script overrides  4 Base  5 Container  6 Topbar
   7 Header  8 Hero  9 Bands + heads  10 Grids  11 Tile strip  12 Card
   13 Ranking  14 Neighbourhood  15 Itinerary  16 Page head / chips
   17 Detail  18 Empty  19 Footer  20 Iconography  21 Responsive  22 Print
   ========================================================================== */

/* 1. RESET ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-weight:700;line-height:1.4}
p{line-height:1.5}
dl,dd,dt{margin:0}
ol,ul{list-style:none}

/* 2. TOKENS --------------------------------------------------------------- */
:root{
  /* ZOZO production tokens, kept whole */
  --color-text-base:#2d2d2d;
  --color-text-gray:#a0a0a0;
  --color-text-link:#23abdd;
  --color-text-important:#ed293e;
  --color-inverse-text-base:#fff;
  --color-checkbox-on:#23abdd;
  --color-checkbox-off:#dedede;
  --color-favorite-on:#ff7683;
  --color-favorite-off:#d1d1d1;

  --c-line:#efefef;
  --c-line-2:#e5e5e5;
  --c-line-3:#e3e3e3;
  --c-line-4:#dedede;
  --c-line-5:#dcdcdc;
  --c-line-6:#d1d1d1;
  --c-gray-888:#888;
  --c-gray-333:#333;
  --c-bg-soft:#f4f4f4;
  --c-white:#fff;

  /* editorial ink */
  --ink:#0a0a0a;
  --ink-80:#111;
  --ink-inv:#fff;
  --ink-body:#4a4a4a;   /* body copy / descriptions — deliberately not pale */
  --ink-dim:#6d6d6d;    /* secondary copy */
  --ink-mute:#8c8c8c;   /* 10px tracked labels only */
  --rule:#0a0a0a;
  --rule-inv:rgba(255,255,255,.24);

  /* metrics */
  --width-container-pc:980px;
  --gutter:15px;
  --gap:10px;
  --control-h:34px;
  --box-shadow-base:0 5px 5px 0 rgba(0,0,0,.03);

  /* type — ZOZO's 13/10/15 core with an editorial display scale on top */
  --fs-base:13px;
  --fs-meta:10px;
  --fs-head:15px;
  --fs-display:clamp(30px,4.6vw,54px);
  --fs-sect:clamp(23px,3vw,34px);
  --fs-page:clamp(26px,3.6vw,44px);

  --track-display:-.035em;   /* tight display tracking: latin / CJK only */
  --track-meta:.18em;        /* wide tracking on 10px labels */

  --font-sans:'Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',
              'Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',
              'Noto Sans Thai','Noto Sans Arabic','Lucida Grande',Verdana,sans-serif;

  /* legacy hsl triplets kept alive for any cached inline style */
  --ink-hsl:0 0% 4%;
  --brand:196 73% 50%;
  --brand-dark:196 73% 42%;
  --line:0 0% 94%;
  --soft:0 0% 96%;
  --muted:0 0% 63%;
  --surface:0 0% 100%;
  --bg:0 0% 100%;
  --r:0;--r-sm:0;--r-lg:0;
}

/* 3. PER-SCRIPT OVERRIDES -------------------------------------------------
   Korean faces lead the global stack so Hangul never falls back to a Japanese
   face; ja / zh-cn / zh-tw get their own Han stacks with Korean at the tail.
   Cursive-joining (ar) and tall-mark (th) scripts drop the tracking. */
html[lang^="ja"]{
  --font-sans:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',
              'Meiryo','Yu Gothic','Noto Sans KR','Apple SD Gothic Neo',
              'Malgun Gothic','Lucida Grande',Verdana,sans-serif;
}
html[lang="zh-cn"]{
  --font-sans:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',
              'Heiti SC','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',
              'Lucida Grande',Verdana,sans-serif;
}
html[lang="zh-tw"]{
  --font-sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',
              'Heiti TC','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',
              'Lucida Grande',Verdana,sans-serif;
}
html[lang="ko"],html[lang^="zh"],html[lang^="ja"]{--track-display:-.02em;--track-meta:.04em}
html[lang="ar"],html[lang="th"]{
  --fs-meta:11px;
  --track-display:0;
  --track-meta:.02em;      /* letter-spacing breaks Arabic joining */
}
html[lang="ar"] .hero__eyebrow,
html[lang="th"] .hero__eyebrow{text-transform:none}

/* 4. BASE ----------------------------------------------------------------- */
body{
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:1.5;
  color:var(--ink);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page{display:flex;flex-direction:column;min-height:100vh;background:var(--c-white);overflow-x:clip}
main{display:block;flex:1 0 auto;min-width:0}

/* Hangul must break at word boundaries, not between syllable blocks: without
   keep-all a display headline splits '\ubc1c\uacac\ud558\uc138\uc694' mid-word. keep-all is a
   no-op for Latin/Cyrillic/Thai/Arabic, so it is safe as the sitewide default;
   ja / zh want the opposite behaviour and are opted back out below. Anywhere
   still catches a single unbreakable token that would otherwise overflow. */
body,
h1,h2,h3,h4,p,b,dd,dt,li,
.card__title,.card__desc,.card__meta,.card__where,.card__price,
.logo,.chip,.nav a,.mobnav a,.tile b,.nb b,.itin b,
.hero__stat span,.footer a,.crumb,.langbar__item{
  overflow-wrap:anywhere;word-break:keep-all;
}
html[lang^="ja"] *,
html[lang^="zh"] *{word-break:normal}
/* bidi: a clamped Latin string inside an RTL page must not park its ellipsis
   at the visual start of the last line */
.card__desc,.card__title,.card__meta,.nb > span > span,.itin p,
.detail__lead,.prose p,.fact dd{unicode-bidi:plaintext}

::selection{background:var(--ink);color:var(--ink-inv)}
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--color-text-link);outline-offset:2px;
}

/* 5. CONTAINER — 980px fixed, centred; fluid below ------------------------ */
.wrap,
.topbar__in,
.header__in,
.mobnav,
.hero__in,
.phead > *,
.band > *,
.detail,
.empty,
.footer__in,
.footer__bar{
  width:100%;
  max-width:var(--width-container-pc);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 6. TOPBAR + LANGUAGE SWITCHER ------------------------------------------- */
.topbar{position:relative;z-index:60;background:var(--ink)}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap);min-height:30px;
}
.topbar__tag{
  display:none;
  font-size:var(--fs-meta);color:rgba(255,255,255,.6);
  letter-spacing:var(--track-meta);text-transform:uppercase;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(min-width:600px){.topbar__tag{display:block}}

.langbar{position:relative;margin-inline-start:auto;flex-shrink:0}
.langbar__btn{
  display:inline-flex;align-items:center;gap:6px;
  height:22px;padding-inline:9px;
  border:1px solid rgba(255,255,255,.32);background:transparent;
  font-size:var(--fs-meta);font-weight:700;letter-spacing:.06em;
  color:#fff;line-height:1;white-space:nowrap;
}
.langbar__btn:hover,
.langbar.open .langbar__btn{background:#fff;color:var(--ink);border-color:#fff}
.langbar__flag{font-size:12px;line-height:1}

.langbar__menu{
  position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 4px);z-index:70;
  display:none;grid-template-columns:repeat(2,minmax(150px,1fr));
  background:var(--c-white);
  border:1px solid var(--ink);
  padding:4px;min-width:320px;max-width:calc(100vw - 30px);
  max-height:min(70vh,440px);overflow-y:auto;
}
.langbar.open .langbar__menu{display:grid}
.langbar__item{
  display:flex;align-items:center;gap:7px;
  padding:7px 10px;font-size:var(--fs-base);line-height:1.4;
  color:var(--ink);min-width:0;
}
.langbar__item:hover{background:var(--ink);color:#fff}
.langbar__item[aria-current="true"]{background:var(--c-bg-soft);font-weight:800}

/* 7. HEADER --------------------------------------------------------------- */
.header{
  position:sticky;inset-block-start:0;z-index:50;
  background:var(--c-white);
  border-bottom:3px solid var(--ink);
}
.header__in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--gap);min-height:60px;
}
.logo{
  display:flex;align-items:center;gap:10px;order:1;
  font-size:19px;font-weight:900;line-height:1;
  letter-spacing:-.03em;text-transform:uppercase;
  color:var(--ink);flex:0 1 auto;min-width:0;
}
.logo__mark{
  flex:0 0 auto;width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--ink);color:var(--ink-inv);
  font-size:13px;font-weight:900;letter-spacing:.02em;
}
/* the same tagline already sits in the black topbar rail — do not print it
   a second time inside the wordmark */
.logo__sub{display:none}

.search{
  order:2;margin-inline-start:auto;flex:0 1 260px;min-width:0;
  display:flex;align-items:center;gap:8px;
  height:var(--control-h);padding-inline:11px;
  border:2px solid var(--ink);background:var(--c-white);
  font-size:var(--fs-base);color:var(--ink);
}
.search:focus-within{outline:2px solid var(--color-text-link);outline-offset:1px}
/* the markup prints a colour magnifier as text inside an unclassed span */
.search > span{
  flex:0 0 auto;display:block;
  font-size:0;line-height:0;color:var(--ink);
}
.search input{
  flex:1 1 auto;min-width:0;width:100%;
  border:0;background:none;outline:none;
  font-size:12px;font-weight:600;color:var(--ink);
}
.search input::placeholder{color:var(--ink-mute);font-weight:500}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}

.burger{
  order:3;display:none;place-items:center;
  width:var(--control-h);height:var(--control-h);
  border:2px solid var(--ink);background:var(--c-white);color:var(--ink);
  font-size:0;line-height:0;
}
.burger[aria-expanded="true"]{background:var(--ink);color:#fff}

.nav{
  order:4;flex:1 0 100%;
  display:flex;align-items:stretch;gap:0;
  border-top:1px solid var(--c-line-2);
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--c-line-6) transparent;
}
.nav::-webkit-scrollbar{height:3px}
.nav::-webkit-scrollbar-track{background:var(--c-line)}
.nav::-webkit-scrollbar-thumb{background:var(--ink)}
.nav a{
  display:flex;align-items:center;flex:0 0 auto;
  height:40px;padding-inline:14px;
  font-size:12px;font-weight:800;line-height:1;letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
  border-bottom:3px solid transparent;
}
.nav a:first-child{padding-inline-start:0}
.nav a:hover{color:var(--color-text-link)}
.nav a.is-active{border-bottom-color:var(--ink)}

.mobnav{
  display:none;
  border-top:1px solid var(--c-line-2);
  background:var(--c-white);
  padding-block:0 12px;
}
.mobnav.open{display:block}
.mobnav a{
  display:block;padding:12px 0;
  font-size:var(--fs-base);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink);
  border-bottom:1px solid var(--c-line-2);
}
.mobnav a:last-child{border-bottom:0}
.mobnav a:hover{color:var(--color-text-link)}

/* 8. HERO — full-bleed black masthead ------------------------------------- */
.hero{background:var(--ink);color:var(--ink-inv)}
.hero__in{padding-block:48px 40px}
/* the markup opens this label with a colour sparkle; ::first-letter is the
   only handle CSS has on a bare leading text glyph, and it takes the
   following space with it */
.hero__eyebrow::first-letter{font-size:0;color:transparent}
.hero__eyebrow{
  display:inline-block;max-width:100%;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:var(--fs-meta);font-weight:800;letter-spacing:var(--track-meta);
  text-transform:uppercase;
  color:#fff;line-height:1;margin-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:7px;
}
.hero h1{
  font-size:var(--fs-display);font-weight:900;line-height:1.02;
  letter-spacing:var(--track-display);
  color:#fff;max-width:19ch;
}
.hero p{
  margin-top:15px;font-size:14px;line-height:1.6;
  color:rgba(255,255,255,.74);max-width:56ch;
}

.hero__search{
  display:flex;align-items:stretch;gap:0;
  margin-top:24px;max-width:480px;
  background:var(--c-white);border:0;
}
.hero__search input{
  flex:1 1 auto;min-width:0;
  height:42px;padding-inline:13px;
  border:0;background:none;outline:none;
  font-size:var(--fs-base);font-weight:600;color:var(--ink);
}
.hero__search input::placeholder{color:var(--ink-mute);font-weight:500}
.hero__search button{
  flex:0 0 auto;height:42px;padding-inline:22px;
  background:var(--color-text-link);color:var(--ink-inv);
  font-size:11px;font-weight:800;line-height:1;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
}
.hero__search button:hover{background:#fff;color:var(--ink)}

.hero__stats{
  display:flex;margin-top:36px;max-width:none;
  border:0;border-top:1px solid var(--rule-inv);
}
.hero__stat{
  flex:1 1 0;min-width:0;text-align:start;
  padding:16px 14px 0;
  border:0;border-inline-start:1px solid var(--rule-inv);
}
.hero__stat:first-child{border-inline-start:0;padding-inline-start:0}
.hero__stat b{
  display:block;font-size:clamp(26px,3vw,38px);font-weight:900;line-height:1;
  letter-spacing:-.04em;white-space:nowrap;color:#fff;
  font-variant-numeric:tabular-nums;
}
.hero__stat span{
  display:block;margin-top:7px;
  font-size:var(--fs-meta);font-weight:700;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:rgba(255,255,255,.58);line-height:1.4;
}

/* 9. BANDS + SECTION HEADS ------------------------------------------------ */
.band{padding-block:38px 40px;background:var(--c-white)}
.band--soft{background:var(--c-bg-soft)}

.shead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gap);margin-bottom:20px;
  padding-bottom:11px;border-bottom:3px solid var(--rule);
}
.shead > div{min-width:0}
.shead h2{
  display:block;
  font-size:var(--fs-sect);font-weight:900;line-height:1.04;
  letter-spacing:var(--track-display);
  color:var(--ink);
}
.shead h2::before{content:none}
.shead p{
  margin-top:8px;font-size:var(--fs-meta);font-weight:700;
  letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--ink-mute);line-height:1.4;
}
.shead > a{
  flex:0 0 auto;align-self:flex-end;
  padding:8px 13px;background:var(--ink);color:var(--ink-inv);
  font-size:var(--fs-meta);font-weight:800;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;unicode-bidi:isolate;
}
.shead > a::after{content:"\A0\2192"}
[dir="rtl"] .shead > a::after{content:"\A0\2190"}
.shead > a:hover{background:var(--color-text-link)}

/* inverted band */
.band--rank{background:var(--ink);color:#fff}
.band--rank .shead{border-bottom-color:#fff}
.band--rank .shead h2{color:#fff}
.band--rank .shead p{color:rgba(255,255,255,.55)}
.band--rank .shead > a{background:#fff;color:var(--ink)}

/* 10. GRIDS — dense wrapping catalogue, never a clipped shelf -------------- */
.grid{display:grid;gap:26px var(--gap);min-width:0}
.grid > *{min-width:0}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* card grids run six-up on the fixed 980 column — real catalogue density.
   Text-heavy neighbourhood grids keep their wider four-up tracks. */
.grid--4:has(.card){grid-template-columns:repeat(6,minmax(0,1fr));gap:22px var(--gap)}
.grid--6{grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:0}

/* Short result sets: cap the track count at the number of records so a
   four-item section fills the column instead of leaving two empty tracks,
   and flatten the image block when only one to three cards are present. */
@media(min-width:860px){
  .grid--4:has(> .card:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
  .grid--4:has(> .card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--4:has(> .card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4:has(> .card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--4:has(> .card:only-child){grid-template-columns:minmax(0,1fr)}
  .grid--4:has(> .card:nth-child(4):last-child) .card__img{aspect-ratio:1}
  .grid--4:has(> .card:nth-child(-n+3):last-child) .card__img{aspect-ratio:16/9}
  .grid--4:has(> .card:only-child) .card__img{aspect-ratio:24/9}
}

/* 11. SECTION TILE STRIP -------------------------------------------------- */
.grid--6{counter-reset:tile}
.tile{
  position:relative;counter-increment:tile;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:18px;min-height:116px;padding:15px 13px;text-align:start;min-width:0;
  background:var(--c-white);
  border:1px solid var(--c-line-3);
  margin-inline-end:-1px;margin-block-end:-1px;
  color:var(--ink);
  --ico-ink:var(--ink);
}
.tile:hover{background:var(--ink);color:#fff;border-color:var(--ink);z-index:2;--ico-ink:#fff}
.tile::after{
  content:counter(tile,decimal-leading-zero);
  position:absolute;inset-block-start:12px;inset-inline-end:11px;
  font-size:9px;font-weight:800;letter-spacing:.08em;
  color:var(--color-favorite-off);line-height:1;
  font-variant-numeric:tabular-nums;
}
.tile:hover::after{color:rgba(255,255,255,.5)}
.tile__ico{
  width:26px;height:26px;border:0;border-radius:0;background:none;
  font-size:0;line-height:0;color:var(--ico-ink);display:block;
}
.tile b{
  display:block;font-size:13px;font-weight:800;line-height:1.25;
  letter-spacing:.01em;text-transform:uppercase;color:inherit;
}

/* 12. PLACE CARD ---------------------------------------------------------
   There are no photographs in the data and the markup offers nothing to
   typeset inside the image box — only a stray colour glyph. So the box is
   built entirely in CSS as a CATALOGUE PLATE: a flat monochrome field, a
   hairline corner bracket and the record's index number set large. Four
   treatments rotate so a six-up row never reads as one repeated slab. A real
   <img>, if ever supplied, sits on top of the plate and covers it. */
.grid{counter-reset:plate}
.card{
  counter-increment:plate;
  display:flex;flex-direction:column;min-width:0;
  background:transparent;color:inherit;
}
.card:hover .card__title{text-decoration:underline;text-underline-offset:3px}
.card:hover .card__img{opacity:.86}

.card__img{
  position:relative;container-type:inline-size;
  aspect-ratio:4/5;width:100%;flex:0 0 auto;
  display:block;overflow:hidden;border:0;
  /* kills the colour emoji the markup prints here as a bare text node */
  font-size:0;line-height:0;color:transparent;
  background-color:var(--ink-80);
  transition:opacity .15s linear;
}
.card__img img{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;object-fit:cover;
}
/* index numeral — the typographic weight of the plate */
.card__img::before{
  content:counter(plate,decimal-leading-zero);
  position:absolute;z-index:2;
  inset-block-end:6px;inset-inline-start:9px;
  font-size:clamp(20px,26cqi,46px);font-weight:900;line-height:.78;
  letter-spacing:-.06em;color:currentColor;
  font-variant-numeric:tabular-nums;
}
/* corner bracket — a hairline that makes the empty field look framed */
.card__img::after{
  content:"";position:absolute;z-index:2;
  inset-block-start:9px;inset-inline-end:9px;
  width:15px;height:15px;
  border:2px solid currentColor;
  border-inline-start:0;border-block-end:0;
}
/* a supplied photograph covers the whole box, so the plate furniture goes */
.card__img:has(img)::before,
.card__img:has(img)::after{content:none}

/* four rotating monochrome fields */
.card:nth-child(4n+1) .card__img{background-color:#0a0a0a;color:#fff}
.card:nth-child(4n+2) .card__img{
  background-color:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.card:nth-child(4n+3) .card__img{
  background-color:#161616;color:#fff;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.1px);
  background-size:8px 8px;
}
.card:nth-child(4n+4) .card__img{
  background-color:#e8e8e8;color:var(--ink);
  background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 1px,transparent 1px 7px);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.card__badge{
  position:absolute;z-index:4;inset-block-start:0;inset-inline-start:0;
  padding:4px 8px;
  background:var(--color-text-important);color:#fff;
  font-size:var(--fs-meta);font-weight:800;line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;
  max-width:86%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.card__body{
  display:flex;flex-direction:column;gap:4px;flex:1;
  padding-top:10px;min-width:0;
  border-top:2px solid var(--ink);
}
.card__meta{
  display:block;font-size:var(--fs-meta);font-weight:800;
  letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--ink-mute);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card__title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
  font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-.015em;
  color:var(--ink);
}
.card__desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
  font-size:12px;font-weight:500;color:var(--ink-body);line-height:1.5;
}
.card__foot{
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
  margin-top:auto;padding-top:9px;
  font-size:var(--fs-meta);color:var(--ink-dim);line-height:1.4;
}
.card__foot > span{min-width:0}
/* the neighbourhood string arrives with a colour pin glued to its front.
   ::first-letter is the only selector that reaches a leading text glyph;
   a masked monochrome pin is drawn back in its place. */
.card__where{
  display:block;
  position:relative;padding-inline-start:13px;
  overflow:hidden;max-width:100%;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis;
}
.card__where::first-letter{font-size:0;color:transparent}
.card__where::before{
  content:"";position:absolute;
  inset-block-start:50%;inset-inline-start:0;margin-block-start:-5.5px;
  width:9px;height:11px;
  background-color:currentColor;
  -webkit-mask:var(--ico-pin) no-repeat center/contain;
          mask:var(--ico-pin) no-repeat center/contain;
}
.card__price{
  margin-inline-start:auto;
  padding:3px 6px;background:var(--ink);color:#fff;
  font-weight:800;white-space:nowrap;letter-spacing:.04em;line-height:1.2;
}

/* related places, scoped by adjacency to the record rather than by a class:
   a compact ruled two-column list, so two or three records fill the column
   instead of blowing up into half-page empty plates */
.detail + .band--soft .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.detail + .band--soft .grid--4 .card{
  display:grid;grid-template-columns:84px minmax(0,1fr);
  align-items:center;gap:0 13px;
  padding-block:13px;border-top:1px solid var(--c-line-3);
}
.detail + .band--soft .grid--4 .card:nth-child(1),
.detail + .band--soft .grid--4 .card:nth-child(2){border-top:0}
.detail + .band--soft .grid--4 .card:nth-child(n) .card__img{aspect-ratio:1;width:84px}
.detail + .band--soft .grid--4 .card__img::before{
  font-size:22px;inset-block-end:4px;inset-inline-start:6px;
}
.detail + .band--soft .grid--4 .card__img::after{
  inset-block-start:6px;inset-inline-end:6px;width:11px;height:11px;
}
.detail + .band--soft .grid--4 .card__body{border-top:0;padding-top:0;gap:3px;justify-content:center}
.detail + .band--soft .grid--4 .card__title{-webkit-line-clamp:1;line-clamp:1}
.detail + .band--soft .grid--4 .card__desc{-webkit-line-clamp:1;line-clamp:1}
.detail + .band--soft .grid--4 .card__foot{margin-top:0;padding-top:5px}
.detail + .band--soft .grid--4 .card__badge{
  width:11px;height:11px;padding:0;font-size:0;overflow:hidden;
}

/* 13. RANKING BAND — a dense ranked chart, not six black slabs ------------- */
.band--rank .grid{
  counter-reset:rank;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 34px;
}
.band--rank .card{
  counter-increment:rank;
  display:grid;
  grid-template-columns:auto 84px minmax(0,1fr);
  align-items:center;gap:0 13px;
  padding-block:12px;
  border-top:1px solid rgba(255,255,255,.2);
}
.band--rank .card:nth-child(1),
.band--rank .card:nth-child(2){border-top:0}
.band--rank .card::before{
  content:counter(rank);
  font-size:30px;font-weight:900;line-height:1;letter-spacing:-.05em;
  color:#fff;min-width:34px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.band--rank .card:nth-child(1)::before{color:var(--color-text-important)}
/* one crisp white chip per row: at 84px a patterned dark plate would vanish
   into the black band, which is exactly the "empty box" read we are fixing */
.band--rank .card__img,
.band--rank .card:nth-child(4n) .card__img,
.band--rank .card:nth-child(4n+1) .card__img,
.band--rank .card:nth-child(4n+2) .card__img,
.band--rank .card:nth-child(4n+3) .card__img{
  aspect-ratio:1;width:84px;
  background-color:#fff;background-image:none;color:var(--ink);box-shadow:none;
}
/* the row already carries a large rank numeral, so the chip drops the plate
   numeral and keeps a field plus a bracket, at chip scale */
.band--rank .card:nth-child(2n+1) .card__img{
  background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.12) 0 1px,transparent 1px 6px);
  box-shadow:inset 0 0 0 2px var(--ink);
}
.band--rank .card:nth-child(2n) .card__img{
  background-image:radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.15px);
  background-size:7px 7px;
  box-shadow:inset 0 0 0 2px var(--ink);
}
.band--rank .card__img::before{content:none}
.band--rank .card__img::after{
  inset-block-start:7px;inset-inline-end:7px;width:13px;height:13px;border-width:2px;
}
.band--rank .card__body{border-top:0;padding-top:0;gap:3px;justify-content:center}
.band--rank .card__desc{display:none}
.band--rank .card__title{color:#fff;font-size:14px;-webkit-line-clamp:1;line-clamp:1}
.band--rank .card__meta{color:rgba(255,255,255,.5)}
.band--rank .card__foot{margin-top:0;padding-top:4px;color:rgba(255,255,255,.6)}
.band--rank .card__where{color:rgba(255,255,255,.6)}
.band--rank .card__price{background:#fff;color:var(--ink)}
.band--rank .card__badge{display:none}

/* 14. NEIGHBOURHOOD ROW --------------------------------------------------- */
.nb{
  display:flex;align-items:flex-start;gap:8px;min-width:0;
  padding:14px 0 14px;
  background:none;border:0;border-top:2px solid var(--ink);
  color:var(--ink);
}
.nb:hover b{text-decoration:underline;text-underline-offset:3px}
.nb > span{display:block;min-width:0;flex:1 1 auto}
.nb b{
  display:block;font-size:16px;font-weight:900;line-height:1.15;
  letter-spacing:-.025em;color:var(--ink);
}
.nb b + span,
.nb > span > span{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
  margin-top:6px;font-size:11px;font-weight:600;
  letter-spacing:.01em;text-transform:none;
  color:var(--ink-body);line-height:1.5;
}
.nb::after{
  content:"\2192";flex:0 0 auto;
  font-size:14px;line-height:1.2;color:var(--ink);
}
[dir="rtl"] .nb::after{content:"\2190"}

/* 15. ITINERARY CARD ------------------------------------------------------ */
.itin{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:14px 0 0;background:none;
  border:0;border-top:2px solid var(--ink);
}
.itin:hover b{text-decoration:underline;text-underline-offset:3px}
.itin__dur{
  align-self:flex-start;max-width:100%;
  padding:5px 9px;border:0;
  background:var(--ink);color:#fff;
  font-size:var(--fs-meta);font-weight:800;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.itin b{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
  font-size:19px;font-weight:900;line-height:1.18;letter-spacing:-.025em;
  color:var(--ink);
}
.itin p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden;
  font-size:12px;font-weight:500;color:var(--ink-body);line-height:1.6;
}

/* 16. PAGE HEAD / BREADCRUMB / CHIPS -------------------------------------- */
.phead{background:var(--ink);color:#fff;padding-block:32px 0}
.phead__in{padding-bottom:20px}
.phead h1{
  margin-top:11px;
  font-size:var(--fs-page);font-weight:900;line-height:1.03;
  letter-spacing:var(--track-display);color:#fff;
}
/* one <p> serves three jobs here — a result count, a neighbourhood tagline
   and an itinerary excerpt — so it is set as a readable lead rather than a
   tracked micro-label that a full sentence cannot survive */
.phead p{
  margin-top:12px;font-size:14px;font-weight:500;
  letter-spacing:0;text-transform:none;line-height:1.6;
  color:rgba(255,255,255,.7);max-width:62ch;
}
.phead .itin__dur{background:#fff;color:var(--ink);display:inline-block;margin-top:16px}
.phead .crumb,
.phead .crumb a{color:rgba(255,255,255,.55)}
.phead .crumb a:hover{color:#fff}
.phead .hero__search{max-width:480px;margin-top:20px;border:0}

.crumb{
  font-size:var(--fs-meta);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);line-height:1.6;
}
.crumb a{color:var(--ink-mute);unicode-bidi:isolate}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.detail > .crumb{margin-bottom:14px}

.chips{
  display:flex;gap:0;padding-bottom:0;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.55) rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.22);
}
.chips::-webkit-scrollbar{height:3px}
.chips::-webkit-scrollbar-track{background:rgba(255,255,255,.14)}
.chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,.6)}
.chips > :last-child{margin-inline-end:var(--gutter)}
.chip{
  display:inline-flex;align-items:center;flex:0 0 auto;
  min-height:40px;padding:10px 15px;max-width:100%;
  background:none;border:0;
  font-size:11px;font-weight:800;line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);white-space:normal;
  border-bottom:3px solid transparent;
}
.chips .chip{white-space:nowrap}
.chips .chip:first-child{padding-inline-start:0}
.chip:hover{color:#fff}
.chips .chip.is-active{color:#fff;border-bottom-color:#fff;background:none}
/* standalone CTA chip (map link, 404 home link, back-to-itineraries) */
.detail__cta .chip,
.empty .chip{
  background:var(--ink);color:#fff;border:0;border-bottom:0;
  padding:13px 22px;min-height:0;letter-spacing:.12em;
}
.detail__cta .chip:hover,
.empty .chip:hover{background:var(--color-text-link);color:#fff}
.chip--ext::after{content:"\A0\2197"}
[dir="rtl"] .chip--ext::after{content:"\A0\2196"}

/* 17. DETAIL -------------------------------------------------------------- */
.detail{padding-block:26px 44px;min-width:0}
.band > .detail{padding-block:0;margin-bottom:24px}
.detail h1{
  font-size:var(--fs-page);font-weight:900;line-height:1.04;
  letter-spacing:var(--track-display);color:var(--ink);
}
/* the hero box holds only a stray colour glyph, so it is built as a black
   banner plate: hatched field, a heavy rule and a corner bracket. A supplied
   <img> covers all of it. */
.detail__hero{
  position:relative;
  width:100%;aspect-ratio:24/9;max-height:330px;margin-bottom:22px;
  overflow:hidden;border:0;
  font-size:0;line-height:0;color:#fff;
  background-color:#0a0a0a;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px);
}
.detail__hero img{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;object-fit:cover;
}
.detail__hero::before{
  content:"";position:absolute;z-index:2;
  inset-block-start:50%;inset-inline-start:24px;translate:0 -50%;
  width:70px;height:26px;
  background:
    linear-gradient(#fff 0 0) 0 0/70px 5px no-repeat,
    linear-gradient(#fff 0 0) 0 11px/48px 5px no-repeat,
    linear-gradient(#fff 0 0) 0 22px/26px 4px no-repeat;
}
.detail__hero::after{
  content:"";position:absolute;z-index:2;
  inset-block-start:20px;inset-inline-end:20px;
  width:26px;height:26px;
  border:3px solid rgba(255,255,255,.85);
  border-inline-start:0;border-block-end:0;
}
/* with no photograph in the record the 24:9 slot is just a hole, so it
   collapses to a deliberate masthead bar; a supplied <img> restores the
   full-height crop and clears the furniture off the picture */
.detail__hero:not(:has(img)){aspect-ratio:auto;height:104px;max-height:none}
.detail__hero:has(img)::before,
.detail__hero:has(img)::after{content:none}

/* TWO-COLUMN RECORD, BUILT FROM SIBLINGS
   The place record is a flat run of siblings — crumb, hero, h1, lead, facts,
   prose, cta. Grid places the spec table in a right-hand rail without any
   wrapper element, so a short record no longer leaves half the column empty.
   The :has() guard keeps post and neighbourhood bodies single-column. */
@media(min-width:860px){
  .detail:has(> .facts){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,300px);
    column-gap:40px;align-items:start;
  }
  .detail:has(> .facts) > *{grid-column:1}
  .detail:has(> .facts) > .crumb,
  .detail:has(> .facts) > .detail__hero{grid-column:1/-1}
  /* row 3 is the h1 row: crumb and hero take rows 1-2 on every record */
  .detail:has(> .facts) > .facts{grid-column:2;grid-row:3/span 99;align-self:start}
}

.detail__lead{
  font-size:17px;font-weight:500;color:var(--c-gray-333);line-height:1.6;
  max-width:60ch;margin-bottom:4px;
}
.detail__cta{margin-top:26px}

.facts{border-top:3px solid var(--ink);margin-block:22px 0}
.fact{
  display:grid;grid-template-columns:minmax(0,86px) minmax(0,1fr);
  gap:2px var(--gap);padding-block:11px;
  border-bottom:1px solid var(--c-line-3);
  font-size:var(--fs-base);
}
.fact dt{
  font-size:var(--fs-meta);font-weight:800;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--ink-mute);line-height:1.8;min-width:0;
}
.fact dd{color:var(--ink);font-weight:600;line-height:1.6;min-width:0}

.prose{
  max-width:66ch;min-width:0;
  font-size:15px;line-height:1.75;color:var(--c-gray-333);
}
.detail > .prose{margin-top:26px;padding-top:24px;border-top:2px solid var(--ink)}
.band > .detail > .prose{margin-top:0;padding-top:0;border-top:0}
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--color-text-link);text-decoration:underline}
.prose h2,.prose h3{
  font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--ink);
  margin-block:26px 9px;padding-bottom:8px;
  border-bottom:2px solid var(--ink);
}

/* An itinerary body arrives as one paragraph of <br>-separated lines, so it
   is set as long-form reading copy. The article narrows and centres inside
   the 980 column: a reading measure pinned to the left edge of a full-width
   column is exactly the one-sided dead space this redesign is fixing. */
.band > .detail:not(:has(.facts)){max-width:calc(760px + var(--gutter) * 2)}
.band > .detail > .prose{font-size:16px;line-height:1.85;max-width:none}

/* 18. EMPTY STATE --------------------------------------------------------- */
.empty{
  padding-block:84px;text-align:center;
  font-size:15px;color:var(--ink-body);
}
.empty__ico{
  font-size:0;line-height:0;color:var(--ink);
  margin-bottom:20px;display:flex;justify-content:center;
}
.empty h1{
  font-size:var(--fs-page);font-weight:900;line-height:1.05;
  letter-spacing:var(--track-display);color:var(--ink);margin-bottom:12px;
}
.empty p{margin-bottom:24px}

/* 19. FOOTER — full-bleed black -------------------------------------------- */
.footer{background:var(--ink);color:#fff}
.footer__in{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.8fr;
  gap:28px var(--gap);
  padding-block:46px 36px;
}
.footer__in > *{min-width:0}
.footer h4{
  font-size:var(--fs-meta);font-weight:800;line-height:1.4;
  letter-spacing:var(--track-meta);text-transform:uppercase;
  color:#fff;margin-bottom:12px;
  padding-bottom:9px;border-bottom:1px solid var(--rule-inv);
}
.footer p{font-size:12px;color:rgba(255,255,255,.6);line-height:1.7}
.footer a{
  display:block;font-size:12px;color:rgba(255,255,255,.75);
  line-height:1.4;padding-block:5px;
}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__brand h4{
  font-size:22px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase;
  border-bottom:0;padding-bottom:0;margin-bottom:11px;
}
.footer__brand p{max-width:40ch}
.footer__langs{display:flex;flex-wrap:wrap;gap:5px}
.footer__langs a{
  padding:4px 8px;border:1px solid rgba(255,255,255,.28);background:none;
  font-size:var(--fs-meta);line-height:1.4;color:rgba(255,255,255,.75);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.footer__langs a:hover{border-color:#fff;color:#fff;text-decoration:none}
.footer__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px var(--gap);
  padding-block:16px;
  border-top:1px solid var(--rule-inv);
  font-size:var(--fs-meta);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.48);line-height:1.6;
}

/* 20. MONOCHROME ICONOGRAPHY ----------------------------------------------
   The tile glyph comes from the database and may be a colour emoji, so the
   holder is zeroed and a masked line icon is drawn in its place. Tiles are
   matched on the href suffix, which is identical in all 11 languages; a
   generic mark is declared first so an unknown slug can never fall back to
   an emoji. Everything else (search, burger, empty state, card pin) is drawn
   from the same 1.6-stroke family. */
:root{
  --ico-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7.5-7 7.5-12.2a7.5 7.5 0 0 0-15 0C4.5 15 12 22 12 22Z'/%3E%3Ccircle cx='12' cy='9.6' r='2.6'/%3E%3C/svg%3E");
}
.tile__ico::before,
.search > span::before,
.burger::before,
.empty__ico::before{
  content:"";display:block;
  background-color:currentColor;
  -webkit-mask-image:var(--ico);mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.tile__ico::before{
  width:26px;height:26px;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='17'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
}
.tile[href$="/eat"] .tile__ico::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5v6M10 2.5v6M8.25 8.5V21.5'/%3E%3Cpath d='M6.5 8.5h3.5'/%3E%3Cpath d='M17.5 2.5c1.8 1.6 2.4 4 2 6.4-.3 1.6-1 2.4-2 2.7v9.9'/%3E%3C/svg%3E")}
.tile[href$="/cafes"] .tile__ico::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5h13v6.2a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5V7.5Z'/%3E%3Cpath d='M16.5 9.5h1.8a2.6 2.6 0 0 1 0 5.2h-1.8'/%3E%3Cpath d='M3 21.5h14'/%3E%3C/svg%3E")}
.tile[href$="/shop-beauty"] .tile__ico::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h16l-1.3 13.5H5.3L4 7.5Z'/%3E%3Cpath d='M8.4 10V6.4a3.6 3.6 0 0 1 7.2 0V10'/%3E%3C/svg%3E")}
.tile[href$="/things-to-do"] .tile__ico::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 14.3 9.2 21 11.5l-6.7 2.3L12 20.5l-2.3-6.7L3 11.5l6.7-2.3L12 2.5Z'/%3E%3C/svg%3E")}
.tile[href$="/neighborhoods"] .tile__ico::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.2-6.6 7.2-11.6a7.2 7.2 0 0 0-14.4 0c0 5 7.2 11.6 7.2 11.6Z'/%3E%3Ccircle cx='12' cy='9.8' r='2.6'/%3E%3C/svg%3E")}
.tile[href$="/itineraries"] .tile__ico::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 5.6 9 3.2l6 2.4 6.2-2.4v15.2L15 20.8l-6-2.4-6.2 2.4V5.6Z'/%3E%3Cpath d='M9 3.2v15.2M15 5.6v15.2'/%3E%3C/svg%3E")}
.tile[href$="/near-clinics"] .tile__ico::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='17' /%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}

.search > span::before{
  width:15px;height:15px;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.8'/%3E%3Cpath d='m15.4 15.4 5.1 5.1'/%3E%3C/svg%3E");
}
.burger::before{
  width:17px;height:14px;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
}
.empty__ico::before{
  width:44px;height:44px;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.4' cy='10.4' r='7'/%3E%3Cpath d='m15.5 15.5 5.6 5.6'/%3E%3C/svg%3E");
}
/* the 404 page is the only empty state that carries a heading — it gets the
   compass, every no-results state keeps the magnifier */
.empty:has(h1) .empty__ico::before{
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Cpath d='m15.6 8.4-2 5.2-5.2 2 2-5.2 5.2-2Z'/%3E%3C/svg%3E");
}
/* Every holder that receives a colour glyph as a bare text node is zeroed
   here, so an unrecognised emoji from the database can never reach the page.
   Colour is left alone on the holders whose masked icon paints in currentColor. */
.tile__ico,.card__img,.detail__hero,.empty__ico,.search > span,.burger{
  font-size:0;line-height:0;
}

/* 21. RESPONSIVE ---------------------------------------------------------- */
@media(min-width:720px){
  .mobnav,.mobnav.open{display:none}
}

@media(max-width:979px){
  .grid--4:has(.card){grid-template-columns:repeat(5,minmax(0,1fr))}
  .detail:has(> .facts){grid-template-columns:minmax(0,1fr) minmax(0,260px);column-gap:28px}
  .footer__in{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
}

@media(max-width:859px){
  .grid--4,
  .grid--4:has(.card){grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band--rank .grid{grid-template-columns:minmax(0,1fr)}
  .band--rank .card:nth-child(2){border-top:1px solid rgba(255,255,255,.2)}
  .detail + .band--soft .grid--4{grid-template-columns:minmax(0,1fr)}
  .detail + .band--soft .grid--4 .card:nth-child(2){border-top:1px solid var(--c-line-3)}
  .detail__hero{aspect-ratio:16/9;max-height:300px}
  .detail__hero::before{inset-block-end:16px;inset-inline-start:16px;width:46px;height:3px}
}

@media(max-width:719px){
  .header__in{min-height:54px;padding-block:9px 0}
  .logo{font-size:16px}
  .logo__mark{width:30px;height:30px;font-size:12px}
  .burger{display:grid;margin-inline-start:auto}
  .search{order:5;flex:1 0 100%;margin-inline-start:0;margin-bottom:10px}
  .nav{display:none}

  .hero__in{padding-block:34px 32px}
  .hero h1{max-width:none}
  .hero__search{max-width:none}
  .hero__stats{flex-wrap:wrap;gap:0 4px;margin-top:28px}
  .hero__stat{padding-inline-end:18px}

  .grid{gap:22px var(--gap)}
  .grid--3,.grid--4,
  .grid--4:has(.card){grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the ranked chart and the related list stay single-column rows here —
     declared after the generic rule so equal specificity cannot undo them */
  .band--rank .grid,
  .band--rank .grid--4:has(.card),
  .detail + .band--soft .grid--4{grid-template-columns:minmax(0,1fr)}
  .band--rank .card:nth-child(2){border-top:1px solid rgba(255,255,255,.2)}

  .band{padding-block:28px 30px}
  .card__title{font-size:14px}
  .itin b{font-size:17px}

  .fact{grid-template-columns:minmax(0,1fr);padding-block:9px}
  .fact dt{line-height:1.5}
  .band > .detail > .prose{font-size:15px;line-height:1.8}

  .footer__in{grid-template-columns:1fr 1fr;padding-block:32px 26px}
  .footer__brand{grid-column:1/-1}
  .footer__langs{grid-column:1/-1}
}

@media(max-width:479px){
  :root{--gutter:12px}
  .grid--6{grid-template-columns:repeat(auto-fit,minmax(102px,1fr))}
  .tile{min-height:98px;gap:12px}
  .band--rank .card{grid-template-columns:auto 62px minmax(0,1fr);gap:0 10px}
  .band--rank .card::before{font-size:24px;min-width:26px}
  /* matched at the same weight as the rotating-treatment selectors above,
     otherwise the 84px block overflows its 62px track and covers the title */
  .band--rank .card:nth-child(n) .card__img,
  .detail + .band--soft .grid--4 .card:nth-child(n) .card__img{width:62px}
  .detail + .band--soft .grid--4 .card{grid-template-columns:62px minmax(0,1fr);gap:0 10px}
  .langbar__menu{
    grid-template-columns:minmax(0,1fr);
    min-width:186px;width:max-content;
    max-width:calc(100vw - 34px);
  }
  .footer__in{grid-template-columns:minmax(0,1fr)}
  .empty{padding-block:60px}
}

/* 22. MOTION / PRINT ------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

@media print{
  .topbar,.langbar,.search,.burger,.mobnav,.nav,.footer__langs{display:none}
  .header{position:static}
  .page{min-height:0}
  .hero,.footer,.band--rank,.phead{background:#fff;color:#000}
  .hero h1,.hero__stat b,.band--rank .shead h2,.phead h1{color:#000}
}

/* 수집 데이터: 카드 평점 */
.card__rating{margin-left:auto;font-weight:600;color:#b8860b;white-space:nowrap}
.card__rating small{font-weight:400;color:#8a8a8a}

/* 목록 페이지 이동 */
.pager{display:flex;gap:.35rem;justify-content:center;align-items:center;flex-wrap:wrap;margin:2rem 0}
.pager__lnk{display:inline-flex;min-width:2.2rem;height:2.2rem;align-items:center;justify-content:center;
  padding:0 .6rem;border:1px solid var(--line,#e5e5e5);border-radius:.5rem;text-decoration:none;font-size:.9rem}
.pager__lnk.is-active{background:#111;color:#fff;border-color:#111}
.pager__gap{padding:0 .2rem;color:#999}

/* 장소 FAQ */
.faq{max-width:900px;margin:2.5rem auto;padding:0 1rem}
.faq h2{font-size:1.15rem;margin-bottom:.9rem}
.faq__list dt{font-weight:600;margin-top:1rem}
.faq__list dd{margin:.3rem 0 0;color:#555}

/* ── 장소 히어로: 위→아래로 훑기 ──────────────────────────────────────
   히어로 슬롯이 24:9(최대 330px)라 세로로 긴 사진은 가운데 띠만 보인다.
   object-position 을 위에서 아래로 천천히 옮겨 사진 전체가 차례로 드러나게 한다.
   스크롤 연동 애니메이션을 지원하는 브라우저에서는 페이지 스크롤에 맞춰 움직인다. */
@keyframes heroPan{
  0%, 10%   { object-position: 50% 0%; }
  50%, 60%  { object-position: 50% 100%; }
  100%      { object-position: 50% 0%; }
}
.detail__hero img{
  object-position: 50% 0%;
  animation: heroPan 14s ease-in-out infinite;
  will-change: object-position;
}

@media (prefers-reduced-motion: reduce){
  .detail__hero img{ animation: none; object-position: 50% 50%; }
}