/* FantasyLab front door, craft v3. The house frame (walnut night, lamp, paper) now has its own voice: Sorts Mill Goudy,
   one family for everything the house says. It is Barry Schwartz's open revival of Goudy Oldstyle, the face Frederic
   Goudy drew in 1915 and later cut and cast himself at the Village Letter Foundery, his own small shop: type made by
   hand at one bench. Old-style figures by default, real small caps for every label (no tracked mono costume), the
   italic for the one word that matters. No mono on the house frame at all.
   The six products each keep their own face, from tiny name-only subsets (/shared/hub/marks/*.woff2, about 2 KB each).
   All SIL OFL 1.1. See /docs/CRAFT-V3.md. */
@font-face { font-family: "Goudy"; src: url("/shared/hub/fonts/goudy.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Goudy"; src: url("/shared/hub/fonts/goudy-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* metric-matched fallback: Georgia scaled to Goudy's width and line box, so the swap does not move anything */
@font-face { font-family: "Goudy Fallback"; src: local("Georgia"); size-adjust: 95.7%; ascent-override: 100.3%; descent-override: 50%; line-gap-override: 0%; }
@font-face { font-family: "Mark Studio"; src: url("/shared/hub/marks/studio.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Mark Spotless"; src: url("/shared/hub/marks/spotless.woff2") format("woff2"); font-weight: 800; font-display: block; }
@font-face { font-family: "Mark Aurora"; src: url("/shared/hub/marks/aurora.woff2") format("woff2"); font-weight: 800; font-display: block; }
@font-face { font-family: "Mark Counsel"; src: url("/shared/hub/marks/counsel.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Mark TrueRate"; src: url("/shared/hub/marks/true-rate.woff2") format("woff2"); font-weight: 800; font-display: block; }
@font-face { font-family: "Mark ListingLint"; src: url("/shared/hub/marks/listinglint.woff2") format("woff2"); font-weight: 640; font-display: block; }

body.hub {
  --accent: #ffb45e; --accent-2: #8c6a4a;
  --display: "Goudy", "Goudy Fallback", Georgia, serif; --text: var(--display); --mono: var(--display);
  font-size: 20px; line-height: 1.5; font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal; font-feature-settings: "liga" 1, "kern" 1;
}
/* every house label is set in Goudy's own small caps, not tracked mono capitals */
.hub .nav ul a, .hub .nav .menu-btn, .hub .btn, .hub .link, .hub .door .who, .hub .shelf .pf, .hub .plate-h .go a, .hub .foot .small {
  font-family: var(--display); font-weight: 400; text-transform: none; font-variant-caps: all-small-caps; font-variant-numeric: lining-nums;
}
.hub .nav ul a { font-size: 18px; letter-spacing: .07em; }
.hub .nav .menu-btn { font-size: 17px; letter-spacing: .07em; }
.hub .btn { font-size: 19px; letter-spacing: .07em; }
.hub .link { font-size: 19px; letter-spacing: .07em; }
.hub .wordmark { font-size: 27px; letter-spacing: -.005em; }
.hub h1, .hub h2, .hub h3 { letter-spacing: -.012em; }
.hub h1 { line-height: .96; }
.hub .lede { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; }
.hub .foot .products a { font-size: 27px; }
.hub .foot .products span { font-size: 16px; }
.hub .foot .small { font-size: 17px; letter-spacing: .05em; }
@media (max-width: 900px) { .hub .nav ul a { font: 400 34px/1.2 var(--display); font-variant-caps: normal; text-transform: none; letter-spacing: 0; } }
.band.paper, .foot, .skip { --accent-2: #6e4f32; }
.hub .wrap { max-width: 1240px; }

/* hero: who makes these, then the shelf */
.door { padding: clamp(120px, 13vw, 168px) 0 clamp(64px, 8vw, 112px); position: relative; overflow: clip; }
.door::before { /* the lamp */
  content: ""; position: absolute; left: 50%; top: -30%; width: 1100px; height: 900px; transform: translateX(-30%);
  background: radial-gradient(closest-side, rgba(255, 180, 94, .16), rgba(255, 180, 94, .05) 55%, transparent 75%); pointer-events: none;
}
.door .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; position: relative; }
.door h1 { font-size: clamp(52px, 7vw, 108px); margin-bottom: 26px; }
.door .who { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: 19px; line-height: 1.4; letter-spacing: .08em; color: var(--paper-dim); }
.door .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--ink-2); }
.door .lede { max-width: 50ch; }
.door .actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 32px; }

/* the shelf: six names, each in its own face */
.shelf { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.shelf li { border-bottom: 1px solid var(--rule); }
.shelf a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 14px 6px 13px; text-decoration: none; transition: background .3s var(--ease), padding .3s var(--ease); }
.shelf a:hover { background: rgba(255, 180, 94, .06); padding-left: 14px; color: inherit; }
.shelf .nm { font-size: clamp(34px, 3.6vw, 52px); line-height: 1; }
.shelf .ln { grid-column: 1; font-size: 17px; color: var(--paper-dim); }
.shelf .pf { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 16px; line-height: 1.25; letter-spacing: .06em; color: var(--paper-faint); text-align: right; }
.nm.studio { font-family: "Mark Studio", Georgia, serif; color: #ff8a6b; }
.nm.aurora { font-family: "Mark Aurora", sans-serif; font-weight: 800; letter-spacing: -.02em; color: #f5f8fc; }
.nm.aurora::after { content: ""; display: inline-block; width: .9em; height: .9em; margin: -.3em 0 0 .14em; vertical-align: -.06em; background: url("/aurora/brand/bear/head.svg") center / contain no-repeat; }
.nm.spotless { font-family: "Mark Spotless", sans-serif; font-weight: 800; color: #2ee6c8; }
.nm.counsel { font-family: "Mark Counsel", Georgia, serif; font-weight: 500; letter-spacing: -.02em; color: #e3cba4; }
.nm.truerate { font-family: "Mark TrueRate", Rockwell, serif; font-weight: 800; color: #f0a93b; }
.nm.listinglint { font-family: "Mark ListingLint", sans-serif; font-weight: 640; letter-spacing: -.01em; color: #eef1ec; text-decoration: underline; text-decoration-color: #d8352a; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 900px) { .door .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .shelf a { grid-template-columns: minmax(0, 1fr); } .shelf .pf { grid-column: 1; grid-row: auto; text-align: left; } }

/* the family: six plates, one frame */
.family .head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.family .head h2 { margin: 0; }
.family .head p { margin: 0; color: #4a4238; }
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); }
.plate-h { display: flex; flex-direction: column; }
.plate-h .art { position: relative; aspect-ratio: 4 / 3.4; border-radius: 4px; overflow: hidden; display: block; text-decoration: none; isolation: isolate; box-shadow: 0 30px 50px -36px rgba(40, 28, 14, .7); }
.plate-h .art:focus-visible { outline: 3px solid var(--ink-0); outline-offset: 4px; }
.plate-h .art .mk { position: absolute; left: 20px; top: 16px; z-index: 3; font-size: clamp(32px, 2.8vw, 42px); line-height: 1; }
.plate-h .txt { padding: 18px 2px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plate-h .txt p { margin: 0; color: #3b342c; font-size: 18px; line-height: 1.45; }
.plate-h .meta { font: italic 400 17px/1.4 var(--display); letter-spacing: 0; color: #6d6458; }
.plate-h .go { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: auto; padding-top: 4px; }
.plate-h .go a { font-size: 18px; line-height: 1; letter-spacing: .07em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; }
.plate-h .go a:hover { color: #6e4f32; }
.plate-h .art img { transition: transform .8s var(--ease); }
.plate-h .art:hover img { transform: scale(1.025); }

/* each plate's material */
.art.studio { background: #1d1611; }
.art.studio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.art.studio::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(20, 14, 10, .78), transparent 42%); }
.art.studio .mk { top: auto; bottom: 16px; }
.art.studio .mk { font-family: "Mark Studio", Georgia, serif; color: #ffd8cb; }

.art.aurora { background:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff 60%, transparent), radial-gradient(1px 1px at 42% 12%, #fff 60%, transparent),
    radial-gradient(1.5px 1.5px at 64% 30%, #dfe7ff 60%, transparent), radial-gradient(1px 1px at 86% 16%, #fff 60%, transparent),
    radial-gradient(1px 1px at 30% 44%, #dfe7ff 60%, transparent),
    linear-gradient(180deg, #0b1026 0%, #141c40 62%, #1d2752 100%); }
.art.aurora::before { /* the aurora: two soft ribbons in the app's mint and violet */
  content: ""; position: absolute; inset: -10% -20% 40%; z-index: 0;
  background: radial-gradient(60% 34% at 34% 58%, rgba(63, 214, 184, .42), transparent 70%), radial-gradient(52% 30% at 74% 40%, rgba(155, 123, 255, .36), transparent 72%);
  filter: blur(6px); transform: rotate(-8deg); }
.art.aurora .ridge { position: absolute; left: -10%; right: -10%; bottom: -34px; height: 30%; z-index: 1; background: linear-gradient(180deg, #f7faff, #d7e2f3); border-radius: 55% 45% 0 0 / 46px 38px 0 0; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .9); }
.art.aurora img { position: absolute; right: 4%; bottom: 7%; width: auto; height: 84%; z-index: 2; }
.art.aurora .mk { font-family: "Mark Aurora", sans-serif; font-weight: 800; letter-spacing: -.02em; color: #f5f8fc; }

.art.spotless { background: #0a0e17; }
.art.spotless::before { content: ""; position: absolute; right: -20%; top: -10%; width: 90%; height: 90%; background: radial-gradient(closest-side, rgba(46, 230, 200, .16), transparent 70%); }
.art.spotless .mk { font-family: "Mark Spotless", sans-serif; font-weight: 800; color: #2ee6c8; }
.art.spotless .sign { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%) rotate(-1.5deg); width: 70%; background: #f5f5f0; color: #0a6e57; border-radius: 9px; padding: 14px 16px 12px;
  box-shadow: inset 0 0 0 3px #f5f5f0, inset 0 0 0 5px #0a6e57, 0 20px 30px -16px #000; font: 700 15px/1.2 system-ui, sans-serif; }
.art.spotless .sign b { display: block; font: 800 34px/1 "Mark Spotless", sans-serif; }
.art.spotless .sign i { font-style: normal; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 700 26px/1 ui-monospace, monospace; color: #15181d; }
.art.spotless .sign span { font: 700 12px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.art.spotless .pole { position: absolute; left: 50%; top: 70%; bottom: 0; width: 8px; margin-left: -4px; background: linear-gradient(90deg, #4b5566, #8d97a6 45%, #3a4352); z-index: -1; }

.art.counsel { background: #0f1511; }
.art.counsel .mk { font-family: "Mark Counsel", Georgia, serif; font-weight: 500; letter-spacing: -.02em; color: #ece9df; }
.art.counsel .slip { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(1.6deg); width: 72%; background: #f8f5ec; color: #16211b; padding: 14px 16px 22px; font: 400 13px/1.55 ui-monospace, monospace;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; }
.art.counsel .slip div { display: flex; justify-content: space-between; gap: 8px; }
.art.counsel .slip .h { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #5f6b63; border-bottom: 1px dashed rgba(22, 33, 27, .35); padding-bottom: 6px; margin-bottom: 6px; }
.art.counsel .slip s { color: #5f6b63; text-decoration-color: #a3352a; text-decoration-thickness: 2px; }
.art.counsel .slip .t { border-top: 3px double rgba(22, 33, 27, .6); margin-top: 6px; padding-top: 6px; font-weight: 600; }

.art.truerate { background: #1c2741; }
.art.truerate .mk { font-family: "Mark TrueRate", Rockwell, serif; font-weight: 800; color: #f0a93b; }
.art.truerate img { position: absolute; left: 7%; right: 7%; bottom: 8%; width: 86%; height: auto; border-radius: 3px; box-shadow: 0 16px 30px -14px #000; transform: rotate(-1deg); }
.art.truerate .patch { position: absolute; left: 18px; top: 14px; width: 46%; height: auto; z-index: 3; transform: rotate(-2deg); box-shadow: none; right: auto; bottom: auto; border-radius: 0; }

.art.listinglint { box-shadow: none; background: #eef1ec; border: 1.5px solid #23262a; background-image: linear-gradient(rgba(11, 110, 153, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 110, 153, .08) 1px, transparent 1px); background-size: 16px 16px; }
.art.listinglint .mk { font-family: "Mark ListingLint", sans-serif; font-weight: 640; color: #23262a; display: flex; align-items: center; gap: 10px; }
.art.listinglint .mk img { width: 30px; height: 30px; position: static; }
.art.listinglint .shot { position: absolute; left: 18%; right: 18%; top: 26%; width: 64%; height: auto; border: 1.5px solid #23262a; transform: rotate(1.2deg); }
@media (max-width: 1000px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .family .head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .plates { grid-template-columns: minmax(0, 1fr); } }

/* how it's built */
.how .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.how .ruled > li { grid-template-columns: 56px minmax(0, 1fr); }
.how .ruled h3 { margin-bottom: 6px; }
.how .ruled p { margin: 0; color: var(--paper-dim); }
.how .bet { color: var(--paper-dim); margin-top: 22px; }
@media (max-width: 900px) { .how .grid { grid-template-columns: minmax(0, 1fr); } }

/* follow + write */
.follow .grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.links { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(15, 13, 11, .16); }
.links li { border-bottom: 1px solid rgba(15, 13, 11, .16); }
.links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; min-height: 44px; text-decoration: none; }
.links b { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--display); font-weight: 400; }
.links span { font: italic 400 17px/1.4 var(--display); color: #6d6458; }
.links a:hover b { color: #6e4f32; }
.write { margin-top: 30px; }
.write a { font: 400 clamp(26px, 2.6vw, 36px)/1.2 var(--display); }
@media (max-width: 900px) { .follow .grid { grid-template-columns: minmax(0, 1fr); } }

.hub .band.paper h2 em { color: #8c5a1e; }