/* The Polk Farody Collection. One page, no script.
   Two grounds: sand (the page) and dusk (the cover, the story, the footer).
   One accent: amber, which is the sun in Fig. 1 and Stitchit's amber. */

:root {
  --sand: #e7dcc8;
  --sand-ink: #2a2622;
  --sand-muted: #5e554b;
  --dusk: #1c222c;
  --dusk-ink: #ece6da;
  --dusk-soft: #d4cdbf;
  --dusk-muted: #a7a39b;
  --amber: #d9a55a;
  --amber-deep: #8a5a14;
  --rust: #a8381a;
  --kraft: #ece0c6;
  --kraft-ink: #3b2d1e;
  --stitch-dark: #17130f;
  --stitch-ink: #ece4d8;
  --display: Fraunces, Georgia, serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --type: "Special Elite", "Courier New", monospace;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sand);
  color: var(--sand-ink);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rust); }
a:hover { color: #7c2812; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Shared type */
.eyebrow {
  margin: 0;
  font-family: var(--type);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow--sand { color: var(--amber-deep); }
h2.section {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
h2.section em { font-style: italic; font-weight: 400; color: var(--amber); }
h2.section--sand em { color: var(--amber-deep); }

/* The cover */
.cover { background: var(--dusk); color: var(--dusk-ink); padding: 64px 0 56px; }
/* The bar: sticky, the small lockup and the menu. Where the browser can
   drive an animation from scroll, the lockup stays hidden while the big one
   on the cover is in view and fades in as it leaves; elsewhere it is simply
   always there. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--dusk); color: var(--dusk-ink);
}
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 60px; }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.brand em { font-style: italic; font-weight: 400; color: var(--amber); margin-left: 0.22em; }
.brand-mark { display: block; width: 32px; height: 32px; }
@supports (animation-timeline: scroll()) {
  body { timeline-scope: --hero; }
  .cover-lockup { view-timeline-name: --hero; }
  .brand { animation: brand-in linear both; animation-timeline: --hero; animation-range: exit 20% exit 100%; }
}
@keyframes brand-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
[id] { scroll-margin-top: 72px; }
.nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-right: -10px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.nav a { color: inherit; text-decoration: none; padding: 14px 10px; }
.nav a:hover { color: var(--amber); }

.cover-lockup { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); margin-top: 28px; }
.cover-mark { flex: 0 0 auto; width: clamp(104px, 14.6vw, 212px); height: auto; }
.cover h1 {
  margin: 0; min-width: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(56px, 7.3vw, 106px); line-height: 1.04; letter-spacing: -0.025em;
}
.cover h1 em { font-style: italic; font-weight: 400; color: var(--amber); }
.cover-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 36px 64px; margin-top: 44px; }
.lede { flex: 1.5 1 480px; min-width: 0; margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: var(--dusk-soft); max-width: 28em; }

.label {
  flex: 0 1 380px; min-width: 0;
  background: var(--kraft) url(img/paper-kraft.jpg) repeat; background-size: 1400px auto;
  color: var(--kraft-ink); padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 24px 48px rgba(0, 0, 0, 0.35);
}
.label dl {
  margin: 0; border: 2px dashed var(--amber); padding: 22px 24px;
  font-family: var(--type); font-size: 14px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 12px;
}
.label div { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.label dt { flex: 0 0 120px; color: var(--rust); letter-spacing: 0.08em; text-transform: uppercase; }
.label dd { margin: 0; flex: 1 1 140px; }

.contents {
  margin-top: 72px; border-top: 1px dashed rgba(217, 165, 90, 0.5); padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 8px 36px;
  font-family: var(--type); font-size: 14px; letter-spacing: 0.06em;
}
.contents a, .contents span { padding: 8px 0; }
.contents a { color: inherit; text-decoration: none; }
.contents a:hover { color: var(--amber); }
.contents .so-far { color: var(--amber); }
.contents .more { color: var(--dusk-muted); margin-left: auto; }

/* The items */
.item { display: flex; flex-wrap: wrap; gap: 32px 56px; padding: 72px 0; border-bottom: 2px dashed var(--amber); }
.item:last-child { border-bottom: 0; padding-bottom: 80px; }
.item-for { flex: 0 1 260px; min-width: 0; }
.for {
  margin: 0;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 3vw, 42px); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--amber-deep);
}
.spec { margin: 28px 0 0; font-family: var(--type); font-size: 13px; line-height: 1.5; color: var(--sand-muted); display: flex; flex-direction: column; gap: 10px; }
.spec dt { color: var(--amber-deep); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.spec dd { margin: 2px 0 0; }
.item-body { flex: 1 1 560px; min-width: 0; }
.item h2 { margin: 28px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.01em; }
.item h2 em { font-style: italic; font-weight: 400; color: var(--amber-deep); }
.item p { margin: 14px 0 0; font-size: 18px; line-height: 1.65; color: var(--sand-muted); max-width: 36em; }
.item .go { margin-top: 18px; }
.go a { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(168, 56, 26, 0.5); padding-bottom: 2px; }

/* Each product shown in its own skin */
.window { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px rgba(28, 34, 44, 0.22); }
.window-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.window .mark { display: block; width: 28px; height: 28px; flex: 0 0 auto; }
.window .shot { display: block; width: 100%; height: 400px; object-fit: cover; object-position: left top; }
.window-url { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }

.window--stitchit { background: var(--stitch-dark); color: var(--stitch-ink); border: 1px solid rgba(217, 165, 90, 0.3); }
.window--stitchit .window-bar { border-bottom: 1px solid rgba(217, 165, 90, 0.18); }
.wordmark--stitchit { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 19px; }
.window--stitchit .window-url { color: var(--amber); }

.window--ontheroad { background: var(--kraft) url(img/paper-kraft.jpg) repeat; background-size: 1400px auto; color: var(--kraft-ink); border: 1px solid rgba(90, 60, 30, 0.25); }
.window--ontheroad .window-bar { background: #2b2420; color: #ece4d8; padding: 12px 18px; }
.window--ontheroad .mark { width: 26px; height: 26px; border-radius: 50%; }
.wordmark--ontheroad { font-family: Georgia, "Iowan Old Style", serif; font-weight: 700; font-size: 18px; }
.window--ontheroad .window-url { font-family: var(--type); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; color: #e9d8a6; }
.window--ontheroad .shot { object-position: center 30%; }

.podcast { display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: flex-start; }
.cover-art { display: block; flex: 0 1 220px; width: 220px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 40px rgba(28, 34, 44, 0.22); }
.podcast-text { flex: 1 1 300px; min-width: 0; }
.podcast-text h2 { margin-top: 0; }
.listen { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; }
.listen a { display: inline-block; border: 1px solid rgba(42, 38, 34, 0.3); border-radius: 999px; padding: 9px 14px; color: inherit; text-decoration: none; }
.listen a:hover { border-color: var(--rust); color: var(--rust); }

.reserved { border: 2px dashed rgba(138, 90, 20, 0.5); border-radius: 14px; padding: 36px 40px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; }
.reserved p { flex: 1 1 320px; min-width: 0; margin: 0; }
.stamp {
  flex: 0 0 auto;
  font-family: var(--type); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-deep); border: 1.5px solid rgba(138, 90, 20, 0.6); border-radius: 3px; padding: 8px 12px;
}

/* Provenance */
.provenance { background: var(--dusk); color: var(--dusk-ink); padding: 96px 0 88px; }
.prov-grid { display: flex; flex-wrap: wrap; gap: 48px 72px; }
.prov-head { flex: 1 1 300px; min-width: 0; }
.fig { margin: 40px 0 0; max-width: 360px; }
.fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.fig figcaption { margin: 10px 0 0; font-family: var(--type); font-size: 12px; line-height: 1.5; color: var(--dusk-muted); }
.prov-text { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; font-size: 19px; line-height: 1.7; color: var(--dusk-soft); max-width: 38em; }
.prov-text p { margin: 0; }
.prov-text blockquote { margin: 18px 0 0; padding: 24px 0 0; border-top: 1px dashed rgba(217, 165, 90, 0.4); }
.prov-text blockquote p { font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; color: var(--dusk-ink); }
.prov-text blockquote footer { margin-top: 10px; font-size: 14px; color: var(--dusk-muted); }

/* Conditions of entry */
.conditions { padding-top: 96px; padding-bottom: 24px; }
.conditions h2.section { max-width: 16em; }
.cond-grid { display: flex; flex-wrap: wrap; gap: 0 48px; margin-top: 40px; }
.cond { flex: 1 1 400px; min-width: 0; border-top: 2px dashed var(--amber); padding: 28px 0 36px; display: flex; gap: 20px; }
.cond .n { flex: 0 0 40px; font-family: var(--type); font-size: 15px; color: var(--amber-deep); padding-top: 8px; }
.cond h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.15; }
.cond p { margin: 10px 0 0; font-size: 17px; line-height: 1.65; color: var(--sand-muted); }

/* Hello */
.hello { background: var(--dusk); color: var(--dusk-ink); margin-top: 72px; padding: 88px 0 40px; }
.hello-grid { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.hello-text { flex: 1.3 1 460px; min-width: 0; }
.hello h2 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.05; }
.hello-text p { margin: 20px 0 0; font-size: 19px; line-height: 1.6; color: var(--dusk-soft); max-width: 30em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.button { display: inline-block; background: var(--amber); color: var(--dusk); text-decoration: none; font-weight: 600; font-size: 17px; padding: 15px 28px; border-radius: 999px; }
.button:hover { background: #eec584; color: var(--dusk); }
.email { font-family: var(--type); font-size: 14px; color: var(--dusk-muted); }
.colophon { flex: 1 1 300px; min-width: 0; font-size: 15px; line-height: 1.7; color: var(--dusk-muted); padding-top: 10px; }
.colophon p { margin: 12px 0 0; }
.colophon-name { margin: 0; color: var(--dusk-ink); font-family: var(--display); font-style: italic; font-size: 20px; }
.baseline {
  margin-top: 56px; border-top: 1px dashed rgba(217, 165, 90, 0.4); padding-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 13px; letter-spacing: 0.04em; color: var(--dusk-muted);
}
.baseline p { margin: 0; }
.baseline a { color: inherit; text-decoration: none; }
.baseline a:hover { color: var(--amber); }

/* Phones */
@media (max-width: 760px) {
  .nav a { padding: 12px 8px; }
  .cover { padding-top: 36px; }
  .topbar-row { min-height: 54px; }
  .brand { font-size: 17px; }
  .nav { display: none; }
  .cover-lockup { gap: 18px; margin-top: 22px; }
  .cover-mark { width: 84px; }
  .cover h1 { font-size: clamp(44px, 12vw, 72px); }
  .cover-grid { margin-top: 36px; gap: 36px; }
  .contents { margin-top: 48px; }
  .contents .more { margin-left: 0; }
  .item { padding: 56px 0; gap: 24px; }
  .item:last-child { padding-bottom: 56px; }
  .spec { margin-top: 18px; }
  .window .shot { height: 240px; }
  .window-url { display: none; }
  .reserved { padding: 28px 24px; }
  .provenance { padding: 64px 0; }
  .conditions { padding-top: 64px; }
  .cond { padding: 22px 0 28px; }
  .hello { padding: 64px 0 32px; }
}