/* Moth & Match: one stylesheet for every page. Mobile first. No JavaScript anywhere.
   Look: an antique curio shop's printed page. Aged cream paper, engraved-style capitals in dark ink,
   rust headings, fine gold rules and stars.
   Navigation: a ruled newspaper strip of section links (wide screens),
   a labelled "Menu" tab that opens a stack of paper tabs (narrow screens).
   Contrast on the cream page (#efe3c8): ink 12.9:1, muted ink 7.1:1, rust 6.4:1, gold text 6.1:1.
   Bright gold (#c9952f) is too pale for text on cream; it is used only for rules, stars and pips. */

/* Cormorant Garamond (SIL OFL 1.1, fonts/OFL-cormorant-garamond.txt), trimmed to the characters the site uses */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500-italic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --page: #efe3c8;
  --paper: #f7eedb;
  --paper-bar: #f4e9d1;
  --ink: #2a1d10;
  --ink-muted: #5c4529;
  --rule: rgba(42, 29, 16, 0.55);
  --rule-soft: rgba(42, 29, 16, 0.3);
  --rust: #8a3420;
  --oxblood: #7a2216;
  --oxblood-dark: #4e140b;
  --gold-text: #6b4e12;
  --gold: #c9952f;      /* decoration only */
  --cream: #f4e9d0;     /* text on oxblood */
  --mat: #1a130b;       /* dark picture mat */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --bar: 3.75rem; /* height of the sticky nav strip */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
[id] { scroll-margin-top: calc(var(--bar) + 1rem); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  background-color: var(--page);
  background-image:
    repeating-linear-gradient(90deg, rgba(92, 69, 41, 0.035) 0 1px, rgba(92, 69, 41, 0) 1px 7px),
    radial-gradient(ellipse 40% 22% at 6% 18%, rgba(128, 86, 34, 0.1) 0%, rgba(128, 86, 34, 0) 70%),
    radial-gradient(ellipse 35% 18% at 96% 64%, rgba(128, 86, 34, 0.09) 0%, rgba(128, 86, 34, 0) 70%),
    url("art/paper.webp");
  background-blend-mode: normal, normal, normal, multiply;
}

/* aged edges: a soft brown vignette fixed to the window */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(110, 72, 28, 0) 62%, rgba(110, 72, 28, 0.16) 100%);
  pointer-events: none;
  z-index: 0;
}

a { color: var(--rust); text-decoration-color: rgba(138, 52, 32, 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--oxblood-dark); }
a:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--oxblood); color: var(--cream); z-index: 50; }
.skip:focus { left: 0.5rem; top: 0.5rem; color: var(--cream); }

/* "current section" marker for the nav. Each section publishes a scroll timeline; a nav link
   wears the marker while its section crosses a thin band 60% down the screen (CSS scroll-driven
   animations). The band sits low enough that the last section, Write to us, still reaches it at the
   bottom of the page. Browsers without them fall back to marking the section you last jumped to. */
.page {
  position: relative;
  z-index: 1;
  timeline-scope: --t-books, --t-apps, --t-studio, --t-contact;
}
#books { view-timeline: --t-books block; }
#apps { view-timeline: --t-apps block; }
#studio { view-timeline: --t-studio block; }
#contact { view-timeline: --t-contact block; }
#books, #apps, #studio, #contact { view-timeline-inset: 60% 39.5%; }

@keyframes here {
  from, to { color: var(--rust); box-shadow: inset 0 -2px 0 var(--rust); }
}
@keyframes here-tab {
  from, to { background: #fffaf0; box-shadow: inset 6px 0 0 var(--rust), 0 10px 18px -8px rgba(60, 35, 10, 0.5); }
}
.nav-row a[href$="#books"], .menu-list a[href$="#books"] { animation-timeline: --t-books; }
.nav-row a[href$="#apps"], .menu-list a[href$="#apps"] { animation-timeline: --t-apps; }
.nav-row a[href$="#studio"], .menu-list a[href$="#studio"] { animation-timeline: --t-studio; }
.nav-row a[href$="#contact"], .menu-list a[href$="#contact"] { animation-timeline: --t-contact; }
.nav-row a[href^="#"]:not([href="#top"]) { animation-name: here; animation-duration: auto; animation-timing-function: linear; animation-range: cover; }
.menu-list a[href^="#"]:not([href="#nav"]) { animation-name: here-tab; animation-duration: auto; animation-timing-function: linear; animation-range: cover; }

.page:has(#books:target) a[href="#books"],
.page:has(#apps:target) a[href="#apps"],
.page:has(#studio:target) a[href="#studio"],
.page:has(#contact:target) a[href="#contact"] { color: var(--rust); box-shadow: inset 0 -2px 0 var(--rust); }

/* ornaments */
.orn { display: block; width: 13rem; max-width: 70%; height: 1.25rem; margin: 0 auto; color: var(--rust); }

/* masthead: an "edition strip" over the studio's name, newspaper style */
.masthead { max-width: 68rem; margin: 0 auto; padding: 1rem 1rem 1.1rem; text-align: center; }
.edition {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0.35rem 0;
  border-top: 4px double var(--rule-soft);
  border-bottom: 4px double var(--rule-soft);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.edition .pip { flex: none; width: 0.42rem; height: 0.42rem; background: var(--gold); transform: rotate(45deg); }
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 8.6vw, 4.9rem);
  line-height: 1.05;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.wordmark .amp { font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--rust); font-size: 1.12em; margin: 0 0.06em 0 -0.06em; }
.wordmark a { color: inherit; text-decoration: none; }

/* the nav strip: sticks to the top of the screen while you scroll */
.navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--paper-bar);
  background-image: url("art/paper.webp");
  background-blend-mode: multiply;
  border-top: 4px double var(--rule-soft);
  border-bottom: 4px double var(--rule-soft);
  box-shadow: 0 10px 18px -14px rgba(60, 35, 10, 0.45);
}

/* wide screens: one centred row of section links */
.nav-row { display: none; }

.nav-row a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.35rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.nav-row a:hover { color: var(--rust); }

/* narrow screens: the studio name on the left (back to the top), a labelled "Menu" tab on the right */
.nav-mobile { display: flex; align-items: center; justify-content: space-between; height: var(--bar); padding: 0 1rem; position: relative; }
.nav-name { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oxblood); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto; }
.menu-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  margin-bottom: -0.9rem;
  padding: 0.35rem 1.05rem 0.2rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  background: var(--oxblood);
  border: 1px solid var(--oxblood-dark);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 14px -6px rgba(60, 35, 10, 0.55), inset 0 0 0 2px rgba(244, 233, 208, 0.18);
}
.menu-tab::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); }
.menu-tab:hover, .menu-tab:focus-visible { color: #fff7e2; background: #8d2a1c; }
.menu-tab:focus-visible { outline-color: var(--ink); }
.nav-mobile:has(#menu:target) .menu-tab { background: var(--oxblood-dark); }

/* the open menu: a stack of large paper tabs. Opened by #menu becoming the target; choosing an
   item moves the target to its section, which closes the menu again. */
.menu-list {
  display: none;
  position: absolute;
  top: calc(100% + 1rem);
  right: 0.75rem;
  width: min(19rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-margin-top: calc(var(--bar) + 1rem);
}
.menu-list:target { display: block; }
.menu-list li + li { margin-top: 0.45rem; }
.menu-list li:nth-child(odd) { transform: rotate(-0.7deg); }
.menu-list li:nth-child(even) { transform: rotate(0.6deg) translateX(-0.35rem); }
.menu-list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.4rem 1.1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(92, 69, 41, 0.55);
  border-radius: 3px;
  box-shadow: 0 10px 18px -8px rgba(60, 35, 10, 0.5);
}
.menu-list a:hover { color: var(--oxblood-dark); background: #fffaf0; }
.menu-list .close a { justify-content: center; font-size: 1rem; color: var(--cream); background: var(--oxblood); border-color: var(--oxblood-dark); }
.menu-list .close a:hover { color: #fff7e2; background: #8d2a1c; }

/* hero: the emblem in front of faint printed sunrays */
.hero { position: relative; text-align: center; padding: 2.75rem 1rem 3.25rem; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: min(56rem, 180vw);
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(138, 52, 32, 0.075) 0deg 5deg, rgba(138, 52, 32, 0) 5deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 25%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(closest-side at 50% 42%, #000 25%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.emblem {
  position: relative;
  width: min(320px, 74vw);
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  outline: 1px solid var(--rule);
  outline-offset: 9px;
  filter: drop-shadow(0 16px 22px rgba(60, 35, 10, 0.35));
}
.tagline { position: relative; margin: 1rem auto 0; max-width: 34rem; text-wrap: balance; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.55rem; line-height: 1.35; color: var(--ink); }

/* the printed sheet: the work and the studio, on a slightly lighter insert */
.sheet {
  position: relative;
  max-width: 70rem;
  margin: 0 auto;
  padding: 2.5rem 1.1rem 0.5rem;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 100% 60%, rgba(128, 86, 34, 0.1) 0%, rgba(128, 86, 34, 0) 40%),
    radial-gradient(ellipse at 0% 85%, rgba(128, 86, 34, 0.12) 0%, rgba(128, 86, 34, 0) 38%),
    url("art/paper.webp");
  background-blend-mode: normal, normal, multiply;
  box-shadow: 0 24px 50px -28px rgba(60, 35, 10, 0.6), 0 0 0 1px rgba(92, 69, 41, 0.35);
}
.sheet::before { content: ""; position: absolute; inset: 0.6rem; border: 3px double rgba(92, 69, 41, 0.5); pointer-events: none; }
.sheet > * { position: relative; }

.sheet-head { text-align: center; margin-bottom: 1.75rem; }
.sheet-head h2 { margin: 0 0 0.6rem; font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1.05; letter-spacing: 0.02em; color: var(--oxblood); }

/* black label bar between double rules, like a newspaper section label */
.label-bar { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.75rem; }
.label-bar::before, .label-bar::after { content: ""; flex: 1; border-top: 3px double var(--rule); }
.label-bar span { padding: 0.2rem 0.95rem 0.15rem; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper); background: var(--ink); }

/* spacing lives inside each section (padding, not margin) so the nav marker never falls in a gap */
.feature--books { padding-bottom: 2.75rem; }
.feature--apps { padding-top: 2.5rem; padding-bottom: 3rem; border-top: 2px dotted rgba(42, 29, 16, 0.4); }
.feature-grid { display: grid; gap: 1.75rem; align-items: center; }

.frame { position: relative; margin: 0; padding: 0.6rem; background: var(--mat); border: 1px solid #6e5428; box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px rgba(92, 69, 41, 0.55), 0 22px 34px -18px rgba(60, 35, 10, 0.6); }
.frame img { width: 100%; }
.frame--label { max-width: 16rem; margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: 0 18px 28px -12px rgba(60, 35, 10, 0.55); transform: rotate(-1.4deg); }
.art { position: relative; max-width: 26rem; width: 100%; margin: 0 auto; }
.feature--books .art { margin-top: 6.25rem; } /* headroom for the Murkmare standing on the frame */
.peeker { position: absolute; top: -7.2rem; right: 1.2rem; width: 3.4rem; z-index: 2; filter: drop-shadow(0 5px 4px rgba(60, 35, 10, 0.35)); }

.feature-text h3 { margin: 0.2rem 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(2.3rem, 9vw, 3.2rem); line-height: 1.05; letter-spacing: 0.01em; color: var(--oxblood); }
.feature-text .sub { margin: 0.3rem 0 0.9rem; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.3; color: var(--ink-muted); }
.feature-text p { margin: 0 0 0.9rem; }
.feature-text .note { font-size: 0.98rem; font-style: italic; color: var(--ink-muted); }

.stamp {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.2rem 0.7rem 0.1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  border: 3px double var(--rust);
  border-radius: 3px;
  transform: rotate(-4deg);
  opacity: 0.88;
}
.tag { display: inline-block; margin: 0 0 0.3rem 0.6rem; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.1rem; }
.btn {
  display: inline-block;
  padding: 0.6rem 1.05rem 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  color: var(--cream);
  background: var(--oxblood);
  border: 1px solid var(--oxblood-dark);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(244, 233, 208, 0.22), 0 3px 0 var(--oxblood-dark);
}
.btn:hover { color: #fff7e2; background: #8d2a1c; }
.btn:focus-visible { outline-color: var(--ink); }
.also { margin: 0; font-size: 0.98rem; color: var(--ink-muted); }

/* the studio, inside the sheet */
.studio { padding: 2.5rem 0 2.5rem; border-top: 3px double var(--rule); }
.studio-text { max-width: 38rem; margin: 0 auto; }
.studio-text p { margin: 0 0 1.1rem; }
.studio-text .lede::first-letter { float: left; margin: 0.06em 0.1em 0 0; font-family: var(--display); font-weight: 600; font-size: 4em; line-height: 0.78; color: var(--rust); }

/* write to us: a calling card */
.section { padding: 3.5rem 1rem; }
.calling-card {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.9rem;
  text-align: center;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 30% 0%, rgba(255, 252, 240, 0.6) 0%, rgba(255, 252, 240, 0) 60%), url("art/paper.webp");
  background-blend-mode: normal, multiply;
  border: 1px solid rgba(92, 69, 41, 0.5);
  border-radius: 3px;
  box-shadow: 0 22px 40px -22px rgba(60, 35, 10, 0.65);
  transform: rotate(-0.8deg);
}
.calling-card::before { content: ""; position: absolute; inset: 0.55rem; border: 1px solid rgba(92, 69, 41, 0.45); pointer-events: none; }
.calling-card img { width: 3.6rem; margin: 0 auto 0.7rem; }
.calling-card h2 { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 600; font-size: 2.2rem; color: var(--oxblood); }
.calling-card p { margin: 0 0 0.5rem; }
.calling-card .email { font-size: clamp(1.1rem, 5vw, 1.4rem); overflow-wrap: anywhere; }
.calling-card .small { font-size: 0.95rem; color: var(--ink-muted); }

/* footer */
.footer { text-align: center; padding: 2rem 1rem 3rem; font-size: 0.95rem; color: var(--ink-muted); }
.footer p { margin: 0.4rem 0; }
.footer-seal { display: inline-block; margin: 1rem 0 0.5rem; border-radius: 50%; }
.footer-seal img { width: 3.25rem; height: 3.25rem; border-radius: 50%; box-shadow: 0 0 0 3px var(--page), 0 0 0 4px var(--rule-soft), 0 6px 12px rgba(60, 35, 10, 0.3); }

/* privacy page: the policy is a paper document */
.document {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.5rem;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 90% 100%, rgba(128, 86, 34, 0.12) 0%, rgba(128, 86, 34, 0) 50%), url("art/paper.webp");
  background-blend-mode: normal, multiply;
  border: 1px solid rgba(92, 69, 41, 0.5);
  border-radius: 3px;
  box-shadow: 0 24px 50px -28px rgba(60, 35, 10, 0.6);
}
.document::before { content: ""; position: absolute; inset: 0.55rem; border: 3px double rgba(92, 69, 41, 0.45); pointer-events: none; }
.document > * { position: relative; }
.document h1 { margin: 0 0 0.2rem; font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; color: var(--oxblood); }
.document .updated { margin: 0 0 1.5rem; font-style: italic; color: var(--ink-muted); }
.document h2 { margin: 1.8rem 0 0.5rem; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); }
.document p { margin: 0 0 1rem; }

@media (min-width: 46rem) {
  .masthead { padding: 1.25rem 2rem 1.4rem; }
  .edition { gap: 0.9rem; letter-spacing: 0.24em; }
  .hero { padding: 3.5rem 2rem 4rem; }
  .section { padding: 4.5rem 2rem; }
  .sheet { padding: 3.5rem 3rem 0.75rem; }
  .studio { padding-bottom: 3rem; }
  .feature-grid { grid-template-columns: 5fr 6fr; gap: 3rem; }
  .feature--apps .art { order: 2; }
  .feature--apps .feature-text { order: 1; }
  .calling-card { padding: 2.5rem 2.5rem 2.25rem; }
  .document { padding: 3rem 3.25rem 2.5rem; }
}

@media (min-width: 58rem) {
  :root { --bar: 3.4rem; }
  .nav-mobile { display: none; }
  .nav-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1.1rem;
    min-height: var(--bar);
    margin: 0;
    padding: 0 1rem;
    list-style: none;
  }
  /* small gold diamonds between neighbouring words */
  .nav-row li + li::before {
    content: "";
    display: inline-block;
    width: 0.38rem;
    height: 0.38rem;
    margin-right: 1.1rem;
    vertical-align: middle;
    background: var(--gold);
    transform: rotate(45deg);
  }
}

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