/* ─────────────────────────────────────────────────────────
   PERIMETER STUDIO — shared styles
   Street-Utility Japandi · cream / ink / orange
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap');

:root {
  --ink: #0A0A0A;
  --cream: #F2EDE4;
  --orange: #FF4A1C;
  --panel: #1F1F1F;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display { font-family: 'Archivo Black', sans-serif; letter-spacing: -0.04em; line-height: 0.88; }
.mono    { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
.serif   { font-family: 'Fraunces', Georgia, serif; }

/* ── Motion ───────────────────────────────────────────── */
.hover-lift { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.hover-lift:hover { transform: translateY(-4px); }

@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-track { animation: ticker 40s linear infinite; }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.blink { animation: blink 1s steps(2) infinite; }

@keyframes slidein { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.slidein { animation: slidein 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.fadein { animation: fadein 0.4s ease both; }

@keyframes scalein { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.scalein { animation: scalein 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .blink, .slidein, .fadein, .scalein { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Corner ticks ─────────────────────────────────────── */
.corner-tl::before, .corner-br::before { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid currentColor; }
.corner-tl::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner-tr::after  { content: ''; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border: 2px solid currentColor; border-left: none; border-bottom: none; }
.corner-bl::after  { content: ''; position: absolute; bottom: -1px; left: -1px; width: 12px; height: 12px; border: 2px solid currentColor; border-right: none; border-top: none; }
.corner-br::before { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ── Fixed background field ───────────────────────────── */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-fx::before, .bg-fx::after { content: ''; position: absolute; inset: 0; }
/* warm wash */
.bg-fx { background:
  radial-gradient(ellipse 80% 60% at 15% 0%, rgba(255, 74, 28, 0.04), transparent 60%),
  radial-gradient(ellipse 70% 50% at 85% 100%, rgba(10, 10, 10, 0.05), transparent 60%); }
/* engineering grid */
.bg-fx::before {
  background-image:
    linear-gradient(to right, rgba(10,10,10,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, black 40%, transparent 90%);
          mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, black 40%, transparent 90%);
}
/* crosshair markers */
.bg-fx::after {
  background-image: url("data:image/svg+xml,%3Csvg width='224' height='224' viewBox='0 0 224 224' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230A0A0A' stroke-width='1' opacity='0.25'%3E%3Cpath d='M112 106 L112 118 M106 112 L118 112'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 224px 224px;
  opacity: 0.35;
}

/* ── Range slider (calculator) ────────────────────────── */
input[type="range"].pm-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: rgba(255,255,255,0.2); outline: none; cursor: pointer;
}
input[type="range"].pm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--orange); cursor: pointer; border: 0;
}
input[type="range"].pm-range::-moz-range-thumb { width: 20px; height: 20px; background: var(--orange); border: 0; cursor: pointer; border-radius: 0; }

/* ── Article body (blog) ──────────────────────────────── */
.article-body { font-family: 'Inter Tight', sans-serif; }
.article-body p { margin-bottom: 1.5em; line-height: 1.7; }
.article-body p:first-of-type::first-letter {
  float: left; font-family: 'Archivo Black', sans-serif; font-size: 5.5rem; line-height: 0.85;
  padding: 0.35rem 0.8rem 0 0; color: var(--orange);
}
.article-body h2 { font-family: 'Archivo Black', sans-serif; font-size: 2rem; line-height: 1; margin: 2.5em 0 0.8em; letter-spacing: -0.03em; }
.article-body h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.25rem; margin: 2em 0 0.6em; letter-spacing: -0.02em; }
.article-body blockquote {
  border-left: 3px solid var(--orange); padding-left: 1.25rem; margin: 2em 0;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 1.35rem; line-height: 1.35;
}
.article-body ul { margin: 1em 0 1.5em; padding-left: 1.5rem; }
.article-body ul li { margin-bottom: 0.5em; line-height: 1.6; }
.article-body ul li::marker { color: var(--orange); }
.article-body strong { font-weight: 700; }
.article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* utility */
[hidden] { display: none !important; }   /* beat Tailwind's display utilities on [hidden] elements */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
body.modal-open { overflow: hidden; }