/* Stitch with Noor: base, bar, cover, buttons and forms */
:root {
  /* Brand: brown, cream and ink blue (docs/COPY.md). Red lives only on the cover star (her lips and her bow). */
  --paper: #F4ECDF;   /* oat, the page */
  --cream: #FAF4E9;   /* cream, raised surfaces */
  --linen: #EDE3D2;   /* linen, photo tiles and fallbacks */
  --ink: #2A1D14;     /* dark brown text */
  --muted: #6B5849;   /* muted brown */
  --mocha: #4B2E1F;
  --hair: #E2D4BD;    /* hairline */
  --blue: #24396B;    /* ink blue, the second color: masthead, wordmark, links, numerals, one button */
  --blue-deep: #1A2A52;
  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(16px, 2.4vw, 36px);
  --bar: 46px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; font-synthesis: none;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* roman only, everywhere */
*, em, i, cite, blockquote, address, dfn, var { font-style: normal !important; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 14px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* the honeypot: off screen for people, still in the form for bots */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* paper grain, very light */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .5; mix-blend-mode: multiply;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.display {
  font-family: var(--serif); font-weight: 600; font-variation-settings: 'opsz' 20;
  font-size: clamp(48px, 8.4vw, 148px); line-height: .9; letter-spacing: -.035em;
}

/* ---------------- top bar ---------------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 var(--gut); background: var(--paper); border-bottom: 1px solid var(--ink);
}
.bar__brand { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: -.01em; text-decoration: none; font-variation-settings: 'opsz' 24; white-space: nowrap; }
.noor { color: var(--blue); }
.bar__nav { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.bar__nav a, .bar__menu {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; font-variation-settings: 'wdth' 88; white-space: nowrap;
}
.bar__nav a { position: relative; padding: 4px 0; }
.bar__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.bar__nav a:hover::after, .bar__nav a.is-here::after { transform: scaleX(1); }
.bar__menu { display: none; background: none; border: 1px solid currentColor; padding: 6px 12px; border-radius: 0; }

.contents { position: fixed; inset: 0; z-index: 49; background: var(--mocha); color: var(--cream); padding: calc(var(--bar) + 24px) var(--gut) 32px; overflow: auto; }
.contents__title { font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.03em; margin-bottom: 18px; font-variation-settings: 'opsz' 96; }
.contents__list li { border-top: 1px solid rgba(250, 244, 233, .25); }
.contents__list a { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; text-decoration: none; font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.1; }
.contents__list .pg { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--hair); min-width: 26px; }

@media (max-width: 960px) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-block; }
}

/* ---------------- cover ---------------- */
.cover {
  position: relative; padding: calc(var(--bar) + 10px) var(--gut) 28px;
  display: grid; grid-template-columns: 1fr; grid-template-areas: 'issue' 'mast' 'stage' 'foot';
  overflow: hidden;
}
.masthead {
  grid-area: mast; position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 900; font-variation-settings: 'opsz' 96;
  font-size: 29.6vw; line-height: .78; letter-spacing: -.045em; text-align: center; white-space: nowrap;
  margin: .06em 0 0; color: var(--blue); user-select: none;
}
.masthead span { display: inline-block; }
.cover__issue {
  grid-area: issue; color: var(--blue);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: 'wdth' 88;
  padding: 8px 0 10px; border-bottom: 1px solid var(--ink); margin: 4px 0 0; position: relative; z-index: 1;
}

.cover__stage {
  grid-area: stage; position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 40vw) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 40px);
  align-items: end; margin-top: clamp(14px, 2vw, 30px);
}
.cover__frame { position: absolute; z-index: -1; left: -17%; right: -17%; top: 46%; bottom: -6%; background: var(--mocha); }
.cover__star { grid-column: 2; grid-row: 1; position: relative; z-index: 2; width: 100%; margin-top: calc(-1 * clamp(80px, 17vw, 290px)); filter: drop-shadow(0 18px 24px rgba(42, 29, 20, .3)); }
.cover__star svg { display: block; width: 100%; height: auto; }
.lines { position: relative; z-index: 3; display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 34px); padding-bottom: clamp(10px, 3vw, 48px); }
.lines--left { grid-column: 1; grid-row: 1; }
.lines--right { grid-column: 3; grid-row: 1; text-align: right; align-self: center; }
.lines a { display: block; text-decoration: none; max-width: 300px; }
.lines--right a { margin-left: auto; }
.lines b {
  display: block; font-family: var(--sans); font-weight: 800; font-variation-settings: 'wdth' 70; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 40px); line-height: .92; letter-spacing: -.01em;
}
.lines--left li:first-child b { font-size: clamp(30px, 3.6vw, 58px); }
.lines span { display: block; margin-top: 6px; font-family: var(--serif); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.22; font-variation-settings: 'opsz' 18; }
.lines a:hover b, .lines a:focus-visible b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--blue); }
.line--app b { display: inline-block; background: var(--ink); color: var(--cream); padding: 4px 10px 2px; }

.cover__foot { grid-area: foot; display: flex; justify-content: flex-start; align-items: end; margin-top: 18px; position: relative; z-index: 3; }
.barcode { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; background: var(--cream); padding: 6px 8px 4px; border: 1px solid var(--ink); }
.barcode svg { width: 120px; height: 36px; display: block; }
.barcode span { font-size: 10px; letter-spacing: .14em; text-align: center; font-weight: 600; }

/* load sequence */
.js .masthead span { transform: translateY(40%); opacity: 0; }
.js.ready .masthead span { transform: none; opacity: 1; transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity .8s; }
.js.ready .masthead span:nth-child(2) { transition-delay: .07s; }
.js.ready .masthead span:nth-child(3) { transition-delay: .14s; }
.js.ready .masthead span:nth-child(4) { transition-delay: .21s; }
.js .lines li, .js .cover__frame { opacity: 0; }
.js .cover__frame { transform: scaleY(0); transform-origin: bottom; }
.js.ready .cover__frame { opacity: 1; transform: scaleY(1); transition: transform .9s .25s cubic-bezier(.7, 0, .2, 1), opacity .2s .25s; }
.js.ready .lines li { opacity: 1; transition: opacity .6s; }
.js.ready .lines--left li:nth-child(1) { transition-delay: .6s; }
.js.ready .lines--left li:nth-child(2) { transition-delay: .72s; }
.js.ready .lines--right li:nth-child(1) { transition-delay: .84s; }
.js.ready .lines--right li:nth-child(2) { transition-delay: .96s; }

@media (max-width: 860px) {
  .cover { padding-bottom: 20px; }
  .masthead { font-size: 30vw; }
  .cover__issue { font-size: 10.5px; }
  .cover__stage { grid-template-columns: 1fr; margin-top: 0; gap: 0; }
  .cover__star { grid-column: 1; grid-row: 1; width: 88%; margin: -14vw auto 0; }
  .cover__frame { left: -7%; right: -7%; top: 42%; bottom: -5%; }
  .lines--left, .lines--right { grid-column: 1; grid-row: auto; text-align: left; align-self: start; }
  .lines { padding: 0; gap: 18px; }
  .lines--left { margin-top: 26px; }
  .lines--right { margin-top: 18px; }
  .lines--right a { margin-left: 0; }
  .lines a { max-width: none; border-top: 1px solid var(--ink); padding-top: 12px; }
  .lines b { font-size: 26px; }
  .lines--left li:first-child b { font-size: 34px; }
  .cover__foot { margin-top: 26px; }
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-variation-settings: 'wdth' 90;
  padding: 18px 26px; border: 1px solid currentColor; border-radius: 0; transition: background .2s, color .2s, border-color .2s;
}
.btn::after { content: ''; width: 22px; height: 1px; background: currentColor; transition: width .25s; }
.btn:hover::after { width: 36px; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn--paper { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--paper:hover { background: var(--hair); border-color: var(--hair); }
.btn--ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--ink:hover { background: var(--mocha); border-color: var(--mocha); }
/* the one blue button style: the shop */
.btn--blue { background: var(--blue); color: var(--cream); border-color: var(--blue); }
.btn--blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

/* ---------------- one-field email forms ---------------- */
.mini { margin-top: 16px; max-width: 460px; }
.mini__row { display: flex; flex-wrap: wrap; border: 1px solid var(--ink); background: var(--cream); }
.mini input { flex: 1 1 180px; min-width: 0; border: 0; background: transparent; padding: 15px 16px; font-size: 16px; outline-offset: -3px; }
.mini input::placeholder { color: var(--muted); opacity: 1; }
.mini button { border: 0; background: var(--ink); color: var(--cream); padding: 15px 22px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-variation-settings: 'wdth' 90; }
.mini button:hover { background: var(--mocha); }
.mini button:disabled { opacity: .6; cursor: progress; }
.mini.is-err .mini__row { border-color: var(--mocha); box-shadow: inset 0 0 0 1px var(--mocha); }
.mini__msg { font-size: 14px; line-height: 1.4; }
.mini__msg:not(:empty) { margin-top: 10px; }
.mini.is-err .mini__msg { color: var(--mocha); font-weight: 700; }
.mini.is-done .mini__row { display: none; }
.mini.is-done .mini__msg { margin-top: 0; padding: 14px 16px; background: var(--mocha); color: var(--cream); font-family: var(--serif); font-size: 19px; font-weight: 600; }