/* Base layer for the portfolio.
 *
 * Everything below is hand-written. The per-element rules that reproduce the
 * canvas layout are appended by tools/build.mjs, generated from the design's
 * own inline styles, so nothing here needs to restate them. */

:root {
  /* Page inset. The design draws at a fixed 48px; it tightens on small screens
     and the generated rules reference it as var(--gutter). */
  --gutter: 48px;

  --bg: rgb(11, 11, 11);
  --ink: rgb(239, 237, 232);
  --muted: rgb(190, 190, 190);
  --accent: rgb(207, 74, 57);
  --hairline: rgba(239, 237, 232, 0.08);

  --header-height: 56px;

  /* How far a work row's hover wash reaches past its content. The row's
     content box ends exactly where the nav does, so without this the accent
     arrow lands flush against the edge of the wash. */
  --row-bleed: clamp(12px, 1.6vw, 24px);
}

@media (max-width: 900px) {
  :root { --gutter: 28px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

img, svg { max-width: 100%; }
img, svg { height: auto; }

::placeholder { color: rgba(190, 190, 190, 0.4); }

/* Anchored sections must clear the sticky bar. */
[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------- a11y */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 12px 18px;
}

.skip-link:focus { transform: translate(-50%, 0); color: var(--ink); }

/* --------------------------------------------------------------- layout */

[data-main-flex] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Annotated screens alternate sides across a case study; on narrow screens the
   screenshot should always precede the notes that describe it, whichever side
   it sits on at full width. */
@media (max-width: 700px) {
  [data-annotated] > [data-annotated-media] { order: -1; }
}

/* ---------------------------------------------------- image slots */

/* Placeholders stand in for artwork that has not been supplied yet; drop a file
   named after the slot id into src/assets/slots/ and the build swaps in an
   <img> instead. */
[data-slot] {
  margin: 0;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

[data-slot-empty] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  border: 1px dashed rgba(239, 237, 232, 0.18);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(239, 237, 232, 0.02) 0 10px,
      transparent 10px 20px
    );
}

[data-slot-empty] figcaption {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(190, 190, 190, 0.45);
  max-width: 22ch;
  line-height: 1.6;
}

/* ------------------------------------------------------------ mobile nav */

.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

/* Three rules drawn from one element: the bar plus its two pseudo-elements. */
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-toggle-bar { top: 50%; }
.nav-toggle-bar::before { content: ''; top: -6px; left: 0; }
.nav-toggle-bar::after { content: ''; top: 6px; left: 0; }

[data-nav-open] .nav-toggle-bar { background: transparent; }
[data-nav-open] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
[data-nav-open] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after { transition: none; }
  [data-button], [data-arrow], [data-row] { transition: none; }
  [data-pulse], .not-found-dot { animation: none; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }

  #site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none !important;
    flex-direction: column;
    gap: 0 !important;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 8px var(--gutter) 20px;
  }

  [data-nav-open] #site-nav { display: flex !important; }

  #site-nav a { padding: 14px 0; border-top: 1px solid var(--hairline); }
}

/* -------------------------------------------------------------- 404 page */

/* The one page with no design screen behind it, so its rules are written here
   rather than generated. It follows the home hero: mono eyebrow with the accent
   dot, a stacked two-tone display heading, then a hairline rule with the copy
   on one side and the buttons on the other. The values are the design's own,
   taken from the hero rather than invented.

   These sit above the button rules on purpose: the hover states below share
   their specificity, so they have to land later to win. */

.not-found {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 11vh, 128px) var(--gutter);
}

.not-found-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(190, 190, 190, 0.6);
}

.not-found-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

.not-found-heading { margin: 0; }

.not-found-heading span {
  display: block;
  font-weight: 900;
  font-size: clamp(42px, 7.5vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.0396em;
}

.not-found-heading span + span { color: rgb(186, 186, 186); opacity: 0.22; }

.not-found-foot {
  display: flex;
  gap: clamp(24px, 3.75vw, 48px);
  align-items: flex-start;
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

.not-found-copy { max-width: 520px; }

.not-found-copy p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }

.not-found-copy p + p { margin: 0; font-size: 14px; color: rgba(190, 190, 190, 0.7); }

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

/* Hand-written markup carries no generated class, so the button faces are
   restated here from the design's values. The hover states are shared. */
.not-found [data-button] {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 14px 20px;
  white-space: nowrap;
}

.not-found [data-button="primary"] { background: var(--accent); color: var(--ink); }

.not-found [data-button="secondary"] { color: var(--accent); border: 1px solid var(--accent); }

@media (max-width: 760px) {
  .not-found-foot { flex-direction: column; }
  .not-found-actions { margin-left: 0; }
}

/* -------------------------------------------------------------- buttons */

/* The design draws two treatments and no hover state for either; tools/build.mjs
   marks which is which, since the generated class names move with the design.

   Filled inverts to a light face with dark text — the arrow is part of the
   label, so it follows the colour. Outlined fills with the accent. */

[data-button],
[data-arrow] {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

[data-button="primary"]:hover,
[data-button="primary"]:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

[data-button="secondary"]:hover,
[data-button="secondary"]:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* Squared off: the design draws these as circles. The tag qualifier is there
   to outrank the generated rule, which lands later in the stylesheet. */
a[data-arrow],
span[data-arrow],
div[data-arrow] {
  border-radius: 2px;
}

/* A work row carries its arrow as a child, so the row is what lights it. */
a:hover [data-arrow],
a:focus-visible [data-arrow] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* -------------------------------------------------------------- work rows */

/* The wash lifts the row off the page rather than tinting it: the row holds
   cover art and an accent arrow already, and a colour would fight both.

   It reaches past the content on both sides, carried by two offset shadows
   rather than by padding the row — padding would drag the row's hairline out
   with it, and that rule lines up with the section rules above. */
[data-row] { transition: background-color 160ms ease, box-shadow 160ms ease; }

[data-row]:hover,
[data-row]:focus-visible {
  background: rgba(239, 237, 232, 0.035);
  box-shadow:
    calc(var(--row-bleed) * -1) 0 0 0 rgba(239, 237, 232, 0.035),
    var(--row-bleed) 0 0 0 rgba(239, 237, 232, 0.035);
}

/* The next-project row is the page container itself, so its content is already
   inset by the gutter and the wash has no reason to reach further. */
[data-row="next"]:hover,
[data-row="next"]:focus-visible { box-shadow: none; }

/* ---------------------------------------------------------------- pulse */

/* The hero's availability dot, and the 404's eyebrow dot: a slow breath, so it
   reads as a live status rather than a decoration. */
@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

[data-pulse],
.not-found-dot { animation: pulse 2.4s ease-in-out infinite; }

/* ---------------------------------------------------------------- forms */

[data-contact-form] input:focus,
[data-contact-form] textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

[data-contact-form] button:hover { filter: brightness(1.12); }

/* The address is drawn in the same mono face as the labels around it, so it is
   lifted to match them. Display only — the case of a local part is not ours to
   change, and the mailto keeps the address as written. */
[data-email] { text-transform: uppercase; }

/* -------------------------------------------------------------- printing */

@media print {
  [data-header], .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---- generated from the design's inline styles ---- */
.d1{background:rgb(11,11,11);color:rgb(239,237,232);min-height:100vh}
.d2{position:sticky;top:0;z-index:50;background:rgba(11,11,11,0.96);border-bottom:1px solid rgba(239,237,232,0.08)}
.d3{max-width:1280px;margin:0 auto;padding:0 var(--gutter);height:56px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}
.d4{display:flex;align-items:center;gap:12px}
.d5{width:28px;height:28px;border-radius:50%;background:url(/assets/c1b2075139be3998.jpg) center/cover no-repeat rgb(207,74,57);flex-shrink:0}
.d6{font-family:'DM Mono',monospace;font-weight:500;font-size:10px;letter-spacing:2.2px;color:rgb(207,74,57);text-transform:uppercase}
.d7{display:flex;gap:clamp(20px, 3.125vw, 40px)}
.d8{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.8px;color:rgb(207,74,57);text-transform:uppercase}
.d9{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.8px;color:rgb(190,190,190);text-transform:uppercase}
.d10{max-width:1280px;margin:0 auto;padding:clamp(64px, 10vw, 128px) var(--gutter) clamp(32px, 5vw, 64px) var(--gutter);box-sizing:border-box}
.d11{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.d12{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2.2px;color:rgb(207,74,57);text-transform:uppercase}
.d13{width:6px;height:6px;border-radius:50%;background:rgb(207,74,57);opacity:0.6}
.d14{margin:0}
.d15{display:block;margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(42px, 7.5vw, 96px);line-height:0.9;letter-spacing:-0.0396em;color:rgb(239,237,232)}
.d16{display:block;margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(42px, 7.5vw, 96px);line-height:0.9;letter-spacing:-0.0396em;color:rgb(186,186,186);opacity:0.22}
.d17{margin-top:24px;padding-bottom:32px}
.d18{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.8px;color:rgba(190,190,190,0.6);text-transform:uppercase}
.d19{display:flex;gap:clamp(24px, 3.75vw, 48px);padding-top:32px;border-top:1px solid rgba(239,237,232,0.08)}
.d20{max-width:520px}
.d21{margin:0 0 12px 0;font-size:16px;line-height:1.5;color:rgb(239,237,232)}
.d22{margin:0;font-size:14px;line-height:1.5;color:rgba(190,190,190,0.7)}
.d23{display:flex;gap:12px;align-items:flex-start;margin-left:auto}
.d24{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:rgb(207,74,57);border:1px solid rgb(207,74,57);padding:14px 20px;white-space:nowrap}
.d25{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:rgb(239,237,232);background:rgb(207,74,57);padding:14px 20px;white-space:nowrap}
.d26{max-width:1280px;margin:0 auto;padding:0 var(--gutter) clamp(40px, 6.25vw, 80px) var(--gutter);box-sizing:border-box}
.d27{display:flex;justify-content:space-between;align-items:baseline;padding:24px 0;border-top:1px solid rgba(239,237,232,0.08);margin-bottom:24px}
.d28{display:grid;grid-template-columns:280px 1fr auto;gap:clamp(16px, 2.5vw, 32px);align-items:center;padding:clamp(16px, 2.5vw, 32px) 0;border-top:1px solid rgba(239,237,232,0.08);text-decoration:none}
.d29{width:min(280px, 100%);height:160px;border-radius:4px;overflow:hidden}
.d30{width:100%;height:100%;background-image:url(/assets/cover-princeps.jpg);background-size:cover;background-position:center}
.d31{font-size:17px;font-weight:700;color:rgb(239,237,232);margin-bottom:4px}
.d32{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.5);text-transform:uppercase;margin-bottom:12px}
.d33{margin:0 0 14px 0;font-size:14px;line-height:1.5;color:rgba(190,190,190,0.85);max-width:560px}
.d34{display:flex;gap:8px;flex-wrap:wrap}
.d35{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;color:rgba(190,190,190,0.6);text-transform:uppercase;border:1px solid rgba(239,237,232,0.15);padding:5px 10px}
.d36{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.d37{font-family:'DM Mono',monospace;font-size:10px;color:rgba(190,190,190,0.5)}
.d38{width:28px;height:28px;border:1px solid rgba(239,237,232,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgb(239,237,232);font-size:13px}
.d39{width:100%;height:100%;background-image:url(/assets/cover-tango.jpg);background-size:cover;background-position:center}
.d40{width:100%;height:100%;background-image:url(/assets/cover-digisign.jpg);background-size:cover;background-position:center}
.d41{width:100%;height:100%}
.d42{width:100%;height:100%;background-image:url(/assets/cover-mystash-admin.jpg);background-size:cover;background-position:center}
.d43{max-width:1280px;margin:0 auto;padding:clamp(32px, 5vw, 64px) var(--gutter);box-sizing:border-box;border-top:1px solid rgba(239,237,232,0.08)}
.d44{display:grid;grid-template-columns:340px 1fr;gap:clamp(24px, 3.75vw, 48px);margin-top:24px}
.d45{width:100%;height:clamp(176px, 32.813vw, 420px)}
.d46{margin:0 0 24px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(18px, 2.813vw, 36px);line-height:1.15;color:rgb(239,237,232)}
.d47{margin:0 0 16px 0;font-size:14px;line-height:1.6;color:rgba(190,190,190,0.85);max-width:640px}
.d48{margin:0 0 32px 0;font-size:14px;line-height:1.6;color:rgba(190,190,190,0.85);max-width:640px}
.d49{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px;margin-bottom:32px}
.d50{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.5);text-transform:uppercase;margin-bottom:6px}
.d51{font-size:14px;color:rgb(239,237,232)}
.d52{display:inline-block;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:rgb(239,237,232);background:rgb(207,74,57);padding:14px 20px}
.d53{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px, 3.125vw, 40px);margin-top:32px}
.d54{font-family:'DM Mono',monospace;font-size:10px;color:rgb(207,74,57);margin-bottom:12px}
.d55{font-size:17px;font-weight:700;color:rgb(239,237,232);margin-bottom:10px}
.d56{margin:0;font-size:13px;line-height:1.6;color:rgba(190,190,190,0.7)}
.d57{border-top:1px dashed rgba(207,74,57,0.3)}
.d58{max-width:1280px;margin:0 auto;padding:clamp(32px, 5vw, 64px) var(--gutter) clamp(40px, 6.25vw, 80px) var(--gutter);box-sizing:border-box;display:grid;grid-template-columns:1fr auto;align-items:end}
.d59{margin:6px 0 24px 0;font-size:14px;color:rgba(190,190,190,0.8)}
.d60{margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(25px, 4.375vw, 56px);line-height:1.05;color:rgb(239,237,232)}
.d61{color:rgb(207,74,57)}
.d62{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.6px;color:rgb(239,237,232);text-transform:uppercase}
.d63{border-top:1px solid rgba(239,237,232,0.08)}
.d64{max-width:1280px;margin:0 auto;padding:24px var(--gutter);box-sizing:border-box;display:flex;justify-content:space-between}
.d65{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.4);text-transform:uppercase}
.d66{max-width:1280px;margin:0 auto;padding:clamp(32px, 5vw, 64px) var(--gutter) 0 var(--gutter);box-sizing:border-box}
.d67{display:grid;grid-template-columns:380px 1fr;gap:clamp(28px, 4.375vw, 56px);margin-top:24px;padding-bottom:64px}
.d68{width:100%;height:clamp(193px, 35.938vw, 460px)}
.d69{margin:0 0 32px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(21px, 3.75vw, 48px);line-height:1.15;color:rgb(239,237,232)}
.d70{margin:0 0 18px 0;font-size:15px;line-height:1.6;color:rgba(190,190,190,0.85)}
.d71{margin:0;font-size:15px;line-height:1.6;color:rgba(190,190,190,0.85)}
.d72{max-width:1280px;margin:0 auto;padding:clamp(28px, 4.375vw, 56px) var(--gutter);box-sizing:border-box;border-top:1px solid rgba(239,237,232,0.08);display:grid;grid-template-columns:340px 1fr;gap:clamp(28px, 4.375vw, 56px)}
.d73{margin-top:20px}
.d74{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid rgba(239,237,232,0.08)}
.d75{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.5);text-transform:uppercase}
.d76{font-size:13px;color:rgb(239,237,232)}
.d77{margin:16px 0;font-size:20px;line-height:1.4;font-weight:700;color:rgb(239,237,232)}
.d78{margin:0;font-size:14px;line-height:1.6;color:rgba(190,190,190,0.75);max-width:640px}
.d79{max-width:1280px;margin:0 auto;padding:clamp(28px, 4.375vw, 56px) var(--gutter);box-sizing:border-box;border-top:1px solid rgba(239,237,232,0.08)}
.d80{display:flex;justify-content:space-between;margin-bottom:32px}
.d81{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px, 4.375vw, 56px);align-items:center}
.d82{margin-bottom:28px}
.d83{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.5);text-transform:uppercase;margin-bottom:10px}
.d84{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;color:rgba(190,190,190,0.7);text-transform:uppercase;border:1px solid rgba(239,237,232,0.15);padding:6px 10px}
.d85{overflow-x:auto}
.d86{display:block;min-width:520px}
.d87{max-width:1280px;margin:0 auto;padding:clamp(28px, 4.375vw, 56px) var(--gutter) clamp(40px, 6.25vw, 80px) var(--gutter);box-sizing:border-box;border-top:1px solid rgba(239,237,232,0.08)}
.d88{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px, 3.125vw, 40px) clamp(28px, 4.375vw, 56px);margin-top:28px}
.d89{padding-top:20px;border-top:1px solid rgba(239,237,232,0.08)}
.d90{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.d91{font-size:16px;font-weight:700;color:rgb(239,237,232)}
.d92{font-family:'DM Mono',monospace;font-size:9px;color:rgba(190,190,190,0.4)}
.d93{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;color:rgb(207,74,57);text-transform:uppercase;margin-bottom:10px}
.d94{color:rgba(190,190,190,0.4)}
.d95{margin:0 0 10px 0;font-size:13px;line-height:1.55;font-style:italic;color:rgba(190,190,190,0.6)}
.d96{margin:0;font-size:13px;line-height:1.55;color:rgba(190,190,190,0.85)}
.d97{background:rgb(11,11,11);color:rgb(239,237,232);min-height:100vh;display:flex;flex-direction:column}
.d98{max-width:1280px;margin:0 auto;padding:clamp(32px, 5vw, 64px) var(--gutter) clamp(48px, 7.5vw, 96px) var(--gutter);box-sizing:border-box;flex:1;width:100%;box-sizing:border-box;display:grid;grid-template-columns:1fr 300px;gap:clamp(28px, 4.375vw, 56px)}
.d99{margin:6px 0 32px 0;font-size:14px;color:rgba(190,190,190,0.8)}
.d100{margin:0 0 40px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(25px, 4.375vw, 56px);line-height:1.05;color:rgb(239,237,232)}
.d101{border-top:1px solid rgba(239,237,232,0.12);padding-top:32px}
.d102{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px, 2.5vw, 32px);margin-bottom:28px}
.d103{display:block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.6);text-transform:uppercase;margin-bottom:12px}
.d104{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(239,237,232,0.15);color:rgb(239,237,232);font-size:14px;padding:0 0 10px 0;box-sizing:border-box;font-family:inherit}
.d105{margin-bottom:32px}
.d106{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(239,237,232,0.15);color:rgb(239,237,232);font-size:14px;padding:0 0 10px 0;box-sizing:border-box;font-family:inherit;resize:vertical}
.d107{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:rgb(239,237,232);background:rgb(207,74,57);border:none;padding:16px 24px;cursor:pointer}
.d108{padding-top:64px}
.d109{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1px;color:rgb(239,237,232);word-break:break-word}
.d110{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;color:rgba(190,190,190,0.4);text-transform:uppercase;margin-top:4px}
.d111{border-top:1px solid rgba(239,237,232,0.12);margin:24px 0}
.d112{display:flex;flex-direction:column;gap:14px}
.d113{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;color:rgba(190,190,190,0.7);text-transform:uppercase}
.d114{margin:0;font-size:12px;line-height:1.6;color:rgba(190,190,190,0.5)}
.d115{max-width:1280px;margin:0 auto;padding:clamp(20px, 3.125vw, 40px) var(--gutter) 0 var(--gutter);box-sizing:border-box}
.d116{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.6);text-transform:uppercase}
.d117{margin-top:32px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(190,190,190,0.5)}
.d118{margin:16px 0 20px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(25px, 4.375vw, 56px);line-height:1;color:rgb(239,237,232)}
.d119{margin:0 0 40px 0;font-size:15px;line-height:1.5;color:rgba(190,190,190,0.8);max-width:760px}
.d120{width:100%;height:clamp(218px, 40.625vw, 520px);border-radius:4px;background-image:url(/assets/cover-princeps.jpg);background-size:cover;background-position:center}
.d121{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(239,237,232,0.1)}
.d122{padding:20px 24px 20px 0}
.d123{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.5);text-transform:uppercase;margin-bottom:8px}
.d124{display:flex;gap:8px;flex-wrap:wrap;padding:24px 0 clamp(20px, 3.125vw, 40px) 0;border-top:1px solid rgba(239,237,232,0.1)}
.d125{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;color:rgba(190,190,190,0.6);text-transform:uppercase;border:1px solid rgba(239,237,232,0.15);padding:6px 12px}
.d126{max-width:1280px;margin:0 auto;padding:clamp(28px, 4.375vw, 56px) var(--gutter);box-sizing:border-box}
.d127{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(207,74,57,0.75);margin-bottom:32px}
.d128{margin:0 0 20px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:clamp(18px, 2.813vw, 36px);line-height:1.2;color:rgb(239,237,232);max-width:860px}
.d129{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px, 4.375vw, 56px);margin-bottom:40px}
.d130{margin:0 0 18px 0;font-size:15px;line-height:1.65;color:rgba(190,190,190,0.8)}
.d131{display:flex;flex-direction:column;gap:16px}
.d132{border:1px solid rgba(239,237,232,0.1);padding:20px 24px}
.d133{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.d134{color:rgba(239,237,232,0.9)}
.d135{margin:0;font-size:13px;line-height:1.6;color:rgba(190,190,190,0.75)}
.d136{display:flex;align-items:center;gap:24px;margin:8px 0 32px 0}
.d137{flex:1;height:1px;background:rgba(239,237,232,0.12)}
.d138{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(190,190,190,0.5);white-space:nowrap}
.d139{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:32px}
.d140{width:100%;aspect-ratio:2.16}
.d141{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(190,190,190,0.45);margin:14px 0 8px 0}
.d142{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px}
.d143{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px, 2.5vw, 32px);margin-bottom:32px}
.d144{border-top:1px solid rgba(239,237,232,0.15);padding-top:18px}
.d145{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgb(207,74,57);margin-bottom:10px}
.d146{font-size:15px;font-weight:700;color:rgb(239,237,232);margin-bottom:8px}
.d147{margin:0;font-size:13px;line-height:1.65;color:rgba(190,190,190,0.7)}
.d148{margin:0 0 40px 0;font-size:15px;line-height:1.65;color:rgba(190,190,190,0.8);max-width:640px}
.d149{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
.d150{border:1px solid rgba(239,237,232,0.1);padding:24px 26px}
.d151{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.d152{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgba(190,190,190,0.45)}
.d153{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:rgb(207,74,57);border:1px solid rgba(207,74,57,0.6);padding:4px 8px;white-space:nowrap}
.d154{font-size:16px;font-weight:700;color:rgb(239,237,232);margin-bottom:10px}
.d155{margin:0;font-size:13px;line-height:1.65;color:rgba(190,190,190,0.75)}
.d156{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px, 4.375vw, 56px);margin-bottom:32px}
.d157{margin:0 0 18px 0;font-size:14px;line-height:1.7;color:rgba(190,190,190,0.8)}
.d158{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}
.d159{border-left:2px solid rgb(207,74,57);background:rgba(207,74,57,0.05);padding:18px 24px}
.d160{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgb(207,74,57);margin-bottom:8px}
.d161{margin:0;font-size:14px;line-height:1.7;color:rgba(190,190,190,0.85)}
.d162{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:32px}
.d163{display:grid;grid-template-columns:repeat(1,1fr);gap:24px;margin-bottom:32px}
.d164{width:100%;aspect-ratio:1.41}
.d165{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px, 3.125vw, 40px);margin-top:8px}
.d166{border-top:1px solid rgb(207,74,57);padding-top:20px}
.d167{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgb(207,74,57);margin-bottom:12px}
.d168{margin:0;font-size:13px;line-height:1.7;color:rgba(190,190,190,0.7)}
.d169{max-width:1280px;margin:0 auto;padding:clamp(20px, 3.125vw, 40px) var(--gutter);box-sizing:border-box;border-top:1px solid rgba(239,237,232,0.08);display:flex;justify-content:space-between;align-items:center}
.d170{font-size:18px;font-weight:700;color:rgb(239,237,232)}
.d171{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;color:rgba(190,190,190,0.5);text-transform:uppercase;margin-top:4px}
.d172{width:40px;height:40px;border:1px solid rgba(239,237,232,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgb(239,237,232)}
.d173{margin:0 0 40px 0;font-size:15px;line-height:1.5;color:rgba(190,190,190,0.8);max-width:820px}
.d174{width:100%;height:clamp(218px, 40.625vw, 520px);border-radius:4px;background-image:url(/assets/cover-tango.jpg);background-size:cover;background-position:center}
.d175{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 0 clamp(20px, 3.125vw, 40px) 0;border-top:1px solid rgba(239,237,232,0.1)}
.d176{display:flex;gap:12px}
.d177{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgb(207,74,57);border:1px solid rgb(207,74,57);padding:12px 18px;white-space:nowrap}
.d178{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(28px, 4.375vw, 56px);margin-bottom:16px}
.d179{margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:clamp(18px, 2.813vw, 36px);line-height:1.2;color:rgb(239,237,232)}
.d180{margin:0 0 20px 0;font-size:14px;line-height:1.75;color:rgba(190,190,190,0.8)}
.d181{margin:0 0 40px 0;font-size:15px;line-height:1.65;color:rgba(190,190,190,0.8);max-width:760px}
.d182{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(239,237,232,0.1);border:1px solid rgba(239,237,232,0.1);margin-bottom:32px}
.d183{background:rgb(11,11,11);padding:26px 28px}
.d184{display:inline-block;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:rgb(207,74,57);border:1px solid rgba(207,74,57,0.6);padding:4px 8px;margin-bottom:18px}
.d185{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(239,237,232,0.1);border:1px solid rgba(239,237,232,0.1);margin-bottom:32px}
.d186{border-top:1px solid rgba(239,237,232,0.1);padding-top:28px;margin-top:48px;margin-bottom:28px}
.d187{display:flex;align-items:baseline;gap:18px}
.d188{font-family:'DM Mono',monospace;font-size:10px;color:rgb(207,74,57)}
.d189{margin:0;font-size:22px;font-weight:700;color:rgb(239,237,232)}
.d190{margin:22px 0 0 0;font-size:14px;line-height:1.75;color:rgba(190,190,190,0.8);max-width:860px}
.d191{margin-bottom:36px}
.d192{display:grid;grid-template-columns:repeat(1,1fr);gap:20px}
.d193{width:100%;aspect-ratio:1.533}
.d194{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(190,190,190,0.45);margin:16px 0 8px 0}
.d195{margin:0;font-size:13px;line-height:1.7;color:rgba(190,190,190,0.7);max-width:900px}
.d196{width:100%;aspect-ratio:1.284}
.d197{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:36px}
.d198{width:100%;aspect-ratio:1.408}
.d199{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.d200{width:100%;aspect-ratio:1.352}
.d201{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(190,190,190,0.45);margin-top:14px}
.d202{width:100%;aspect-ratio:1.315}
.d203{width:100%;aspect-ratio:1.306}
.d204{width:100%;aspect-ratio:1.628}
.d205{width:100%;aspect-ratio:2.284}
.d206{width:100%;aspect-ratio:2.830}
.d207{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:36px}
.d208{width:100%;aspect-ratio:1.833}
.d209{max-width:860px}
.d210{margin:0 0 22px 0;font-size:14px;line-height:1.8;color:rgba(190,190,190,0.8)}
.d211{margin:16px 0 20px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:900;font-size:clamp(28px, 5vw, 64px);line-height:1;color:rgb(239,237,232)}
.d212{margin:0 0 40px 0;font-size:15px;line-height:1.5;color:rgba(190,190,190,0.8);max-width:680px}
.d213{width:100%;height:clamp(218px, 40.625vw, 520px);border-radius:4px;background-image:url(/assets/cover-digisign.jpg);background-size:cover;background-position:center}
.d214{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(239,237,232,0.1);border-top:1px solid rgba(239,237,232,0.1);border-bottom:1px solid rgba(239,237,232,0.1)}
.d215{background:rgb(11,11,11);padding:20px 24px}
.d216{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 0 clamp(20px, 3.125vw, 40px) 0}
.d217{margin:0 0 20px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:clamp(18px, 2.813vw, 36px);line-height:1.2;color:rgb(239,237,232);max-width:900px}
.d218{max-width:980px;margin-bottom:28px}
.d219{margin:0 0 20px 0;font-size:14px;line-height:1.8;color:rgba(190,190,190,0.8)}
.d220{margin:0 0 14px 0;font-size:14px;line-height:1.8;color:rgba(239,237,232,0.9)}
.d221{margin:0;padding-left:20px}
.d222{margin-bottom:10px;font-size:14px;line-height:1.75;color:rgba(190,190,190,0.8)}
.d223{margin:0 0 32px 0;font-family:'DM Mono',monospace;font-size:9px;line-height:2;letter-spacing:1.2px;text-transform:uppercase;color:rgba(190,190,190,0.45);max-width:900px}
.d224{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px, 3.125vw, 40px);margin-bottom:36px}
.d225{font-size:16px;font-weight:700;color:rgb(239,237,232);margin-bottom:12px}
.d226{margin:0 0 12px 0;font-size:13px;line-height:1.75;color:rgba(190,190,190,0.75)}
.d227{margin:0;padding-left:18px}
.d228{margin-bottom:8px;font-size:13px;line-height:1.7;color:rgba(190,190,190,0.75)}
.d229{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:rgb(207,74,57);margin-bottom:8px}
.d230{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:rgb(239,237,232);margin-bottom:18px}
.d231{margin-bottom:14px}
.d232{font-size:13px;font-weight:700;color:rgba(239,237,232,0.9);margin-bottom:4px}
.d233{margin:0;font-size:13px;line-height:1.7;color:rgba(190,190,190,0.75)}
.d234{margin:4px 0 0 0;padding-left:18px}
.d235{margin-bottom:6px;font-size:13px;line-height:1.7;color:rgba(190,190,190,0.75)}
.d236{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px, 3.125vw, 40px);margin-bottom:36px}
.d237{background:rgb(11,11,11);padding:24px 26px}
.d238{margin:48px 0 24px 0}
.d239{margin:0;font-family:'Hanken Grotesk',sans-serif;font-size:clamp(18px, 1.875vw, 24px);font-weight:700;line-height:1.3;color:rgb(239,237,232)}
.d240{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px, 3.75vw, 48px);align-items:start;margin-bottom:56px}
.d241{width:100%;aspect-ratio:1.39}
.d242{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(190,190,190,0.5);margin-bottom:28px}
.d243{display:grid;grid-template-columns:repeat(2,1fr);gap:28px clamp(16px, 2.5vw, 32px)}
.d244{border-top:1px solid rgba(239,237,232,0.15);padding-top:14px}
.d245{font-size:14px;font-weight:700;color:rgb(239,237,232);margin-bottom:8px}
.d246{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px, 2.5vw, 32px);margin-bottom:48px}
.d247{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(190,190,190,0.45);margin:18px 0 8px 0}
.d248{margin:12px 0 0 0;font-size:14px;line-height:1.75;color:rgba(190,190,190,0.75);max-width:900px}
.d249{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px, 3.125vw, 40px);margin-bottom:36px}
.d250{margin:0;font-size:13px;line-height:1.75;color:rgba(190,190,190,0.7)}
.d251{width:100%;height:clamp(218px, 40.625vw, 520px)}
.d252{display:flex;justify-content:space-between;align-items:center;padding:24px 0 clamp(20px, 3.125vw, 40px) 0;border-top:1px solid rgba(239,237,232,0.1);flex-wrap:wrap;gap:16px}
.d253{margin:16px 0 20px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:clamp(18px, 2.188vw, 28px);line-height:1.3;color:rgb(239,237,232);max-width:760px}
.d254{margin:0;font-size:14px;line-height:1.65;color:rgba(190,190,190,0.8);max-width:760px}
.d255{width:100%;height:clamp(218px, 40.625vw, 520px);border-radius:4px;background-image:url(/assets/cover-mystash-admin.jpg);background-size:cover;background-position:center}
.d256{margin:16px 0 20px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:22px;line-height:1.4;color:rgb(239,237,232);max-width:700px}
.d257{margin:0;font-size:14px;line-height:1.65;color:rgba(190,190,190,0.6);max-width:700px}
.d258{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.d259{width:100%;height:clamp(134px, 25vw, 320px)}
@media (max-width:900px){
  .d3{flex-wrap:wrap}
  .d4{flex-wrap:wrap}
  .d7{flex-wrap:wrap}
  .d11{flex-wrap:wrap}
  .d19{flex-wrap:wrap}
  .d23{flex-wrap:wrap}
  .d27{flex-wrap:wrap}
  .d28{grid-template-columns:1fr}
  .d38{flex-wrap:wrap}
  .d44{grid-template-columns:1fr}
  .d53{grid-template-columns:repeat(2,1fr)}
  .d64{flex-wrap:wrap}
  .d67{grid-template-columns:1fr}
  .d72{grid-template-columns:1fr}
  .d74{flex-wrap:wrap}
  .d80{flex-wrap:wrap}
  .d90{flex-wrap:wrap}
  .d98{grid-template-columns:1fr}
  .d121{grid-template-columns:repeat(2,1fr)}
  .d136{flex-wrap:wrap}
  .d142{grid-template-columns:repeat(2,1fr)}
  .d143{grid-template-columns:repeat(2,1fr)}
  .d149{grid-template-columns:repeat(2,1fr)}
  .d151{flex-wrap:wrap}
  .d169{flex-wrap:wrap}
  .d172{flex-wrap:wrap}
  .d176{flex-wrap:wrap}
  .d182{grid-template-columns:repeat(2,1fr)}
  .d187{flex-wrap:wrap}
  .d207{grid-template-columns:repeat(2,1fr)}
  .d214{grid-template-columns:repeat(3,1fr)}
  .d236{grid-template-columns:repeat(2,1fr)}
  .d249{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .d49{grid-template-columns:1fr}
  .d58{grid-template-columns:1fr}
  .d81{grid-template-columns:1fr}
  .d88{grid-template-columns:1fr}
  .d102{grid-template-columns:1fr}
  .d129{grid-template-columns:1fr}
  .d139{grid-template-columns:1fr}
  .d156{grid-template-columns:1fr}
  .d162{grid-template-columns:1fr}
  .d165{grid-template-columns:1fr}
  .d178{grid-template-columns:1fr}
  .d185{grid-template-columns:1fr}
  .d197{grid-template-columns:1fr}
  .d199{grid-template-columns:1fr}
  .d224{grid-template-columns:1fr}
  .d240{grid-template-columns:1fr}
  .d243{grid-template-columns:1fr}
  .d246{grid-template-columns:1fr}
  .d258{grid-template-columns:1fr}
}
@media (max-width:680px){
  .d53{grid-template-columns:1fr}
  .d121{grid-template-columns:1fr}
  .d142{grid-template-columns:1fr}
  .d143{grid-template-columns:1fr}
  .d149{grid-template-columns:1fr}
  .d182{grid-template-columns:1fr}
  .d207{grid-template-columns:1fr}
  .d214{grid-template-columns:repeat(2,1fr)}
  .d236{grid-template-columns:1fr}
  .d249{grid-template-columns:1fr}
}
@media (max-width:460px){
  .d214{grid-template-columns:1fr}
}