/* A clothing label's website (src/examples/ex-website-lookbook.js), beside the Business Website engine's
   own stylesheet. Paper, ink and hairlines: nothing here is a box with a shadow. A garment's picture is
   upright (3:4) and stands two across on a phone; headings are set large; what a piece is made in sits
   beside its picture like a caption. Every colour, the radius and the display face are the label's own
   (--x-* on main#main). Phone first; widths in em, as the kit's are.

   Everything hangs from .xw-look, the one class lookbook() puts round a page. Inside it the engine's own
   cards (a collection's list, the cards() of a band) are dressed as garment cards, so a piece looks the
   same wherever it is listed. */

/* ---- type shared by the views --------------------------------------------------------------- */
.xw-look-kicker, .xw-look-spec dt, .xw-look-cloth h3 {
  color: var(--x-muted); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps);
}
.xw-look-lede { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); }
.xw-look-no { color: var(--x-muted); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.xw-look-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.xw-look .xw-pagehead h1, .xw-look .xw-hero h1, .xw-look .xw-detail h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.375rem); }
.xw-look h1:lang(en), .xw-look-chapter .x-card-title:lang(en), .xw-look-entry-name:lang(en) { letter-spacing: -.02em; }
.xw-look .xw-band-head h2, .xw-look .xw-block > h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }

/* A picture that does not exist yet: the same tonal panel, with the diagonal rib of a twill across it. */
.xw-look .x-img { border-radius: 0; }
.xw-look .x-img--plate { background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--x-ink) 5%, transparent) 7px 8px), var(--x-surface-2); }

/* ---- the strip under the phone header ----------------------------------------------------------
   Collections, Showroom and the fitting enquiry share one line, the enquiry's label folding in two where
   the line is short. Once a reader has doubled the text size the engine lets the strip take a second
   line; the enquiry then moves down onto it and stays at the far edge, clear of the mark under the page
   that is open. */
.xw-quick-cta { flex: 1 1 0; text-align: end; }

/* ---- a garment as a card: an upright picture, its name, its cloth ------------------------------ */
.xw-look .xw-list--cards { gap: clamp(24px, 4vw, 40px) clamp(12px, 2.5vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 45em) { .xw-look .xw-list--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .xw-look .xw-list--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.xw-look .xw-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
.xw-look .xw-card .x-card-media { flex: none; width: auto; border-radius: 0; }
.xw-look .xw-card .x-card-body { gap: 2px; padding: 0; }
.xw-look .xw-card .x-card-title { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); }
.xw-look .xw-card .x-card-meta { font-size: .875rem; }
.xw-look .xw-card .x-card-badge { position: absolute; inset-inline-start: 8px; top: 8px; max-width: calc(100% - 16px); margin: 0; }
.xw-look .xw-card .x-card-badge .x-pill { white-space: normal; }
.xw-look .xw-group-head { padding-bottom: 12px; }
.xw-look .xw-group + .xw-group { margin-top: clamp(12px, 3vw, 28px); }
.xw-look .xw-group .xw-list { padding-top: clamp(16px, 3vw, 24px); }
.xw-look .xw-teaser-media > :only-child { grid-column: 1 / -1; }
/* A list of pieces has no search field: its cloth chips take the whole row. */
.xw-look .xw-tools { grid-template-columns: minmax(0, 1fr); }

/* ---- the cover: the line in large type, one photograph, the collections as contents --------------- */
.xw-look-cover { display: grid; gap: clamp(18px, 3vw, 32px); padding-block: clamp(24px, 5vw, 60px) clamp(28px, 5vw, 56px); }
.xw-look-cover > * { min-width: 0; }
.xw-look-cover-head { display: grid; gap: 12px; }
/* Sized mostly from the reader's own text size, so that it still grows when that is doubled. */
.xw-look-cover h1 { max-width: 20ch; font-size: clamp(2.375rem, 2.375rem + 2.6vw, 4.75rem); }
.xw-look-cover h1:lang(en) { line-height: 1.04; letter-spacing: -.03em; }
.xw-look-cover-side { display: grid; align-content: end; gap: 16px; }
.xw-look-cover-media { overflow: hidden; }
@media (min-width: 53.75em) {
  .xw-look-cover { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
  .xw-look-cover-head, .xw-look-contents { grid-column: 1 / -1; }
  .xw-look-cover-media { grid-column: 1 / span 8; grid-row: 2; }
  .xw-look-cover-side { grid-column: 9 / -1; grid-row: 2; }
}
.xw-look-contents { display: grid; border-top: 2px solid var(--x-ink); }
.xw-look-contents li { border-bottom: 1px solid var(--x-hair); }
.xw-look .xw-look-entry {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
  margin: 0; padding: 14px 0; color: var(--x-ink); text-decoration: none;
}
.xw-look-entry > :not(.xw-look-no) { grid-column: 2; }
.xw-look-entry-name { font: var(--x-display-weight, 600) clamp(1.375rem, 1.2rem + 1vw, 1.875rem)/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xw-look-entry-name:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xw-look-entry-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--x-muted); font-size: .9375rem; }
@media (min-width: 45em) {
  .xw-look .xw-look-entry { grid-template-columns: 2.25rem minmax(9rem, 14rem) minmax(0, 1fr) auto; column-gap: clamp(16px, 3vw, 40px); padding-block: 18px; }
  .xw-look-entry > :not(.xw-look-no) { grid-column: auto; }
}

/* ---- the collections as chapters -------------------------------------------------------------- */
.xw-look-chapters { display: grid; gap: clamp(32px, 6vw, 72px); }
.xw-look-chapter { gap: 14px; border: 0; border-radius: 0; background: none; }
.xw-look-chapter .x-card-media { border-radius: 0; }
.xw-look-chapter .x-card-body { gap: 8px; padding: 0; }
.xw-look-chapter .xw-look-no { order: -1; }
.xw-look-chapter .x-card-title { font: var(--x-display-weight, 600) clamp(1.75rem, 1.5rem + 1.7vw, 3rem)/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xw-look-chapter .x-card-title:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xw-look-chapter .x-card-meta { color: var(--x-ink); font-size: 1.0625rem; }
.xw-look-chapter-story { max-width: 34rem; color: var(--x-muted); }
.xw-look-chapter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--x-hair); font-size: .9375rem; }
@media (min-width: 53.75em) {
  .xw-look-chapter { flex-direction: row; gap: clamp(28px, 5vw, 72px); }
  .xw-look-chapter:nth-child(even) { flex-direction: row-reverse; }
  .xw-look-chapter .x-card-media { flex: 0 0 56%; align-self: flex-start; }
  .xw-look-chapter .x-card-body { align-content: center; }
}

/* ---- one garment on its own screen ------------------------------------------------------------- */
.xw-look-piece { display: grid; align-content: start; gap: clamp(22px, 3.5vw, 40px); }
.xw-look-piece > * { min-width: 0; }
.xw-look-piece-grid { display: grid; align-items: start; gap: 16px clamp(14px, 4vw, 24px); grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-areas: "head head" "media spec" "body body"; }
.xw-look-piece-grid > * { min-width: 0; }
.xw-look-piece-head { grid-area: head; display: grid; gap: 8px; }
.xw-look-piece-head h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.xw-look-piece-badge { display: flex; }
.xw-look-piece-media { grid-area: media; }
.xw-look-spec { grid-area: spec; display: grid; align-content: start; gap: 14px; }
.xw-look-spec > div { display: grid; align-content: start; gap: 6px; padding-top: 10px; border-top: 1px solid var(--x-hair); }
.xw-look-spec > div:first-child { padding-top: 0; border-top: 0; }
.xw-look-piece-body { grid-area: body; display: grid; align-content: start; gap: 16px; }
.xw-look-piece-body > * { min-width: 0; }
.xw-look-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 4px; }
.xw-look-parts h2 { font-size: 1.1875rem; }
@media (min-width: 53.75em) {
  .xw-look-piece-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; grid-template-areas: "media head" "media spec" "media body"; gap: 20px clamp(28px, 5vw, 72px); }
  .xw-look-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding-block: 14px; border-block: 1px solid var(--x-hair); }
  .xw-look-spec > div { padding-top: 0; border-top: 0; }
}
.xw-look-ways { display: grid; gap: 16px; }
.xw-look-ways > * { min-width: 0; }
@media (min-width: 45em) { .xw-look-ways { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.xw-look .xw-side { border-radius: 0; }
/* The way out to another example of the label: drawn apart from the label's own content. */
.xw-look-pointer { display: grid; align-content: start; gap: 8px; padding: 16px 18px; border: 1px dashed var(--x-line); }
/* Under a list of pieces it stands clear of the last row's captions. */
.xw-look .xw-block > .xw-look-pointer { margin-top: clamp(12px, 2.5vw, 24px); }

/* ---- colours, care, measurements ----------------------------------------------------------------- */
.xw-look-swatches { display: grid; gap: 6px; }
.xw-look-swatches li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; }
.xw-look-chip { width: 14px; height: 14px; border: 1px solid var(--x-line); }
.xw-look-swatch-note { grid-column: 2; color: var(--x-muted); font-size: .8125rem; }
.x-fact .xw-look-swatches { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.xw-look-care { display: grid; }
.xw-look-care li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xw-look-care li:first-child { border-top: 0; }
.xw-look-care .x-i { margin-top: .3em; color: var(--x-muted); }
.xw-look-chart { display: grid; gap: 10px; }
.xw-look-chart table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.xw-look-chart th, .xw-look-chart td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--x-hair); text-align: start; vertical-align: bottom; }
/* Column headings are plain small words, not tracked capitals: four of them must fit a phone whose reader has doubled the text size. */
.xw-look-chart thead th { border-bottom: 2px solid var(--x-ink); color: var(--x-muted); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); overflow-wrap: anywhere; }
.xw-look-chart tbody th { font-weight: 600; }
.xw-look-chart tr[data-on] > * { padding-inline-start: 10px; background: var(--x-surface-2); font-weight: 700; }

/* ---- a cloth: what it is, how to look after it, what is cut from it ---------------------------------- */
.xw-look-cloth { display: grid; align-items: start; gap: 16px clamp(20px, 4vw, 56px); padding-top: clamp(20px, 3vw, 32px); border-top: 2px solid var(--x-ink); }
.xw-look-cloth > * { min-width: 0; }
.xw-look-cloth-media { max-width: 9rem; }
.xw-look-cloth-text { display: grid; gap: 12px; }
.xw-look-cloth-text h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.xw-look-cloth-cols { display: grid; gap: 20px clamp(20px, 4vw, 48px); margin-top: 6px; }
.xw-look-cloth-cols > div { display: grid; align-content: start; gap: 6px; min-width: 0; }
.xw-look-used li { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--x-hair); }
.xw-look-used li:first-child { border-top: 0; }
.xw-look-more { margin-top: 6px; }
@media (min-width: 45em) {
  .xw-look-cloth { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); }
  .xw-look-cloth--plain { grid-template-columns: minmax(0, 1fr); }
  .xw-look-cloth-media { max-width: none; }
  .xw-look-cloth-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- the size guide's one question ---------------------------------------------------------------- */
.xw-look-finder { display: grid; align-items: end; gap: 12px; max-width: 28rem; padding: 16px 18px; background: var(--x-surface); }
.xw-look-finder .x-btn { justify-self: start; }
.xw-look-answer { display: grid; gap: 6px; padding: 12px 14px; border-inline-start: 3px solid var(--x-ink); background: var(--x-bg); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .xw-look .xw-card.x-card--link:hover, .xw-look-chapter.x-card--link:hover { transform: none; }
  .xw-look .xw-card.x-card--link:hover .x-card-title a, .xw-look-chapter.x-card--link:hover .x-card-title a, .xw-look-entry:hover .xw-look-entry-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .xw-look .xw-card.x-card--link:hover .x-img, .xw-look-chapter.x-card--link:hover .x-img { opacity: .92; }
}