/* Topic pages in the homepage's system (topic-ask-v1, 28 September 2026):
   food, travel, coffee and collectors. They reuse home-ask.css and
   home-ask.js as they are (the Ask box, the answer card, the three payoffs,
   the badge, the price and trust lines, the sticky phone bar); this file holds
   only what a topic page adds: a small eyebrow over a longer headline, a trip
   answer that opens onto its days, single-photo shelves, the Story art in the
   Told card and the tour dialog. */

.tp-eyebrow {
  margin: 0;
  font: 600 11px/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--balise-clay);
}
/* Topic headlines are longer than "Your photos know." */
.tp-page .ha-hero h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; }
.tp-page .ha-hero h1:lang(ja) { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.16; }
@media (max-width: 899px) {
  .tp-eyebrow { order: 0; }
}

/* A trip answer opens onto its days: one tile per day, the photo when the
   page has one for that day, the date otherwise. */
.tp-days { display: flex; align-items: flex-start; gap: 6px; padding: 12px 16px 14px; margin: 0; list-style: none; overflow: hidden; min-height: 66px; }
.tp-days-label { flex: none; align-self: center; margin-right: 4px; white-space: nowrap; font: 600 11px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--balise-clay); }
.tp-day { flex: none; display: grid; justify-items: center; gap: 4px; width: 44px; }
.tp-day img, .tp-day .tp-date {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  background: var(--balise-paper-raised); border: 1px solid var(--balise-line);
  font: 700 15px/1 var(--serif); color: var(--balise-evergreen);
}
.tp-day small { font: 500 10px/1.1 var(--mono); letter-spacing: 0.02em; color: var(--balise-muted); white-space: nowrap; }
.tp-day.is-this img, .tp-day.is-this .tp-date { outline: 2px solid var(--balise-gold); outline-offset: 1px; }

/* A shelf with one photo lets it fill the shelf. */
.ha-shelf.tp-one { grid-template-columns: 1fr; }

/* Told, on a topic page: the photo as a 9:16 share, with its card. */
.tp-story { display: grid; place-items: center; height: 100%; background: #0a211c; }
.tp-story-frame { position: relative; height: 88%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
.tp-story-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-story-card {
  position: absolute; left: 8%; right: 8%; bottom: 9%; padding: 10px 11px; border-radius: 10px;
  background: rgba(255, 252, 245, 0.94); color: var(--balise-evergreen);
  font: 500 11px/1.3 var(--sans);
}
.tp-story-card b { display: block; font: 700 15px/1.12 var(--serif); }
.tp-story-card span { display: block; margin-top: 4px; font: 600 9px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--balise-clay); }

/* home-ask.css orders every .ha-cta after the Ask box on phones; in the
   closing block the badge still comes before the tour link. */
.ha-close .ha-cta { order: 0; }
.tp-eyebrow:lang(ja) { text-transform: none; letter-spacing: 0.08em; }
/* A Japanese day label (3日（木）) is wider than its tile. */
.tp-days:lang(ja) .tp-day { width: 52px; }
.tp-days:lang(ja) .tp-day small { font-size: 9.5px; letter-spacing: 0; }

/* Topic pages in system A (style-ask-v1, wine-ask-v1, 28 September 2026).
   The homepage's components (home-ask.css / home-ask.js: the Ask box, the
   payoff cards, the closing badge, the sticky phone bar) with the few pieces a
   topic needs on top: a kicker above the headline, a longer headline, a
   portrait answer for looks, a source line under the box, and the payoff
   visuals (a week of looks as one link, a label shelf with the app screen, a
   Story link card, an assistant answering with thumbnails). Nothing here
   changes a homepage selector; everything is scoped to html.topic-ask. */

.topic-ask .ta-kicker {
  margin: 0;
  font: 600 12px/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--balise-clay);
}
.topic-ask .ta-kicker:lang(ja) { letter-spacing: 0.04em; text-transform: none; font-size: 14px; }
/* A topic headline is a sentence, not three words. */
.topic-ask .ha-hero h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; }
.topic-ask .ha-hero h1:lang(ja) { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.18; }
.topic-ask .ha-hero h1:lang(ja) em { color: var(--balise-clay); font-weight: 700; }

/* Looks answer in portrait: the outfit, head to shoe. On a phone it is
   square, so the badge under the box stays in the first screen (visual QA,
   29 September 2026). */
.topic-ask .ta-looks .ha-shot { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .topic-ask .ta-looks .ha-shot { aspect-ratio: 1 / 1; }
}
.ta-src { margin: 10px 0 0; font: 13px/1.4 var(--sans); color: var(--balise-muted); text-align: center; }
.ta-src:lang(ja) { word-break: keep-all; overflow-wrap: anywhere; }
.ta-askwrap { min-width: 0; display: grid; justify-items: center; }
@media (max-width: 899px) {
  .topic-ask .ha-copy > .ta-kicker { order: 0; }
  .ta-askwrap { order: 3; }
}
.ha-more .ta-thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

/* Told (looks): a week of looks as one link, beside the tall Story. */
.ta-week { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; height: 100%; box-sizing: border-box; }
.ta-weeklink { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-radius: 14px; background: var(--balise-paper); color: var(--balise-ink); }
.ta-weeklink b { display: block; font: 700 17px/1.1 var(--serif); }
.ta-weeklink small { display: block; margin-top: 3px; font: 500 10.5px/1.25 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--balise-muted); }
.ta-weeklink small:lang(ja) { text-transform: none; letter-spacing: 0; }
.ta-weekgrid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 4px; }
.ta-weekgrid img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 6px; }
.ta-url { padding: 6px 8px; border-radius: 99px; background: var(--balise-paper-raised); font: 500 11px/1 var(--sans); color: var(--balise-muted); text-align: center; }
.ta-tall { position: relative; height: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; }
.ta-tall img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ta-tall span { position: absolute; left: 8px; right: 8px; bottom: 8px; font: 700 13px/1.15 var(--serif); color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }

/* Sorted (JA wine): the labels, and the Japanese app screen that holds them. */
.ta-labels { position: absolute; inset: 12px 42% 12px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 5px; }
.ta-labels img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 6px; }
.ta-phone { position: absolute; top: 10px; bottom: -40px; right: 12px; width: 37%; overflow: hidden; border-radius: 18px; border: 3px solid #0a211c; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6); background: #fff; }
.ta-phone img { display: block; width: 100%; height: auto; }

/* Told (wine): a Story as it arrives in a chat, one link. */
.ta-linkcard { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--balise-paper); color: var(--balise-ink); text-decoration: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.ta-linkcard img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.ta-linkcard b { display: block; font: 700 16px/1.15 var(--serif); }
.ta-linkcard small { display: block; margin-top: 4px; font: 500 11px/1.3 var(--mono); color: var(--balise-muted); overflow-wrap: anywhere; }

/* Known: the assistant answers with the photos it means. */
.ha-chat .ta-me { justify-self: end; display: grid; justify-items: end; gap: 6px; max-width: 80%; }
.ha-chat .ta-me img { width: 64px; height: 84px; object-fit: cover; border-radius: 10px; }
.ha-chat .ta-me .ha-bubble { max-width: none; }
.ha-bubble.ai .ta-pair { display: flex; gap: 4px; }
.ha-bubble.ai .ta-pair img { width: 38px; height: 52px; border-radius: 6px; object-fit: cover; }
.ha-bubble.ai.ta-two { grid-template-columns: auto minmax(0, 1fr); }
.ha-card-copy small { display: block; margin-top: 8px; font: 13px/1.35 var(--sans); color: rgba(255, 252, 245, 0.62); }
.ha-card-copy small a { color: var(--balise-gold); font-weight: 600; }
.ha-card-copy p:lang(ja), .ha-bubble:lang(ja) { word-break: keep-all; overflow-wrap: anywhere; }
/* The chat card grows with its bubbles rather than cropping them. */
.ha-vis.ta-chat { aspect-ratio: auto; min-height: 260px; }
.ha-vis.ta-chat .ha-chat { height: 100%; box-sizing: border-box; }
.ta-askwrap > .ha-ask { order: 0; }
.ta-askwrap > .ta-src { order: 1; }
/* Phones: the source line under the box ("Bottles from Eric's roll…") goes
   under the badge, so the badge stays in the first screen (visual QA,
   29 September 2026). */
@media (max-width: 899px) {
  .ta-askwrap { display: contents; }
  .ta-askwrap > .ha-ask { order: 3; }
  .ta-askwrap > .ta-src { order: 5; margin-top: 0; }
}

/* Wine depth band (wine-depth-v1, 28 September 2026): two Ask pairs a text
   search cannot answer — a misspelled name, and a region the labels never
   print. Paper band between the hero and the payoffs. */
.ta-depth { background: var(--balise-paper-raised); color: var(--balise-ink); padding: 48px var(--gutter, 16px) 52px; }
/* The same content width as the top bar and the hero (polish round 2). */
.ta-depth-in { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto; }
.ta-depth h2 { font: 700 clamp(24px, 3.2vw, 38px)/1.12 var(--serif); letter-spacing: -0.015em; margin: 0 0 24px; max-width: 22em; color: var(--balise-ink); }
.ta-depth h2 em { font-style: italic; color: var(--balise-clay); }
.ta-depth h2:lang(ja) { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.ta-depth h2:lang(ja) em { font-style: normal; }
.ta-depth-three li:lang(ja) { word-break: keep-all; }
.ta-depth-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ta-depth-pair { display: grid; gap: 10px; align-content: start; background: var(--balise-white); border: 1px solid var(--balise-line); border-radius: 18px; padding: 14px; min-width: 0; }
.ta-depth-q { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 999px; background: var(--balise-paper); border: 1px solid var(--balise-line); font: 500 16px/1.3 var(--sans); min-width: 0; }
.ta-depth-q svg { flex: none; color: var(--balise-muted); }
.ta-depth-typed { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ta-depth-pair[data-depth="typo"] .ta-depth-typed { text-decoration: underline wavy var(--balise-clay); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ta-depth-who { flex: none; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--balise-clay); }
.ta-depth-a { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ta-depth-a > img { flex: none; width: 72px; height: 90px; border-radius: 10px; object-fit: cover; object-position: 50% 55%; }
.ta-depth-a p { margin: 0; display: grid; gap: 4px; min-width: 0; }
.ta-depth-a b { font: 700 18px/1.2 var(--serif); }
.ta-depth-a span { font: 13px/1.4 var(--sans); color: var(--balise-muted); overflow-wrap: anywhere; }
.ta-depth-labels { flex: none; display: flex; }
.ta-depth-labels img { width: 44px; height: 56px; border-radius: 8px; object-fit: cover; object-position: 50% 55%; border: 2px solid var(--balise-white); }
.ta-depth-labels img + img { margin-left: -12px; }
.ta-depth-three ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; min-width: 0; font: 13px/1.35 var(--sans); color: var(--balise-ink); }
.ta-depth-three li { overflow-wrap: anywhere; }
.ta-depth-note { margin: 0; font: 600 14px/1.4 var(--sans); color: var(--balise-evergreen-soft); }
.ta-depth-note:lang(ja), .ta-depth-a span:lang(ja) { word-break: keep-all; overflow-wrap: anywhere; }

/* Phones (polish round 2): the looks answer is 4:3 like the others' 16:10
   neighbours need, cropped from the top so the outfit stays; the day tiles
   sit tighter. Travel's Told card title and the Story card titles balance
   their lines instead of leaving one word alone. */
@media (max-width: 430px) {
  .topic-ask .ta-looks .ha-shot { aspect-ratio: 4 / 3; }
  .topic-ask .ta-looks .ha-shot img { object-position: 50% 22%; }
  .tp-days { min-height: 0; padding: 10px 14px 12px; }
  .tp-day { width: 40px; }
  .tp-days:lang(ja) .tp-day { width: 50px; }
  .tp-day img, .tp-day .tp-date { width: 36px; height: 36px; }
  .tp-page .ha-hero h1:lang(ja) { font-size: 34px; line-height: 1.1; }
}
.tp-story-frame { height: 92%; }
.tp-story-card { left: 6%; right: 6%; padding: 8px 9px; }
.tp-story-card b { font-size: 14px; text-wrap: balance; }
.tp-story-card b:lang(ja) { font-size: 13px; line-height: 1.3; }
/* A short trip's day row names itself, like every other answer's row
   ("That night", "The pieces"), rather than leaving two tiles in an empty
   bar. The words are the row's own label. */
.tp-days:not(:has(> .tp-day:nth-child(5)))::before {
  content: attr(aria-label); content: attr(aria-label) / "";
  flex: none; align-self: center; margin-right: 6px;
  font: 600 11px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--balise-clay);
}
.tp-days:lang(ja)::before { letter-spacing: 0.04em; text-transform: none; }
@media (max-width: 430px) {
  .tp-days:has(> .tp-day:nth-child(4))::before { content: none; }
}
/* Japanese labels on the narrow 9:16 look: one size down, so 「デニムジャケット・」 keeps to its line. */
.ta-tall span:lang(ja) { left: 6px; right: 6px; font-size: 10.5px; line-height: 1.25; }