/* STYLE: brand files stacked in an archive drawer on a dark desk (brand.js). */
:root { --archive-desk: #1e1712; }

.style {
  --desk: var(--archive-desk);
  --doc: #f2eee5;
  --rule: rgba(36, 27, 21, .22);
  --mono: var(--display);
  --tab-h: 24px;
  --sheet-h: 192px;
  --peek: 104px; /* how much of a file shows above the next one */
  --folder-radius: 11px;
  --sheet-top: calc(env(safe-area-inset-top) + 58px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Fine fibres for card stock; the original, coarser grain belongs to the sticky notes.
     All materials share soft light from the upper left. */
  --stock-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48 .85' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --paper-light: linear-gradient(118deg, rgba(255, 253, 240, .15), transparent 36%, rgba(53, 37, 22, .035) 78%, rgba(255, 253, 240, .07));
  --paper-surface: var(--stock-fiber), var(--paper-light);
  /* Clean, fine-grained cork: an even honey tone without dark mottling. */
  --cork-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .29  0 0 0 0 .17  -1.4 0 0 0 .68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
  --cork-base: #c6a178;
  --cork-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .91  0 0 0 0 .8  0 0 0 0 .65  1.4 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px);
  background: var(--desk);
  color: var(--cream);
  word-break: keep-all;
}
.style :where(h2, h3, p, dl, dd, figure) { margin: 0; }
.style i { font-style: normal; }
html.st-locked { overflow: hidden; }

/* ── header ── */
.st-head {
  padding: calc(env(safe-area-inset-top) + 16px) var(--gutter) 26px;
  /* the warm light fades to the plain desk before the board's band, so the colours meet */
  background: radial-gradient(130% 100% at 50% 0%, #2c231c, var(--desk) 78%);
}
.st-mast { display: flex; align-items: center; justify-content: space-between; font: 13px/1 var(--display); letter-spacing: .14em; color: var(--taupe-soft); }
.st-wordmark { display: flex; align-items: center; min-height: 44px; margin: -14px 0; }
.st-wordmark img { width: 114px; height: auto; filter: brightness(0) invert(1); }
.st-wordmark:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.st-head h2 { margin-top: 34px; font: 400 min(19vw, 78px)/.84 var(--display); letter-spacing: .01em; }
.st-lead { margin-top: 16px; font-size: 13px; line-height: 1.65; color: rgba(240, 233, 224, .78); }

/* The memo travels with the board; the category index above it owns navigation. */
.st-switch {
  --band: 0px;
  position: relative;
  z-index: 1;
  height: calc(var(--band) + 110px);
}
.st-switch::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--band); background: var(--desk); }
/* The board's top edge meets the archive below it. */
.st-pin {
  position: absolute;
  inset: var(--band) 0 -1px; /* overlaps the board by a pixel so no seam shows at fractional offsets */
  z-index: 1;
  border-radius: 18px 18px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, .5), inset 1px 0 0 rgba(255, 236, 205, .2), 0 -3px 5px -2px rgba(0, 0, 0, .3);
}
/* A slip of paper flush with the board's top edge, held at its middle by a binder clip that
   bites the paper and the cork edge together. */
.st-memo-card {
  position: absolute;
  z-index: 2;
  left: 30px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - var(--index-w) * 2 - 3px - 46px);
  height: 64px;
  padding: 18px 8px 6px;
  color: #3a2f26;
  transform: rotate(-.8deg);
  transform-origin: 0 0;
  filter: drop-shadow(0 1px .4px rgba(54, 35, 17, .28)) drop-shadow(2px 5px 3px rgba(54, 35, 17, .2));
}
/* the paper itself, so its rough edge does not cut off the clip */
.st-memo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--paper-surface),
    repeating-linear-gradient(transparent 0 15px, rgba(120, 95, 70, .12) 15px 16px) 0 8px,
    linear-gradient(178deg, rgba(53, 37, 22, .09), transparent 15px 80%, rgba(255, 255, 255, .55)),
    #efe6d3;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .65);
  clip-path: polygon(0 1px, 9% 0, 18% 2px, 30% 0, 41% 1px, 55% 0, 63% 2px, 76% 0, 88% 1px, 100% 0, 100% calc(100% - 1px), 83% 100%, 64% calc(100% - 1px), 43% 100%, 20% calc(100% - 1px), 0 100%);
}
.st-memo-title { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.st-memo-title b { font: 400 clamp(16px, 4.9vw, 22px)/1 var(--display); letter-spacing: .05em; white-space: nowrap; }
.st-memo-title small { font: 400 clamp(11px, 3.2vw, 13px)/1 var(--display); letter-spacing: .14em; color: #6f6155; white-space: nowrap; }
/* the clip's jaw wraps over the board edge at the paper's middle, over the lettering if need be */
.st-binder {
  position: absolute;
  left: calc(50% + 14px);
  top: -12px;
  z-index: 1;
  width: 50px;
  height: auto;
  transform: translateX(-50%) rotate(-1deg);
  pointer-events: none;
  filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, .35)) drop-shadow(0 4px 4px rgba(54, 35, 17, .25));
}
/* Category controls stay above the cork board. */
.st-categories {
  position: relative;
  z-index: 7;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 3px;
  height: 32px;
  padding-right: 10px;
  pointer-events: none;
}
.st-categories button {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--index-w);
  width: var(--index-w);
  margin-top: 0;
  padding: 0;
  pointer-events: auto;
  filter: drop-shadow(0 1px 1.5px rgba(34, 23, 14, .3));
}
.st-category-tab {
  position: relative;
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 2px 2px 0 0;
  background:
    linear-gradient(102deg, rgba(255, 255, 255, .32), transparent 20% 75%, rgba(255, 255, 255, .12)),
    linear-gradient(rgba(255, 255, 255, .14), transparent 55%, rgba(53, 37, 22, .08)), var(--flag);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(53, 37, 22, .12);
  color: rgba(43, 33, 24, .82);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: height .25s var(--ease), color .2s ease;
}
.st-categories [aria-selected="true"] .st-category-tab { height: 35px; color: #2b2118; font-weight: 800; }
/* Milky, translucent film stays on the cork beneath the coloured head. */
.st-category-film {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 26px;
  padding: 0 5px 4px;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .15), transparent 55%, rgba(255, 255, 255, .08)),
    rgba(244, 241, 232, .6);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  border: 1px solid rgba(255, 255, 255, .42);
  border-top: 0;
  border-radius: 0 0 1px 1px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22), 1px 1px 1px rgba(54, 35, 17, .1);
}
.st-categories button:focus-visible { outline: none; }
.st-categories button:focus-visible .st-category-tab { outline: 2px solid var(--cream); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .st-category-tab { transition: none; } }

/* Side-mounted flags: their frosted film is fixed to the right edge, coloured heads face left. */
.st-side-categories {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 0;
  right: 0;
  z-index: 8;
  display: grid;
  justify-items: end;
  gap: 2px;
  width: min(100%, var(--page-width, 430px));
  margin: 0 auto;
  overflow: clip;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s .24s;
}
.st-side-categories button {
  width: 44px;
  height: 44px;
  padding: 0;
  opacity: 0;
  transform: translate3d(44px, 0, 0);
  transition: transform .28s var(--ease), opacity .2s ease;
}
.st-side-categories button > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 40px;
  margin-left: auto;
  margin-right: 5px;
  border-radius: 5px 0 0 5px;
  background: var(--paper-surface), var(--flag);
  box-shadow: inset 0 1px 0 rgba(255, 253, 240, .45), inset 1px 0 rgba(36, 27, 21, .18), -1px 2px 3px rgba(36, 27, 21, .25);
  color: #493c2d;
  font-size: 11px;
  font-weight: 600;
  transition: width .2s var(--ease), color .2s ease;
}
.st-side-categories button > span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 5px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .2), transparent 65%), rgba(244, 241, 232, .62);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(54, 35, 17, .16);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.st-side-categories [aria-selected="true"] > span { width: 36px; color: #241b15; font-weight: 800; }
.st-side-categories.is-visible { visibility: visible; transition-delay: 0s; }
.st-side-categories.is-visible button { opacity: 1; transform: none; pointer-events: auto; transition-delay: calc(var(--side-order) * 35ms); }
.st-side-categories button:focus-visible { outline: none; }
.st-side-categories button:focus-visible > span { outline: 2px solid #241b15; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .st-side-categories, .st-side-categories button, .st-side-categories button > span { transition: none; } }

/* ── board: holds one section; on a switch its files are swept aside and the next laid down ── */
/* a frameless cork board with rounded, cut corners: its top (.st-pin) carries the memo,
   the rest holds the files laid on it */
.st-drawer {
  --index-w: clamp(54px, 14.5vw, 66px);
  position: relative;
  margin: 0 8px;
  overflow-anchor: none;
}
.st-drawer::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 32px 0 0;
  border-radius: 18px;
  background: var(--cork-dark), var(--cork-light), linear-gradient(115deg, rgba(255, 232, 193, .05), transparent 45%, rgba(70, 40, 15, .02)), var(--cork-base);
  box-shadow: inset 1px 0 0 rgba(255, 236, 205, .35), inset -2px 0 3px rgba(70, 40, 15, .12), inset 0 -8px 16px rgba(70, 40, 15, .08), 0 3px 0 #9c7955, 1px 5px 1px #735337, 2px 12px 18px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.st-board {
  position: relative;
  z-index: 2; /* lifted file tabs paint above the cork header rather than disappearing behind it */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top));
  padding-bottom: 22px;
  border-radius: 0 0 18px 18px;
}
.st-group[hidden] { display: none; }
.st-board.is-switching { overflow: clip; overflow-clip-margin: 8px; }
.st-group { padding-top: 0; }

.st-files { margin: 0 16px; padding: var(--tab-h) 0 0; list-style: none; }

.st-file { position: relative; height: var(--sheet-h); }
.st-file + .st-file { margin-top: calc(var(--peek) - var(--sheet-h)); }
.st-file-hit { display: block; position: relative; isolation: isolate; width: 100%; height: 100%; text-align: left; color: inherit; }
.st-file { --ink-on: var(--ink); --ink-soft: rgba(36, 27, 21, .62); }
.st-file.is-dark { --ink-on: #f3ede2; --ink-soft: rgba(243, 237, 226, .66); }

/* Each documented look has its own paper tab just above the folder's front lip. */
.st-file-inserts { position: absolute; z-index: 1; inset: 0 14px 5px; pointer-events: none; }
.st-file-insert { position: absolute; inset: 0; background: var(--paper-surface), var(--insert-paper); }
.st-file-insert::before, .st-folder-page::before, .st-folder-sheet::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(var(--look-slot) - min(54px, calc(100% / var(--look-count) - 10px)) / 2);
  width: min(54px, calc(100% / var(--look-count) - 10px));
  height: 7px;
  border-radius: 3px 3px 0 0;
  background: var(--paper-surface), var(--insert-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 -1px 2px rgba(36, 27, 21, .2);
}

/* file tab: steps across the drawer, five positions, like the reference's cascade.
   The steps spread over the sheet's flat top edge only (one corner radius in from each
   side), each tab shifted by its own width, so no tab ever sits over a rounded corner. */
.st-tab {
  position: absolute;
  bottom: 100%;
  left: calc(var(--folder-radius) + (100% - 2 * var(--folder-radius)) * var(--step) / 4);
  transform: translateX(calc(var(--step) * -25%));
  display: flex;
  height: var(--tab-h);
  filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .18));
}
.st-tab .sh { width: 12px; height: 100%; flex: none; fill: var(--paper); margin-right: -1px; }
.st-tab .sh.r { transform: scaleX(-1); margin: 0 0 0 -1px; }
.st-tab-label {
  display: flex;
  align-items: center;
  padding: 1px 8px 0;
  background: var(--stock-fiber), linear-gradient(rgba(255, 253, 240, .1), transparent 65%), var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 253, 240, .3);
  font: 400 9.5px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-on);
  white-space: nowrap;
}
.st-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 44%;
  gap: 12px;
  padding: 11px 0 12px 14px;
  border-radius: var(--folder-radius);
  background: var(--paper-surface), var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 253, 240, .4), inset 1px 0 0 rgba(255, 253, 240, .16), inset -1px 0 0 rgba(36, 27, 21, .16), inset 0 -1px 0 rgba(36, 27, 21, .22), 0 -1px 2px rgba(36, 27, 21, .22), 1px -5px 9px rgba(36, 27, 21, .15);
  color: var(--ink-on);
}
/* Two scored folds and a turned lower lip are part of the folder, not extra controls. */
.st-sheet::after {
  content: "";
  position: absolute;
  inset: auto 1px 9px;
  height: 7px;
  border-top: 1px solid rgba(36, 27, 21, .14);
  border-bottom: 1px solid rgba(255, 253, 240, .18);
  box-shadow: 0 -1px 0 rgba(255, 253, 240, .12), 0 1px 0 rgba(36, 27, 21, .08);
  pointer-events: none;
}
.st-file-text { display: flex; flex-direction: column; min-width: 0; text-shadow: 0 .5px rgba(255, 253, 240, .12); }
.st-file-name { font: 25px/.95 var(--display); letter-spacing: .03em; }
.st-file-ko { margin-top: 5px; font-size: 11px; color: var(--ink-soft); }
/* an open-able file says so on its tab, the one part of a file that is never covered */
.st-tab-label b { margin-left: 6px; padding-bottom: 1px; border-bottom: 1px solid currentColor; font-weight: 700; }
.st-file-img {
  position: relative;
  min-height: 0;
  margin: 2px 12px 0 0;
  padding: 4px 4px 12px;
  background: linear-gradient(125deg, #fffdf6, #e9e5da);
  box-shadow: 0 .5px 1px rgba(36, 27, 21, .3), 2px 4px 4px rgba(36, 27, 21, .22);
  transform: rotate(var(--photo-angle, 1.2deg));
}
.st-file:nth-child(3n + 2) { --photo-angle: -1.1deg; --tape-left: calc(100% - 48px); --tape-angle: 12deg; }
.st-file:nth-child(3n) { --photo-angle: .5deg; --tape-left: 14px; --tape-angle: -5deg; }
.st-file-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(.96); }
/* A small strip of translucent, torn tape fastens the print to its folder. */
.st-file-img::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -5px;
  left: var(--tape-left, 9px);
  width: 43px;
  height: 15px;
  transform: rotate(var(--tape-angle, -9deg));
  background: var(--stock-fiber), linear-gradient(176deg, rgba(255, 250, 225, .5), rgba(220, 204, 159, .36) 45%, rgba(255, 250, 225, .55));
  border-block: 1px solid rgba(255, 253, 234, .32);
  box-shadow: 0 1px 1px rgba(36, 27, 21, .12);
  clip-path: polygon(2% 0, 98% 1%, 96% 16%, 100% 32%, 97% 50%, 100% 72%, 96% 100%, 0 98%, 3% 78%, 0 57%, 3% 34%, 0 14%);
  pointer-events: none;
}
.has-doc .st-file-hit { cursor: pointer; }
.has-doc .st-file-hit:focus-visible { outline: none; }
.has-doc .st-file-hit:focus-visible .st-tab-label { text-decoration: underline; text-underline-offset: 3px; }
.st-file-hit { transition: transform .35s var(--ease); }
/* Lift only under a real pointer: on a phone, :active fires as soon as a finger lands to
   scroll, which made files jump. A tap opens the file, and that motion is the feedback. */
@media (hover: hover) and (pointer: fine) {
  .has-doc .st-file-hit:hover, .has-doc .st-file-hit:active { transform: translateY(-6px); }
}
.st-file.is-extracted > .st-file-hit { visibility: hidden; }
/* The returning file shares its original stack level, so later files cover it during insertion. */
.st-file.is-inserting { isolation: isolate; }
.st-file.is-inserting > .st-extract {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  filter: none;
}
.st-extract-scrim {
  position: fixed;
  inset: 0;
  z-index: 14;
  width: min(100%, var(--page-width, 430px));
  margin: 0 auto;
  background: rgba(20, 15, 10, .22);
  /* Blur the whole archive behind the extracted file, including the header. */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.st-extract-scrim[hidden] { display: none; }
.st-file-stage {
  position: fixed;
  inset: 0;
  z-index: 15;
  width: min(100%, var(--page-width, 430px));
  margin: 0 auto;
  clip-path: inset(0);
  pointer-events: none;
}
.st-extract {
  position: fixed;
  z-index: 16;
  transform-origin: 50% 100%;
  pointer-events: none;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .3));
}
.st-extract .st-file { height: 100%; margin: 0; list-style: none; }
.st-extract .st-file-hit { transform: none !important; transition: none; }
/* The opened folder keeps the same cover and the same number of look sheets. */
.st-folder > div { position: absolute; inset: 0; }
.st-folder-back .st-file, .st-folder-front .st-file { height: 100%; margin: 0; list-style: none; }
.st-folder-back .st-sheet { filter: brightness(.94); }
.st-folder-back :is(.st-file-text, .st-file-img) { visibility: hidden; }
.st-folder-front { transform-origin: 50% 100%; }
.st-folder-front .st-tab { visibility: hidden; }
.st-folder-shade { position: absolute; inset: 0; border-radius: var(--folder-radius); background: linear-gradient(rgba(255, 255, 255, .16), rgba(20, 12, 6, .3)); opacity: 0; pointer-events: none; }
.st-folder > :is(.st-folder-sheet, .st-folder-page) {
  position: absolute;
  inset: 0 14px 5px;
  display: grid;
  grid-template-columns: 1fr 44%;
  gap: 12px;
  align-items: start;
  padding: 14px 10px 10px 12px;
  border-radius: 0;
  background: var(--paper-surface), var(--insert-paper);
  color: #6f6155;
  transform-origin: 50% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 5px rgba(36, 27, 21, .14);
}
.st-folder-sheet-brand { padding-top: 2px; }
.st-folder-sheet-brand img { width: 100%; max-width: 120px; height: auto; }
.st-folder-sheet-brand small { display: block; margin-top: 12px; }
.st-folder-sheet-photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 30%; }
.st-folder-sheet small { font: 400 9px/1 var(--mono); letter-spacing: .12em; }

/* ── opened file: a look sheet the width of the page, over everything but the nav ── */
.st-open {
  pointer-events: auto;
  position: fixed;
  top: var(--sheet-top);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 15;
  width: min(calc(100% - 16px), calc(var(--page-width, 430px) - 16px));
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0;
  background: var(--paper-surface), var(--doc);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .7), inset -1px 0 rgba(84, 64, 44, .18), 1px -1px 0 #d7cdbd, 2px -3px 0 #ece5d8, 3px -4px 1px #b1a28c, 0 -4px 24px rgba(21, 15, 10, .28);
  color: var(--ink);
  transform-origin: 0 0;
}
.st-open[hidden] { display: none; }
.st-doc { container-type: inline-size; padding-bottom: 24px; }
.st-open-nav {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 50%;
  z-index: 17;
  width: min(100%, var(--page-width, 430px));
  height: 58px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: transparent;
  font: 400 10px/1 var(--mono);
  letter-spacing: .07em;
  color: var(--cream);
}
.st-open-nav[hidden] { display: none; }
.st-back { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; letter-spacing: .06em; white-space: nowrap; }
.st-back i { font-size: 15px; }
.st-back:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
.st-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 26px 16px 28px; color: var(--ink); }
.st-doc-head > div { width: 58%; }
.st-doc-head h2 { width: 100%; }
.st-doc-head h2 img { width: 100%; height: auto; }
.st-doc-label { margin-top: 12px !important; font-size: 10.5px; line-height: 1; color: #7b7063; }
.st-doc-number { font: 300 clamp(36px, 12cqw, 58px)/.95 var(--text); letter-spacing: -.055em; }
.st-doc-body { color: var(--ink); }

/* The brand's intro, then the look cards to swipe through, then the selected look's product codes. */
.st-intro { padding: 0 16px 30px; }
.st-intro p { font: 400 11.5px/1.75 var(--text); letter-spacing: -.01em; word-break: keep-all; color: #3d3229; }
.st-intro p + p { margin-top: 1.1em !important; }
.st-photos {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.st-photos::-webkit-scrollbar { display: none; }
.st-photos:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* one full-bleed card per look; the next one shows at the edge */
.st-photos figure { position: relative; flex: 0 0 calc(100% - 40px); overflow: hidden; background: #d8d0c2; scroll-snap-align: start; scroll-snap-stop: always; }
.st-photos figure:not(.is-on) { cursor: pointer; }
.st-photos img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.st-photos figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 18px 22px; background: linear-gradient(rgba(20, 14, 10, .16), transparent 18%, transparent 68%, rgba(20, 14, 10, .5)); color: #fbf8f2; pointer-events: none; }
.st-card-no { font: 400 14px/1 var(--mono); letter-spacing: .14em; }
.st-card-meta { max-width: calc(100% - 56px); font: 400 22px/1 var(--mono); letter-spacing: .12em; }
.st-card-go { position: absolute; right: 16px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(251, 248, 242, .75); border-radius: 50%; color: #fbf8f2; transition: transform .2s var(--ease), background-color .2s ease; }
.st-card-go i { font: 400 17px/1 var(--text); }
.st-card-go:active { transform: scale(.92); }
.st-card-go:focus-visible { outline: 2px solid #fbf8f2; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .st-card-go:hover { background: rgba(251, 248, 242, .16); } }

.st-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 26px 16px 0; }
.st-look-title { font: 300 clamp(27px, 8.5cqw, 36px)/1 var(--text); letter-spacing: -.04em; }

.st-items { width: calc(100% - 32px); margin: 18px 16px 0; border-collapse: collapse; }
.st-items tr { border-bottom: 1px solid var(--rule); }
.st-items tr:first-child { border-top: 1px solid rgba(36, 27, 21, .6); }
.st-items th { width: 56px; padding: 10px 0; text-align: left; font: 400 9.5px/1 var(--mono); letter-spacing: .04em; color: #6f6155; }
.st-items td { padding: 10px 0; font: 400 clamp(9px, 2.7cqw, 11px)/1 var(--mono); letter-spacing: .01em; }

/* Typeface roles: uppercase labels / lowercase English / Korean and product codes. */
.st-look-title { font-family: var(--lower); font-weight: 400; }
.st-look-title { font-size: clamp(31px, 9cqw, 40px); }
.st-doc-number { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
.st-items td { font-family: var(--text); }

/* Overseas brand file (client 11/04): the chosen editorial concept's order in the domestic file's
   theme. Same header, paper and type roles as TIME; thin rules part the photos from the text. */
.st-brand-doc .st-doc-head h2 img { width: auto; max-width: 100%; max-height: 88px; }
.st-brand-photo { margin: 0 16px; background: #d8d0c2; }
.st-brand-photo img { display: block; width: 100%; height: auto; }
.st-brand-photo.is-inset { width: calc(72% - 16px); margin: 0 16px 0 auto; }
.st-brand-doc .st-intro { margin: 22px 16px 0; padding: 16px 0 30px; border-top: 1px solid rgba(36, 27, 21, .55); }
.st-brand-doc .st-intro:last-child { padding-bottom: 12px; }

/* Domestic files (review #26): tall logos are held to the header's height; a brand without a
   logo file (TIME HOMME for now) sets its name in the uppercase display face. */
.st-doc-head h2 img { width: auto; max-width: 100%; max-height: 64px; }
.st-doc-wordmark { display: block; font: 400 clamp(34px, 11cqw, 48px)/.9 var(--display); letter-spacing: .01em; }
.st-folder-wordmark { display: block; font: 400 18px/1 var(--display); letter-spacing: .04em; }