/* =========================================================
   Dennis Reynolds — site styles
   Every page is an "artboard" designed at 1260px wide, the
   same way Readymag lays things out. Positions come from
   --x / --y / --w / --h on each element (in design pixels)
   and scale with the window through --u.
   Below 720px wide the artboard turns into a simple stack.
   ========================================================= */

:root {
  --u: calc(min(100vw, 1600px) / 1260);

  /* Brand colors */
  --ink: #000;
  --ink-soft: #222;
  --paper: #fff;
  --pink: #ee2b63;
  --orange: #ff9800;
  --dark: #262626;

  /* Fonts — swap these for your licensed brand fonts
     (drop the files in /fonts and add @font-face rules) */
  --font-serif: "Young Serif", Georgia, serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: none; }
a { color: inherit; }

/* ---------- Textures (pure CSS, replace with image files if you like) ---------- */
.tex-grid {
  background-color: #e4e4e4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(0,0,0,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.13) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(0,0,0,.06), transparent 55%);
  background-size: 220px 220px, calc(30*var(--u)) calc(30*var(--u)), calc(30*var(--u)) calc(30*var(--u)), 100% 100%, 100% 100%;
}
.tex-paper {
  background-color: #f6f6f4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 2px 18px rgba(0,0,0,.12);
}
.tex-fabric {
  background-color: #e9e9e9;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tex-dark {
  background-color: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: max(36px, calc(44*var(--u)));
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(12px, calc(19*var(--u)));
}
.nav--clear { background: transparent; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: max(8px, calc(14*var(--u))); }
.pill {
  display: inline-block;
  font-size: max(12px, calc(16*var(--u)));
  line-height: 1;
  padding: max(4px, calc(4*var(--u))) max(10px, calc(17*var(--u)));
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.pill:hover, .pill.is-active { background: var(--ink); color: #fff; }

/* ---------- Artboard ---------- */
.page { min-height: 100vh; }
.art {
  position: relative;
  width: calc(1260*var(--u));
  height: calc(var(--H)*var(--u));
  margin: 0 auto;
}
.a {
  position: absolute;
  left: calc(var(--x)*var(--u));
  top: calc(var(--y)*var(--u));
  width: calc(var(--w)*var(--u));
}
.a.box { height: calc(var(--h)*var(--u)); }
.a.rot { transform: rotate(calc(var(--r)*1deg)); }
.a img, .a.img { object-fit: cover; }
.a > img { width: 100%; height: 100%; }
.a.cutout > img { object-fit: contain; }
.a.shadow > img { filter: drop-shadow(0 calc(8*var(--u)) calc(10*var(--u)) rgba(0,0,0,.35)); }
a.a:not(.btn-stack):not(.btn-orange):not(.next) { display: block; }
a.a:hover > img { transform: scale(1.03); }
a.a > img { transition: transform .25s ease; }

/* ---------- Type ---------- */
.serif-xl {
  font-family: var(--font-serif);
  font-size: calc(105*var(--u));
  line-height: .8;
  letter-spacing: -.032em;
  font-weight: 400;
  margin: 0;
}
.serif-xxl { font-family: var(--font-serif); font-size: calc(116*var(--u)); line-height: .9; letter-spacing: -.02em; margin: 0; color: var(--ink-soft); font-weight: 400; }
.title { font-size: calc(70*var(--u)); font-weight: 600; line-height: 1.05; margin: 0; color: var(--ink-soft); letter-spacing: -.01em; }
.h-sec { font-size: calc(24*var(--u)); font-weight: 500; margin: 0; color: var(--ink-soft); }
.h-26 { font-size: max(18px, calc(26*var(--u))); font-weight: 600; margin: 0; }
.h-42 { font-size: calc(42*var(--u)); font-weight: 500; margin: 0; color: var(--ink-soft); }
.body { font-size: max(13px, calc(16*var(--u))); line-height: 1.35; font-weight: 300; margin: 0; }
.body p { margin: 0 0 1em; }
.body p:last-child { margin-bottom: 0; }
.body strong { font-weight: 500; }
.lead { font-size: max(14px, calc(18*var(--u))); line-height: 1.45; margin: 0; }
.date { font-size: max(13px, calc(16*var(--u))); font-weight: 500; margin: 0; color: var(--ink-soft); }
.label { font-size: max(12px, calc(16*var(--u))); font-weight: 300; margin: 0 0 calc(8*var(--u)); }

/* ---------- Buttons ---------- */
.btn-stack {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: #000;
  background: #fff;
  font-size: max(13px, calc(18*var(--u)));
  box-shadow: calc(-9*var(--u)) calc(9*var(--u)) 0 #000;
  transition: transform .15s, box-shadow .15s;
}
.btn-stack--pink { background: var(--pink); color: #fff; font-weight: 600; font-size: calc(30*var(--u)); }
.btn-stack:hover { transform: translate(calc(-3*var(--u)), calc(3*var(--u))); box-shadow: calc(-6*var(--u)) calc(6*var(--u)) 0 #000; }
.btn-orange {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff; text-decoration: none;
  font-weight: 600; font-size: max(14px, calc(21*var(--u)));
  border-radius: 3px;
  box-shadow: 0 calc(4*var(--u)) calc(10*var(--u)) rgba(0,0,0,.35);
}
.btn-orange--flat { box-shadow: none; font-weight: 400; font-size: max(14px, calc(18*var(--u))); }
.btn-orange:hover { filter: brightness(1.06); }

/* ---------- Home specifics ---------- */
.chips { display: flex; gap: calc(7*var(--u)); }
.chips span {
  background: #000; color: #fff; text-transform: uppercase;
  font-size: calc(13*var(--u)); letter-spacing: .02em;
  padding: calc(6*var(--u)) calc(7*var(--u)); line-height: 1; white-space: nowrap;
}
.burst {
  display: flex; align-items: center; justify-content: center;
  background: #000;
  clip-path: polygon(50% 0%,58% 14%,72% 4%,74% 21%,90% 16%,85% 33%,100% 38%,88% 50%,100% 62%,85% 67%,90% 84%,74% 79%,72% 96%,58% 86%,50% 100%,42% 86%,28% 96%,26% 79%,10% 84%,15% 67%,0% 62%,12% 50%,0% 38%,15% 33%,10% 16%,26% 21%,28% 4%,42% 14%);
  transform: rotate(6deg);
}
.burst span {
  font-family: var(--font-serif); color: #fff; font-style: italic;
  font-size: calc(30*var(--u)); line-height: .9; text-align: center;
  transform: rotate(6deg); font-weight: 700;
}
.lines { pointer-events: none; overflow: visible; }

/* ---------- Work page ---------- */
.panel { background: #fff; }
.rule { border-top: 1px solid #aaa; }
.rule-pink { border-top: 2px solid var(--pink); }

/* ---------- About ---------- */
.cv h4 { font-size: max(13px, calc(16*var(--u))); font-weight: 600; margin: 0; }
.cv p { font-size: max(13px, calc(16*var(--u))); margin: 0; line-height: 1.25; }
.cv .item { margin-bottom: calc(18*var(--u)); }
.cv .when { font-weight: 500; }
.stats p { font-weight: 700; font-size: max(12px, calc(14*var(--u))); line-height: 1; margin: 0 0 calc(16*var(--u)); }

/* ---------- Packages / process map ---------- */
.pm-box { background: var(--orange); padding: calc(14*var(--u)) calc(14*var(--u)); color: #1a1a1a; }
.pm-box h2 {
  font-family: var(--font-sans); font-stretch: 125%; font-weight: 900;
  font-size: calc(62*var(--u)); line-height: .92; margin: 0 0 calc(80*var(--u));
}
.pm-box .body { font-weight: 400; max-width: calc(340*var(--u)); }
.num {
  font-family: var(--font-sans); font-stretch: 125%; font-weight: 900;
  color: var(--orange); font-size: calc(290*var(--u)); line-height: .7; margin: 0;
}
.card {
  background: #fff; color: #111;
  box-shadow: calc(-14*var(--u)) calc(14*var(--u)) 0 var(--orange);
  display: flex; flex-direction: column;
  padding: calc(14*var(--u));
}
.card h3 { font-size: calc(34*var(--u)); font-weight: 600; margin: 0 0 calc(12*var(--u)); font-stretch: 112%; }
.card .card-img { flex: 1; min-height: 0; margin-bottom: calc(14*var(--u)); }
.card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.card .body { font-weight: 400; font-size: max(12px, calc(15*var(--u))); }
.chat { color: #fff; }
.chat h2 { font-size: calc(36*var(--u)); font-weight: 700; margin: 0 0 calc(30*var(--u)); }
.chat .body { font-weight: 400; color: #e8e8e8; }
.form { display: flex; flex-direction: column; gap: calc(18*var(--u)); }
.form input, .form textarea {
  font: inherit; font-size: max(14px, calc(16*var(--u)));
  padding: calc(7*var(--u)) calc(12*var(--u));
  border: 0; border-radius: 2px; background: #fff; color: #111;
}
.form textarea { height: calc(80*var(--u)); resize: vertical; }
.form button {
  font: inherit; font-size: max(14px, calc(16*var(--u)));
  background: #555; color: #fff; border: 0; border-radius: 2px;
  padding: calc(8*var(--u)); cursor: pointer;
}
.form button:hover { background: #333; }
.form-note { font-size: 13px; color: #bbb; min-height: 1em; }

/* ---------- Case study next link ---------- */
.next { display: flex; align-items: center; justify-content: flex-end; gap: calc(14*var(--u)); text-decoration: none; color: var(--ink-soft); }
.next span { font-size: max(14px, calc(22*var(--u))); font-weight: 300; }
.next svg { width: calc(28*var(--u)); height: calc(28*var(--u)); flex: none; }
.next img { width: calc(120*var(--u)); height: calc(75*var(--u)); object-fit: cover; flex: none; }

/* ---------- Footer ---------- */
.footer { background: #000; color: #fff; }
.footer .art { height: calc(130*var(--u)); }
.footer a { color: var(--pink); font-size: max(13px, calc(19*var(--u))); line-height: 1.3; display: block; }
.footer .copy { font-size: max(13px, calc(19*var(--u))); text-align: right; }

/* ---------- Mobile: stack everything ---------- */
@media (max-width: 720px) {
  :root { --u: calc(100vw / 760); }
  .art { width: auto; height: auto; padding: 60px 16px 32px; display: flex; flex-direction: column; gap: 18px; }
  .a, .a.box { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .a.box { aspect-ratio: var(--w) / var(--h); }
  .a.rot { transform: rotate(calc(var(--r)*.5deg)); }
  .deco, .m-hide { display: none !important; }
  .m-half { width: calc(50% - 9px) !important; }
  .m-row { flex-direction: row; flex-wrap: wrap; }
  .serif-xl { font-size: 15vw; }
  .serif-xxl { font-size: 18vw; }
  .title { font-size: 9vw; }
  .h-42 { font-size: 26px; }
  .chips span { font-size: 11px; padding: 5px 6px; }
  .btn-stack { min-height: 44px; font-size: 16px; width: calc(100% - 9px) !important; margin-left: 9px; }
  .btn-stack--pink { font-size: 22px; }
  .btn-orange, .btn-orange.box { min-height: 44px; aspect-ratio: auto; width: auto; align-self: flex-start; padding: 10px 22px; }
  .pm-box .body { max-width: none; }
  .card { min-height: 0; }
  .card h3 { font-size: 26px; }
  .card .card-img { aspect-ratio: 4 / 3; }
  .num { font-size: 90px; margin-bottom: -10px; }
  .pm-box h2 { font-size: 34px; margin-bottom: 24px; }
  .chat h2 { font-size: 28px; }
  .form textarea { height: 110px; }
  .footer .art { height: auto; padding: 20px 16px; flex-direction: column; gap: 12px; }
  .footer .copy { text-align: left; }
  .next { justify-content: flex-start; }
  .next img { width: 96px; height: 60px; }
  .next svg { width: 22px; height: 22px; }
  .nav ul { gap: 6px; }
  .pill { padding: 5px 9px; }
  .pill-name { display: none; }
}