:root {
  --espresso: #211610;
  --latte: #d2ac82;
  --walnut: #4a3226;
  --bark: #7a6150;
  --paper: #f4eee4;
  --moss: #a3ae7a; /* edition colour, 001 */
  --paper-soft: rgb(244 238 228 / .74);
  --line: rgb(122 97 80 / .55);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;

  --pad: clamp(1.25rem, 4.5vw, 4rem);
  --gap: clamp(4.5rem, 11vw, 10rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--bark) var(--espresso); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(70rem 50rem at 12% -8%, rgb(210 172 130 / .11), transparent 70%),
    var(--espresso);
  color: var(--paper);
  font: 400 1.0625rem/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--latte); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--latte); outline-offset: 4px; border-radius: 6px; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 92rem; margin-inline: auto; padding-inline: var(--pad); }
.accent { color: var(--latte); }

.ico { width: 1em; height: 1em; flex: none; transition: transform .35s var(--ease); }
a:hover .ico { transform: translate(.12em, -.12em); }

/* ---------- wordmark ---------- */
.wordmark {
  font: 800 2.25rem/1 var(--display);
  letter-spacing: -.06em;
  text-decoration: none;
  color: var(--paper);
}
.wordmark--sm { font-size: 1.75rem; }

/* ---------- small labels ---------- */
.coords, .foot__coords {
  font: 600 .75rem/1 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(244 238 228 / .5);
  font-variant-numeric: tabular-nums;
}
.top__link { display: inline-flex; align-items: center; gap: .35em; font: 700 1rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .95rem 1.4rem;
  border-radius: 999px;
  font: 700 1.0625rem/1 var(--display);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--latte); color: var(--espresso); }
.btn--primary:hover { background: var(--paper); }
.btn--dark { background: var(--espresso); color: var(--paper); }
.btn--dark:hover { background: var(--walnut); }
.btn--outline { border: 2px solid var(--espresso); color: var(--espresso); }
.btn--outline:hover { background: var(--espresso); color: var(--latte); }

/* ---------- hero: the latte cover ---------- */
.hero { padding: clamp(.6rem, 1.2vw, 1rem); }
.cover {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 2 * clamp(.6rem, 1.2vw, 1rem));
  display: grid; grid-template-rows: auto 1fr auto;
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--latte); color: var(--espresso);
  border-radius: 28px;
}
.cover .coords { color: var(--walnut); }
.cover__top { display: flex; justify-content: space-between; align-items: center; }
.cover .top__link:hover { color: var(--walnut); }

.biglock { display: grid; grid-template-columns: max-content; align-content: center; font-size: clamp(5rem, min(19vw, 36svh), 26rem); padding-block: 1.5rem; }
.biglock__word { font: 800 1em/.8 var(--display); letter-spacing: -.06em; padding-bottom: .16em; }
.biglock__rule { height: .042em; background: var(--espresso); border-radius: 1em; transform-origin: left; }
.biglock__city { font: 600 max(.07em, .8rem)/1 var(--body); letter-spacing: .42em; text-transform: uppercase; margin-top: .55em; }

.cover__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.75rem 3rem; }
.cover__copy { display: grid; gap: 1rem; }
.hero__title { font: 700 clamp(2rem, 3.4vw, 3.5rem)/1 var(--display); letter-spacing: -.04em; }
.hero__sub { font-size: clamp(1.0625rem, 1.25vw, 1.2rem); color: var(--walnut); font-weight: 500; max-width: 34ch; text-wrap: pretty; }


/* ---------- the stacked edition number ---------- */
.stack {
  --sx: 0px; --sy: 0px;
  display: grid;
  font: 800 1em/.82 var(--display);
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  user-select: none;
  padding: .1em .15em 0 0;
}
.stack .l { grid-area: 1 / 1; will-change: transform; }
.stack .l2 { transform: translate(var(--sx), var(--sy)); }
.stack .l3 { transform: translate(calc(var(--sx) * 2), calc(var(--sy) * 2)); }
.stack--dark { font-size: clamp(8rem, 19vw, 19rem); }
.stack--dark .l1 { color: var(--paper); text-shadow: -.04em .05em .09em rgb(12 7 4 / .6); }
.stack--dark .l2 { color: var(--moss); }
.stack--dark .l3 { color: var(--latte); }
/* ---------- next gathering (the one latte block) ---------- */
.next {
  padding-block: var(--gap);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 4vw, 4rem);
}
.next__visual { display: grid; gap: 1.5rem; justify-items: start; }
.next__series { font: 700 clamp(1.15rem, 1.6vw, 1.4rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--paper-soft); padding-left: .2rem; }
.block {
  background: var(--walnut);
  color: var(--paper);
  border-radius: 28px;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  display: grid;
  row-gap: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
}
.block__head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.block__title { font: 800 clamp(2.75rem, 5.4vw, 5rem)/.9 var(--display); letter-spacing: -.05em; }
.pill {
  display: inline-block;
  background: var(--latte); color: var(--espresso);
  border-radius: 999px;
  padding: .35rem .85rem .4rem;
  font: 800 1.25rem/1 var(--display);
  letter-spacing: -.02em;
}

.ruled { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2rem; max-width: 46rem; }
.ruled > div { border-top: 2px solid var(--latte); padding-top: .9rem; }
.ruled__wide { grid-column: 1 / -1; }
.ruled dt { font: 600 .75rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--latte); margin-bottom: .55rem; }
.ruled dd { font: 700 clamp(1.25rem, 2.1vw, 1.75rem)/1.15 var(--display); letter-spacing: -.03em; }
.ruled small { display: block; margin-top: .35rem; font: 500 1rem/1.4 var(--body); letter-spacing: 0; color: var(--paper-soft); }

.block__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 2rem;
  border-top: 1px solid rgb(244 238 228 / .18);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.block__foot p { font-size: 1.125rem; max-width: 44ch; color: var(--paper-soft); }

/* ---------- what outpost is ---------- */
.about { padding-bottom: var(--gap); }
.about__intro {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.about__title { font: 800 clamp(2.5rem, 5vw, 4.5rem)/.92 var(--display); letter-spacing: -.05em; }
.lead { font-size: clamp(1.2rem, 1.75vw, 1.5rem); line-height: 1.45; max-width: 38ch; text-wrap: pretty; }

.doing { border-top: 1px solid var(--line); }
.doing li {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 1rem 2rem;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.doing h3 { font: 800 clamp(2.5rem, 6.4vw, 6rem)/1 var(--display); letter-spacing: -.055em; }
.doing h3 b { color: var(--latte); }
.mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.mask > span { display: inline-block; }
.doing p { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--paper-soft); max-width: 30ch; }

.close {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem;
  margin-top: clamp(3.5rem, 8vw, 7rem);
}
.close__line { font: 700 clamp(1.9rem, 3.6vw, 3.25rem)/1.05 var(--display); letter-spacing: -.04em; max-width: 19ch; text-wrap: balance; }

/* ---------- footer ---------- */
.foot { padding-bottom: 2rem; }
.foot__main {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.lockup { display: inline-grid; text-decoration: none; }
.lockup .wordmark { font-size: clamp(3.5rem, 8vw, 6rem); line-height: .95; padding-bottom: .1em; border-bottom: .07em solid var(--latte); }
.lockup__city { font: 600 clamp(.85rem, 1.4vw, 1.1rem)/1 var(--body); letter-spacing: .42em; text-transform: uppercase; color: var(--latte); margin-top: .9rem; }
.foot__links { display: grid; gap: .65rem; text-align: right; justify-items: end; }
.foot__links a { display: inline-flex; align-items: center; gap: .4em; text-decoration: none; font: 700 1.25rem/1.2 var(--display); letter-spacing: -.02em; transition: color .3s var(--ease); }
.foot__links a:hover { color: var(--latte); }
.foot__links li:last-child a { font: 500 1rem/1.3 var(--body); color: var(--paper-soft); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--bark); }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  color: var(--paper-soft); font-size: .95rem;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cover { animation: open 1.3s var(--ease) both; }
  .biglock__word { animation: unveil 1.2s var(--ease) .35s both; }
  .biglock__rule { animation: draw 1.2s var(--ease) .75s both; }
  .biglock__city { animation: track 1.4s var(--ease) .9s both; }
  .cover__top, .cover__foot { animation: fade 1s var(--ease) .6s both; }
  @keyframes open { from { clip-path: inset(18% 22% round 28px); } to { clip-path: inset(0 round 28px); } }
  @keyframes unveil { from { clip-path: inset(0 0 100% 0); transform: translateY(.18em); } to { clip-path: inset(-10% -5% -10% -5%); } }
  @keyframes draw { from { transform: scaleX(0); } }
  @keyframes track { from { opacity: 0; letter-spacing: .9em; } }
  @keyframes fade { from { opacity: 0; transform: translateY(12px); } }

  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .doing li { transform: none; }
  .js .doing .mask > span { transform: translateY(105%); transition: transform 1.1s var(--ease) .05s; }
  .js .doing li.in .mask > span { transform: none; }
  .js .doing li p { transition: opacity 1s var(--ease) .25s; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cover { border-radius: 22px; }
  .biglock { font-size: 25vw; }

  .next { grid-template-columns: 1fr; }
  .stack--dark { font-size: 40vw; }
  .about__intro { grid-template-columns: 1fr; }
  .doing li { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ruled { grid-template-columns: 1fr 1fr; }
  .biglock { font-size: 26vw; }
  .ruled__entry { grid-column: 1 / -1; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .block__foot .btn, .close .btn { width: 100%; justify-content: center; }
  .foot__links { text-align: left; justify-items: start; }
}