/* With Nate — withnate.co.uk
 *
 * Palette sampled from the finished logo rather than invented: #832305 is 60%
 * of it, with #e8612a and the #f6dfc0 cream from the Etsy banner. The mark is
 * already live on the shop, so the site matching it is worth more than any
 * cleverer scheme.
 *
 * Deliberately the opposite of nasdigital.co.uk in every structural choice -
 * light where that is dark, warm where that is cool, rounded where that is
 * tight. They are two businesses and should not look like two skins of one.
 *
 * Note this is also NOT the palette on the fleet board's With Nate tab, which
 * is bright candy on aubergine. That was a deliberate brief for an internal
 * tool; this is the customer-facing brand.
 */

:root {
  --paper: #fbf4e9;        /* warm cream ground */
  --paper-2: #f6ead8;      /* panel */
  --cream: #f6dfc0;        /* the banner cream */
  --ink: #33170b;          /* deep warm brown-black */
  --ink-2: #6b4230;
  --muted: #96705a;

  --terracotta: #832305;   /* the logo */
  --terracotta-lift: #a13106;
  --ember: #e8612a;        /* warm orange */
  --leaf: #3f7d54;         /* the one cool note, for "in stock"/positive */

  --line: #e6d2b8;
  --line-soft: #efe0cb;

  --wrap: 1140px;
  --narrow: 66ch;
  --pad: clamp(20px, 5vw, 48px);

  /* Rounded and friendly, to sit with a brush-script mark. nasdigital uses a
     serif display, so the two never read as the same template. */
  --f-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
               "Trebuchet MS", -apple-system, sans-serif;
  --f-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta); text-decoration-color: color-mix(in srgb, var(--terracotta) 35%, transparent); }
a:hover { text-decoration-color: var(--terracotta); }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; background: var(--terracotta); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 0; top: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 var(--pad); }

/* ── header ─────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.wordmark img { border-radius: 10px; }
.wordmark span { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.site-head nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.site-head nav a {
  color: var(--ink-2); text-decoration: none; font-size: 15px;
  padding: 8px 12px; border-radius: 10px; font-weight: 500;
}
.site-head nav a:hover { color: var(--terracotta); background: var(--paper-2); }
.site-head nav a.cta { background: var(--terracotta); color: #fff; font-weight: 650; }
.site-head nav a.cta:hover { background: var(--terracotta-lift); color: #fff; }
@media (max-width: 640px) {
  .site-head nav a[href="#prints"], .site-head nav a[href="/#prints"] { display: none; }
}
@media (max-width: 460px) {
  .site-head nav a[href="/blog"] { display: none; }
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; background: var(--terracotta); color: #fff;
  padding: 13px 24px; border-radius: 14px; font-weight: 650; text-decoration: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.btn:hover { background: var(--terracotta-lift); color: #fff; transform: translateY(-2px); }
.btn:active { transform: scale(.95, .9); transition: transform .09s ease-out; }
.btn.ghost { background: none; color: var(--terracotta); border: 2px solid var(--line); }
.btn.ghost:hover { border-color: var(--terracotta); background: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(36px, 6vw, 72px); }
.hero-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--terracotta); }
.hero .lede { font-size: clamp(1.04rem, 1.8vw, 1.18rem); color: var(--ink-2); max-width: 48ch; margin: 0 0 26px; }
.eyebrow {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin: 0 0 16px;
}
.hero-art {
  border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: var(--cream); box-shadow: 0 18px 40px -24px rgba(51,23,11,.45);
}

/* ── sections ───────────────────────────────────────────────────────── */
section { padding: clamp(44px, 7vw, 84px) 0; }
.sec-head { max-width: 58ch; margin-bottom: clamp(24px, 4vw, 40px); }
.sec-head h2 {
  font-family: var(--f-display); font-weight: 750;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.12;
  letter-spacing: -.015em; margin: 0 0 12px; text-wrap: balance;
}
.sec-head p { color: var(--ink-2); margin: 0; }
.band { background: var(--paper-2); }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

/* ── product cards ──────────────────────────────────────────────────── */
.item {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; text-decoration: none; color: inherit; display: block;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease;
}
.item:hover {
  transform: translateY(-5px) rotate(-.35deg);
  box-shadow: 0 20px 34px -22px rgba(51,23,11,.5);
  border-color: var(--terracotta);
}
.item-art { aspect-ratio: 4 / 3; background: var(--cream); overflow: hidden; }
.item-art img { width: 100%; height: 100%; object-fit: cover; }
.item-body { padding: 18px 20px 22px; }
.item h3 { font-family: var(--f-display); font-weight: 750; font-size: 1.14rem; margin: 0 0 8px; letter-spacing: -.01em; }
.item p { color: var(--ink-2); font-size: .95rem; margin: 0 0 12px; }
.pill {
  display: inline-block; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  background: var(--cream); color: var(--terracotta);
  padding: 4px 11px; border-radius: 100px;
}
.pill.made { background: #e4f0e7; color: var(--leaf); }

/* ── steps ──────────────────────────────────────────────────────────── */
.steps { counter-reset: s; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.step { counter-increment: s; position: relative; padding-top: 52px; }
.step::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--terracotta); color: #fff;
  font-family: var(--f-display); font-weight: 750; font-size: 1.05rem;
  display: grid; place-items: center;
}
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.step p { color: var(--ink-2); font-size: .95rem; margin: 0; }

/* ── shop links ─────────────────────────────────────────────────────── */
.shops { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.shop {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
}
.shop:hover { transform: translateY(-3px); border-color: var(--terracotta); }
.shop strong { font-family: var(--f-display); font-size: 1.06rem; font-weight: 750; }
.shop span { color: var(--muted); font-size: .9rem; }

/* ── blog ───────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 24px; text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--terracotta); }
.card h2 { font-family: var(--f-display); font-weight: 750; font-size: 1.12rem; margin: 0 0 10px; line-height: 1.3; }
.card p { color: var(--ink-2); font-size: .95rem; margin: 0 0 14px; }
.card-meta { color: var(--muted); font-size: 12.5px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tag { font-size: 11.5px; font-weight: 650; background: var(--cream); color: var(--terracotta); padding: 3px 10px; border-radius: 100px; }

/* ── post ───────────────────────────────────────────────────────────── */
.page-head h1, .post h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 14px; text-wrap: balance;
}
.lede { color: var(--ink-2); font-size: 1.08rem; margin: 0 0 22px; }
.post { padding: clamp(32px, 5vw, 64px) 0; }
.back { font-size: 13.5px; text-decoration: none; display: inline-block; margin-bottom: 20px; font-weight: 600; }
.byline { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--muted); margin: 0 0 8px; }
.byline img { border-radius: 50%; }
.byline strong { color: var(--ink); }

.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-family: var(--f-display); font-weight: 750; font-size: 1.65rem; margin-top: 1.9em; letter-spacing: -.01em; scroll-margin-top: 80px; }
.prose h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--ember); }
.prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: var(--paper-2); border: 1px solid var(--line-soft); padding: .1em .38em; border-radius: 5px; color: var(--terracotta); }
.prose pre { background: var(--ink); color: #f4e6d6; border-radius: 12px; padding: 18px 20px; overflow-x: auto; font-size: .88rem; }
.prose pre code { background: none; border: none; color: inherit; padding: 0; }
.prose blockquote { border-left: 3px solid var(--ember); padding-left: 20px; margin-left: 0; color: var(--ink-2); font-style: italic; }
.prose img { border-radius: 14px; border: 1px solid var(--line); }
.prose figure { margin: 1.8em 0; }
.post-end { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.post-end h2 { font-family: var(--f-display); font-weight: 750; font-size: 1.5rem; margin: 0 0 10px; }
.post-end p { color: var(--ink-2); margin: 0 0 18px; }

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot {
  background: var(--terracotta); color: var(--cream);
  margin-top: 48px; padding: 44px var(--pad) 52px;
}
.foot-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 20px; }
@media (min-width: 760px) { .foot-inner { grid-template-columns: 1fr auto; align-items: start; } }
.site-foot strong { font-family: var(--f-display); font-size: 1.1rem; color: #fff; }
.site-foot p { margin: 6px 0 0; font-size: .9rem; color: color-mix(in srgb, var(--cream) 82%, transparent); }
.site-foot a { color: #fff; text-decoration-color: color-mix(in srgb, #fff 45%, transparent); }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; font-size: .93rem; }
.foot-note { grid-column: 1 / -1; font-size: .85rem; color: color-mix(in srgb, var(--cream) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .item:hover, .card:hover, .shop:hover, .btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   THE FUN PART

   nasdigital.co.uk is restrained because it sells judgement. This one sells
   things people buy because they like looking at them, so the site has to be
   worth looking at. Everything below is decorative and gated on .js - if the
   script never runs, a complete, readable shop is still there.
   ═══════════════════════════════════════════════════════════════════════ */

/* Paper grain. A shop selling prints should not feel like flat white. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .45; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2; }

/* Animated watercolour wash, echoing the logo's paint blot. Blurred hard so
   it reads as pigment in the paper rather than as three moving circles. */
.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(60px); opacity: .45; }
.blob { position: absolute; border-radius: 45% 55% 52% 48% / 50% 45% 55% 50%; will-change: transform; }
.blob-1 { width: 46vw; height: 46vw; background: var(--ember);      top: -12vw; left: -10vw;   animation: drift1 26s ease-in-out infinite; }
.blob-2 { width: 38vw; height: 38vw; background: var(--terracotta); top: 44vh;  right: -12vw;  animation: drift2 32s ease-in-out infinite; }
.blob-3 { width: 30vw; height: 30vw; background: #e9b04a;           top: 118vh; left: 18vw;    animation: drift3 29s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(6vw,4vh) rotate(28deg) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(-5vw,-6vh) rotate(-24deg) scale(1.08); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(4vw,-5vh) rotate(18deg) scale(1.15); } }

/* Hand-drawn underline, painted on with stroke-dashoffset when the heading
   arrives - so it reads as drawn, not as a border that was always there. */
.squiggle { position: relative; display: inline-block; }
.squiggle svg { position: absolute; left: -2%; bottom: -.38em; width: 104%; height: .4em; overflow: visible; }
.squiggle path {
  fill: none; stroke: var(--ember); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
}
.js .squiggle.is-in path { animation: draw .85s cubic-bezier(.4,.9,.3,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Reveals arrive with a slight tilt rather than just fading. Gated on .js:
   if the script never runs, everything is simply visible. */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px) rotate(-.7deg) scale(.985);
  transition: opacity .75s cubic-bezier(.22,.9,.3,1), transform .75s cubic-bezier(.34,1.3,.5,1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .09s; }
.js [data-reveal][data-delay="2"] { transition-delay: .18s; }
.js [data-reveal][data-delay="3"] { transition-delay: .27s; }

/* 3D tilt - the transform itself is set per-pointer from JS. */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .item-art img { transition: transform .5s cubic-bezier(.22,.9,.3,1); }
.tilt:hover .item-art img { transform: scale(1.06); }

/* Marquee. Low contrast on purpose - it is rhythm and texture, and must not
   compete with the products for attention. Pauses on hover so it can be read. */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--cream); padding: 13px 0; }
.marquee-track { display: flex; width: max-content; animation: slide 34s linear infinite; }
.marquee span {
  font-family: var(--f-display); font-weight: 750; font-size: 1.02rem;
  color: var(--terracotta); opacity: .78; white-space: nowrap;
  display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem;
}
.marquee span::after { content: "✳"; color: var(--ember); }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Paint trail behind the cursor - the cheapest way to make a page feel
   hand-made rather than rendered. Canvas, so it costs no DOM. */
#trail { position: fixed; inset: 0; z-index: 3; pointer-events: none; }

/* A stuck-on badge for the hero art. */
.hero-art-wrap { position: relative; }
.sticker {
  position: absolute; right: -16px; top: -18px; z-index: 4;
  background: var(--terracotta); color: #fff;
  font-family: var(--f-display); font-weight: 800; font-size: .9rem;
  width: 98px; height: 98px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; line-height: 1.15;
  transform: rotate(-13deg); box-shadow: 0 10px 22px -12px rgba(51,23,11,.85);
}
.js .sticker { animation: wobble 5s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate(-6deg) scale(1.04); } }

/* ── the capability showcase ────────────────────────────────────────── */
/* Every one of MUSE's tools is a product line, so each gets a real example
   rather than a description of one. */
.caps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr)); }
.cap {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
}
.cap:hover { transform: translateY(-4px) rotate(-.3deg); border-color: var(--ember); }
.cap-art { aspect-ratio: 1 / 1; background: var(--cream); overflow: hidden; position: relative; }
.cap-art img, .cap-art video { width: 100%; height: 100%; object-fit: cover; }
.cap-art .placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: .82rem; text-align: center; padding: 14px;
  background: repeating-linear-gradient(45deg, var(--cream) 0 10px, var(--paper-2) 10px 20px);
}
.cap-body { padding: 14px 16px 18px; }
.cap h3 { font-family: var(--f-display); font-weight: 750; font-size: .99rem; margin: 0 0 5px; }
.cap p { color: var(--ink-2); font-size: .87rem; margin: 0 0 10px; line-height: 1.5; }
.cap .kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember);
}
.cap audio { width: 100%; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .blob, .marquee-track, .js .sticker { animation: none; }
  .js [data-reveal], [data-reveal] { opacity: 1; transform: none; }
  .js .squiggle path { stroke-dashoffset: 0; }
  #trail, .blobs { display: none; }
  .cap:hover, .item:hover, .card:hover, .shop:hover, .btn:hover { transform: none; }
}