/* GLOSS Manhattan · glossmanhattan.com
   Pearl-grey paper and chrome, like the Instagram logo. Editorial layout. */

:root {
  --paper: #F2F2F0;
  --paper-hi: #FBFBFA;
  --paper-lo: #E4E4E1;
  --ink: #141414;
  --ink-2: #3B3B39;
  --muted: #7A7A75;
  --rule: #CACAC5;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  --maxw: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(120% 80% at 50% 0%, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 300 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul, dl, dd, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- type ---------- */
.kicker, .folio, .bar-nav a, .btn, .lines .k, .toc small, .time, .book, .extras-h, .contact span, figcaption {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .28em;
}
.kicker { font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.display {
  font: 400 clamp(44px, 6.4vw, 92px)/.98 var(--display);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
}
.display em, .display i { font-style: italic; }
.note { color: var(--muted); font-size: 15px; margin-top: 18px; max-width: 46ch; }
.note a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px;
  font-size: 11px; text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.btn-ink { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-ink:hover { background: transparent; color: var(--ink); }
.btn-line { border: 1px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px var(--pad);
  background: rgba(242, 242, 240, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 20, 20, .08);
}
.bar-logo img { height: 40px; width: auto; }
.bar-nav { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.bar-nav a { font-size: 10.5px; text-decoration: none; color: var(--ink-2); }
.bar-nav a:hover { color: var(--ink); }
.bar-book { min-height: 38px; padding: 0 22px; }

/* ---------- folio (page header line) ---------- */
.folio {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 10.5px; color: var(--muted);
  padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(40px, 6vw, 80px);
}

/* ---------- sections ---------- */
.cover, .spread { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.spread { padding-top: clamp(72px, 10vw, 140px); }

/* ---------- cover ---------- */
.cover { padding-top: clamp(20px, 3vw, 36px); }
.cover .folio { margin-bottom: 0; }
.cover .folio-top { border-bottom: 0; }
.masthead { padding: clamp(20px, 3.5vw, 44px) 0 clamp(14px, 2.4vw, 28px); }
.masthead img { width: min(100%, 920px); margin: 0 auto; }
/* the chrome logo sits on white: multiply makes the white disappear into the pearl paper */
.masthead img, .bar-logo img, .foot img { mix-blend-mode: multiply; }
.cover-grid {
  display: grid; grid-template-columns: 1fr minmax(0, 520px) 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: center; padding-top: clamp(36px, 5vw, 64px);
}
.cover-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 55%; }
.lines { display: flex; flex-direction: column; gap: 40px; }
.lines a { text-decoration: none; display: block; }
.lines .k { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 10px; }
.lines .l { display: block; font: italic 400 clamp(22px, 2.2vw, 30px)/1.15 var(--display); }
.lines a:hover .l { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lines-right { text-align: right; align-items: flex-end; }
.lines-right .btn { margin-top: 4px; }
.lines a.btn { display: inline-flex; }

/* ---------- plates ---------- */
.plate img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-lo); }
figcaption { font-size: 10px; color: var(--muted); margin-top: 12px; letter-spacing: .22em; }
figcaption i { font: italic 400 15px var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); margin-right: 6px; }

/* ---------- contents ---------- */
.contents-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.toc { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--rule); }
.toc a {
  display: grid; grid-template-columns: 76px 1fr; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.toc .pg { font: 400 34px/1 var(--display); }
.toc .t { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--display); }
.toc small { display: block; font-size: 10px; color: var(--muted); margin-top: 8px; }
.toc a:hover .t { font-style: italic; }

/* ---------- method ---------- */
.method-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); }
.essay > p:not(.kicker) { font: 400 19px/1.65 var(--display); color: var(--ink-2); margin-top: 22px; max-width: 58ch; }
.essay .lede { margin-top: clamp(28px, 4vw, 44px); }
.dropcap::first-letter {
  float: left; font: 400 5.2em/.8 var(--display); margin: .06em .1em 0 0; color: var(--ink);
}
.pull {
  margin: clamp(36px, 5vw, 56px) 0; padding: 26px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  font: italic 400 clamp(26px, 3vw, 38px)/1.2 var(--display);
}
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.facts li { border-top: 1px solid var(--rule); padding-top: 14px; }
.facts b { display: block; font: 400 28px/1 var(--display); margin-bottom: 10px; }
.facts span { font-size: 14px; color: var(--ink-2); }
.method-plates { display: flex; flex-direction: column; gap: 36px; }
.plate-small { width: 62%; align-self: flex-end; }

/* ---------- menu ---------- */
.menu-head { margin-bottom: clamp(32px, 5vw, 56px); }
.items { border-top: 1px solid var(--ink); }
.item {
  display: grid; grid-template-columns: 40px 88px 1fr auto auto auto; gap: 8px 28px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.thumb { width: 88px; height: 88px; object-fit: cover; background: var(--paper-lo); }
.item .no { font: italic 400 18px/1 var(--display); color: var(--muted); }
.item h3 { font: 400 clamp(22px, 2.3vw, 30px)/1.15 var(--display); }
.item p { font-size: 15px; color: var(--muted); margin-top: 6px; max-width: 60ch; }
.time { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.price { font: 400 clamp(24px, 2.4vw, 32px)/1 var(--display); min-width: 2.8em; text-align: right; }
.book {
  font-size: 10.5px; text-decoration: none; white-space: nowrap;
  padding: 10px 0 6px; border-bottom: 1px solid var(--ink);
}
.book::after { content: " →"; letter-spacing: 0; }
.book:hover { color: var(--muted); border-color: var(--muted); }

/* ---------- season ---------- */
.season-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.season-photo { position: sticky; top: 90px; }
.season .items { margin-top: clamp(28px, 4vw, 44px); }
.items-compact .item { grid-template-columns: 34px 72px 1fr auto auto; gap: 6px 20px; }
.items-compact .thumb { width: 72px; height: 72px; grid-row: 1 / span 2; }
.items-compact .no { grid-row: 1 / span 2; }
.items-compact .name { grid-column: 3; grid-row: 1; }
.items-compact .time { grid-column: 3; grid-row: 2; }
.items-compact .price { grid-column: 4; grid-row: 1 / span 2; }
.items-compact .book { grid-column: 5; grid-row: 1 / span 2; }

/* ---------- extras ---------- */
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 6vw, 96px); border-top: 1px solid var(--ink); }
.extras-h { font-size: 11px; padding: 26px 0 8px; }
.extras dl > div { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.extras dt { font: 400 18px/1.3 var(--display); }
.extras dd { font: 400 18px/1.3 var(--display); white-space: nowrap; }

/* ---------- the edit ---------- */
.edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.edit-grid .plate img { aspect-ratio: 1; }
.edit-grid .plate:nth-child(3n+2) { margin-top: clamp(24px, 5vw, 72px); }

/* ---------- visit ---------- */
.visit-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: stretch; }
address { font: normal 400 clamp(22px, 2.2vw, 28px)/1.4 var(--display); margin-top: clamp(28px, 4vw, 40px); }
.contact { margin-top: 28px; border-top: 1px solid var(--rule); }
.contact li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.contact span { font-size: 10.5px; color: var(--muted); }
.contact a { text-decoration: none; font: 400 18px var(--display); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.map { min-height: 420px; border-top: 1px solid var(--ink); padding-top: 16px; }
.map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(1) contrast(1.04) brightness(1.03); }

/* ---------- footer ---------- */
.foot {
  max-width: var(--maxw); margin: clamp(96px, 12vw, 160px) auto 0; padding: 48px var(--pad) 56px;
  border-top: 1px solid var(--ink); text-align: center;
}
.foot img { width: min(70%, 420px); margin: 0 auto 20px; }
.foot p { font: italic 400 20px var(--display); }
.foot .small { font: 300 12px var(--sans); color: var(--muted); margin-top: 10px; letter-spacing: .06em; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .bar-nav { display: none; }
  .cover-grid { grid-template-columns: 1fr 1fr; }
  .cover-photo { grid-column: 1 / -1; grid-row: 1; }
  .lines-left { grid-column: 1; }
  .lines-right { grid-column: 2; }
}
@media (max-width: 760px) {
  body { font-size: 16px; background-attachment: scroll; }
  .hide-sm { display: none; }
  .bar { padding: 8px 16px; }
  .bar-logo img { height: 28px; }
  .cover-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .cover-photo, .lines-left, .lines-right { grid-column: 1; grid-row: auto; }
  .cover-photo { margin: 0 -16px; }
  .lines { gap: 26px; }
  .lines-right { text-align: left; align-items: stretch; }
  .lines-right .btn { width: 100%; }
  .contents-grid, .method-grid, .season-grid, .visit-grid, .extras { grid-template-columns: 1fr; }
  .contents-grid .plate { order: 2; }
  .season-photo { position: static; }
  .plate-small { width: 100%; }
  .method-plates { flex-direction: row; gap: 12px; }
  .method-plates .plate { flex: 1; width: auto; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; }
  .facts b { margin: 0; font-size: 22px; }
  .item, .items-compact .item { grid-template-columns: 76px 1fr auto; gap: 4px 14px; padding: 18px 0; align-items: baseline; }
  .item .no { display: none; }
  .item .thumb, .items-compact .thumb { width: 76px; height: 76px; grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .item .name, .items-compact .name { grid-column: 2 / -1; grid-row: 1; }
  .item .time, .items-compact .time { grid-column: 2; grid-row: 2; }
  .item .price, .items-compact .price { grid-column: 3; grid-row: 2; text-align: right; }
  .item .book, .items-compact .book { grid-column: 2 / -1; grid-row: 3; justify-self: start; margin-top: 6px; }
  .item h3 { font-size: 21px; }
  .edit-grid { grid-template-columns: 1fr 1fr; }
  .edit-grid .plate:nth-child(3n+2) { margin-top: 0; }
  .map, .map iframe { min-height: 320px; }
  .actions .btn { flex: 1 1 100%; }
}