/* === Mokimo — Core Stylesheet (styles/core.css) ===
   Loaded on every page: tokens, reset, typography, buttons, header & footer. */

/* --- 1. Design Tokens --- */
:root {
  --ink: #0c0d0e;
  --parchment: #fcfbf8;
  --surface: #f3f1ea;
  --border-dark: #121316;
  --line-grey: #e2dfd5;
  --steel: #2d3139;
  --muted: #5e636e;

  --border-subtle: rgba(18, 19, 22, 0.2);
  --border-faint: rgba(18, 19, 22, 0.1);
  --ink-faint: rgba(12, 13, 14, 0.04);
  --ink-muted: rgba(12, 13, 14, 0.8);
  --parchment-glass: rgba(252, 251, 248, 0.95);
  --parchment-border: rgba(252, 251, 248, 0.2);
  --parchment-muted: rgba(252, 251, 248, 0.7);
  --parchment-faint: rgba(252, 251, 248, 0.4);

  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --shadow-brutal-sm: 2px 2px 0px #0c0d0e;
  --shadow-brutal: 4px 4px 0px #0c0d0e;
  --shadow-brutal-lg: 8px 8px 0px #0c0d0e;

  --max-width: 80rem; /* 1280px */
  --side-pad: clamp(1rem, 4vw, 2rem);
  --transition: 0.15s ease;
}

/* --- 2. Reset & Typography Cascade --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--parchment);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex-grow: 1; }

::selection {
  background-color: var(--ink);
  color: var(--parchment);
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
}

p { color: var(--ink-muted); }
a { color: inherit; text-decoration: none; }
/* Suppress the default tap highlight on touch devices; interactive
   elements provide their own pressed feedback. */
a, button { -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
svg { display: block; }

/* --- 3. Utilities & Layout Primitives --- */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--side-pad);
  width: 100%;
}

.hidden { display: none !important; }

.bg-grid-paper {
  background-size: 24px 24px;
  background-image:
    linear-gradient(to right, var(--ink-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-faint) 1px, transparent 1px);
}

.halftone-subtle {
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* --- 4. Section Layout (shared page scaffolding) --- */
.section {
  border-bottom: 2px solid var(--border-dark);
  padding-block: 4rem;
}
.section--parchment { background-color: var(--parchment); }
.section--surface { background-color: var(--surface); }

.section__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 1rem;
}
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.5rem;
}
.section__title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  letter-spacing: -0.03em;
}
.section__desc {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 24rem;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .section { padding-block: 5rem; }
}
@media (min-width: 768px) {
  .section__header { flex-direction: row; align-items: flex-end; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--parchment); border-left: 1px solid var(--border-dark); }
::-webkit-scrollbar-thumb { background: var(--ink); }

/* --- 5. Reusable Components: Buttons, Badges, Cards --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.875rem 1.5rem;
  border: 2px solid var(--border-dark);
  box-shadow: var(--shadow-brutal);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn--sm { padding: 0.375rem 1rem; }
.btn--primary { background-color: var(--ink); color: var(--parchment); }
.btn--secondary { background-color: var(--parchment); color: var(--ink); }
/* Touch devices keep :hover stuck after a tap, so hover-only press styles
   are gated behind (hover: hover); :active above covers touch feedback. */
@media (hover: hover) {
  .btn:hover { transform: translate(2px, 2px); box-shadow: none; }
  .btn--secondary:hover { background-color: var(--surface); }
}
.btn--full { width: 100%; }
/* While the inquiry POST is in flight the submit button is disabled; keep
   the resting shadow and block the hover/active press styles. */
.btn:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
  box-shadow: var(--shadow-brutal);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-dark);
}
.badge--surface { background-color: var(--surface); box-shadow: var(--shadow-brutal-sm); }
.badge--dark {
  background-color: transparent;
  color: var(--parchment-muted);
  border-color: var(--parchment-border);
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
}
.badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: var(--ink); }

.card {
  border: 2px solid var(--border-dark);
  background-color: var(--surface);
  box-shadow: var(--shadow-brutal);
}
.card--parchment { background-color: var(--parchment); }
.card--interactive { transition: transform var(--transition); }
.card--interactive:hover { transform: translateY(-4px); }

/* --- 5b. Case prints (shared: homepage cards + case-study pages) --- */
/* A photo presented as a printed postcard pinned to the page — white paper
   frame with a typed caption strip and a soft paper shadow. On the homepage
   the tilt is rolled by scripts/home.js on every carousel render (capped at
   ±1.2deg); elsewhere prints sit straight. */
.case-print {
  width: 100%;
  height: 100%;
  position: relative;
  /* No overflow clipping here: the pins must be able to overhang the paper
     edge. The zoomed photo is clipped by its own .case-print__window. */
  background-color: #fff;
  border: 3px solid whitesmoke;
  /* Extra bottom padding forms the white caption strip, like a photo label. */
  padding: 0.45rem 0.45rem 1.9rem;
  box-shadow:
    0 1px 2px rgba(12, 13, 14, 0.2),
    0 6px 14px rgba(12, 13, 14, 0.16);
  /* The hover bend pivots around the pinned top edge. */
  transform-origin: top center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Clipping window for the zoomed photo, so the print itself can let the
   pins (and their shadows) spill past the paper edge. */
.case-print__window {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Hover: the paper bends as if the bottom edge is lifted while the pinned
   top stays put — rotateX around the top edge swings the bottom toward the
   viewer. The JS-rolled tilt (rotate) composes with this transform. Fires
   on the print itself, not the whole surrounding card. */
@media (hover: hover) {
  .case-print:hover {
    transform: perspective(600px) rotateX(1deg);
    box-shadow:
      0 1px 2px rgba(12, 13, 14, 0.2),
      0 14px 22px rgba(12, 13, 14, 0.2);
  }
}
.case-print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.43);
  transform-origin: center;
}
/* Drawing pins: hard black and white, one through each top corner of the
   print. The head is a small SVG (inlined as a data URI so the template
   stays clean): flat ink-black head, a crisp white highlight, and a hard
   white crescent along the bottom edge — graphic, no soft gradients, to
   match the site's brutalist print styling. On the homepage,
   scripts/home.js re-rolls each pin's position jitter and 3D tilt on every
   carousel render; elsewhere the pins sit straight. */
.case-pin {
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230c0d0e'/%3E%3Ccircle cx='16' cy='15.4' r='12.8' fill='%23fff'/%3E%3Ccircle cx='16' cy='14.2' r='12.8' fill='%230c0d0e'/%3E%3Cellipse cx='11.5' cy='10.5' rx='4.2' ry='2.6' fill='%23fff' transform='rotate(-24 11.5 10.5)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(12, 13, 14, 0.45));
}
.case-pin--l { top: 0rem; left: -0.35rem; }
.case-pin--r { top: 0rem; right: -0.35rem; }
.case-pin--bl { bottom: 0rem; left: -0.35rem; }
.case-pin--br { bottom: 0rem; right: -0.35rem; }
.case-vis__caption {
  position: absolute;
  /* Sits in the print's white bottom strip (see .case-print padding).
     Single line with ellipsis: a wrapping caption would spill out of the
     strip, so long captions are truncated instead — keep them short. */
  bottom: 0.4rem;
  left: 0.65rem;
  right: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.case-tag {
  background-color: var(--surface);
  border: 1px solid var(--border-dark);
  padding: 0.125rem 0.5rem;
}

/* --- 5c. Case cards (shared: homepage carousel + work hub) --- */
.case-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Size-query container so the footer can react to the card's own width,
     independent of viewport or how many cards the carousel shows. */
  container-type: inline-size;
}
/* Type marker, top of the card (compact hub cards: case study / article). */
.case-type {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.case-client {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.case-vis {
  height: 19rem; /* ~10% taller than the original 17.25rem */
  margin-bottom: 2rem;
  border: 1px solid var(--border-dark);
  background-color: var(--surface);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.case-vis svg { width: 100%; height: 100%; }
/* Photo variant: the photo is presented as a printed postcard pinned to the
   card — white paper frame with a typed caption strip and a soft paper
   shadow. On the homepage the hand-pinned tilt is rolled by scripts/home.js
   on every carousel render (capped at ±1.2deg); on the work hub and in the
   no-JS fallback the prints sit straight. */
.case-vis--photo { padding: 0; border: 0; background: none; }
.case-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.case-desc { font-size: 0.875rem; line-height: 1.6; margin-bottom: 0.75rem; }
.case-footer {
  padding-top: 1rem;
  /*border-top: 1px solid var(--border-subtle);*/
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}
/* Whole-card link (see _includes/case-card.html): the card itself is the
   anchor, so the paper-bend hover on .case-print keeps working and the
   homepage carousel JS is unaffected. */
a.case-card { color: inherit; }
a.case-card:focus-visible {
  outline: 2px solid var(--border-dark);
  outline-offset: 3px;
}
.case-more {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  white-space: nowrap;
}
@media (hover: hover) {
  .case-card:hover .case-more { text-decoration: underline; }
}
/* Solo print (work hub photo cards): the postcard pinned straight to the
   page — no wrapper card, title or link. Its height comes from the shared
   1:1 grid ratio (see styles/pages/work.css), so it always matches the
   compact cards it shares a row with; the photo crops to fill
   (object-fit cover), never distorts. */
.case-print--solo {
  display: flex;
  flex-direction: column;
  height: auto;
}
.case-print--solo .case-print__window { flex: 1; min-height: 0; }
a.case-print:focus-visible {
  outline: 2px solid var(--border-dark);
  outline-offset: 3px;
}

/* --- 6. Header & Navigation --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--parchment-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--border-dark);
  padding-block: 0.875rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.brand__dot {
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--ink);
  border-radius: 9999px;
  transition: transform var(--transition);
}
.brand:hover .brand__dot { transform: scale(1.15); }
.brand__name { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.05em; }
.brand__location {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
  border-left: 1px solid var(--border-subtle);
  padding-left: 0.625rem;
  margin-left: 0.25rem;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.site-nav a { transition: color var(--transition); }
.site-nav a:hover { color: var(--muted); }

.site-header__actions .btn { display: none; }

@media (min-width: 640px) {
  .brand__location { display: inline-block; }
  .site-header__actions .btn { display: inline-flex; }
}
@media (min-width: 768px) {
  .site-nav { display: flex; }
}

/* --- 7. Footer --- */
.site-footer {
  border-top: 2px solid var(--border-dark);
  background-color: var(--ink);
  color: var(--parchment);
  padding-block: 3rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--parchment-border);
}

.site-footer__brand {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  display: block;
  margin-bottom: 0.5rem;
}
.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--parchment-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--parchment-faint);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.site-footer__links a { color: var(--parchment-muted); transition: color var(--transition); }
.site-footer__links a:hover { color: var(--parchment); text-decoration: underline; }

.site-footer__address {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--parchment-muted);
  line-height: 1.6;
}

.site-footer__bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--parchment-muted);
}
.site-footer__policy-links { display: flex; gap: 1rem; }
.site-footer__policy-links a:hover { color: var(--parchment); }

@media (min-width: 640px) {
  .site-footer__bottom { flex-direction: row; }
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}