/* Cheenu Malig portfolio: case files design. Shared by every page.
   Palette (the site's own): Pine Tree #283618 · Dark Olive #606C38 · Cornsilk #FEFAE0 · Earth Yellow #DDA15E,
   plus tints for paper and sticky notes, a darker earth #BC6C25 and a sage #A3B18A for folder colours.
   Type: Anton for titles, Newsreader for reading, IBM Plex Mono for labels and details.
   Motion is slower than the old site, to match the pace of the heartbeat intro (3.6s). All timings live in the
   --reveal / --word variables below and the counter duration in site.js, so they are easy to adjust. */
:root {
  --pine-deep: #161F0C; --pine: #283618; --pine-line: #2F3F1C; --olive: #606C38; --olive-light: #B8C47F; --sage: #A3B18A;
  --cornsilk: #FEFAE0; --cornsilk-2: #F1ECCB; --muted: #C9C5A0;
  --earth: #DDA15E; --earth-light: #E8B576; --earth-ink: #EDBE84; --rust: #BC6C25; --stamp: #9C3520;
  --paper: #FBF7E4; --ink: #283618; --ink-soft: #4A5530;
  --note-yellow: #F3D39C; --note-olive: #DCE3B8; --note-peach: #F6D2BF; --note-cream: #FFFDF3;
  --display: Anton, "Arial Narrow", Impact, sans-serif;
  --serif: Newsreader, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --gutter: clamp(16px, 2.6vw, 36px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --reveal-dur: 1.2s; --reveal-step: 160ms;   /* sections gliding in (old site: 0.7s, 90ms) */
  --word-dur: 1.2s; --word-step: 140ms;       /* headline words rising (old site: 0.8s, 90ms) */
  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .21  0 0 0 0 .09  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { background: var(--pine-deep); color: var(--cornsilk); font: 400 16px/1.55 var(--mono); overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--earth); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--earth); color: var(--pine); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
svg.i { width: 1em; height: 1em; fill: currentColor; flex: none; }
/* Moving tile background behind every page (drawn in site.js). It sits under the content and only shows in the gaps. */
.tiles { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* Blood that drips from the mouse (or a tap on phones), drawn over the page in site.js. Below the page turn, above everything else. */
.drips { position: fixed; inset: 0; z-index: 85; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Top bar: brand (or the case name), the menu, and the booking button ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 0 var(--gutter); background: rgba(22, 31, 12, .92); border-bottom: 1px solid var(--pine-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.brand { position: relative; display: grid; font: 400 1.4rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.brand > span { grid-area: 1 / 1; transition: opacity .3s, transform .3s; }
.brand .case-name { opacity: 0; transform: translateY(8px); }
body.scrolled .brand .case-name { opacity: 1; transform: none; }
body.scrolled .brand .case-name ~ .brand-name, body.scrolled .brand:has(.case-name) .brand-name { opacity: 0; transform: translateY(-8px); }
/* Left of the top bar: the name, then the status (Active, blinking green, and the visitor count) */
.who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.status { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.status .active, .status .visits { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.2; }
.status .active { background: rgba(69, 189, 98, .12); color: #8FDDA0; border: 1px solid rgba(69, 189, 98, .28); }
.status .active i { width: 8px; height: 8px; border-radius: 50%; background: #45BD62; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(69, 189, 98, .6); } 50% { opacity: .35; box-shadow: 0 0 0 6px rgba(69, 189, 98, 0); } }
.status .visits[hidden] { display: none; }
.nav { justify-self: center; display: flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 500; }
.nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--cornsilk-2); white-space: nowrap; transition: background .2s, color .2s; }
.nav a:hover { color: var(--cornsilk); background: rgba(254, 250, 224, .06); }
.nav a[aria-current="page"] { color: var(--pine); background: var(--earth); }
.topbar .right { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; min-height: 40px; padding: 8px 14px; border: 1px solid var(--pine-line); border-radius: 999px; background: none; color: var(--cornsilk); font: 600 .8rem var(--mono); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 999px;
  background: var(--earth); color: var(--pine); font: 600 .9rem/1.2 var(--mono); text-decoration: none; text-align: center; transition: background .2s, transform .3s var(--ease); }
.btn:hover { background: var(--earth-light); }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: .78rem; }
.btn.line { background: none; border: 1px solid var(--pine-line); color: var(--cornsilk); }
.btn.line:hover { border-color: var(--earth); color: var(--earth); background: none; }
.btn .sm { display: none; }

/* ---------- Footer and the visitor badge (the dot, eye and number blink softly together) ---------- */
.site-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding: 40px var(--gutter) 44px;
  border-top: 1px solid var(--pine-line); background: rgba(22, 31, 12, .82); font-size: .8rem; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--earth); }
.visits { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(59, 44, 20, .5); color: var(--earth-ink); font-size: .8rem; font-weight: 500; }
.visits[hidden] { display: none; }
.visits i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.visits i, .visits svg { animation: blink 2.8s ease-in-out infinite; }
.visits b { font-weight: 600; animation: blink-num 2.8s ease-in-out infinite; }
.visits b.fade { animation: visits-num .8s ease, blink-num 2.8s ease-in-out .8s infinite; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
@keyframes blink-num { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes visits-num { from { opacity: .15; } }

/* ---------- Paper, notes, briefs, pinned photos, exhibit labels (used on every page) ---------- */
.paper { position: relative; color: var(--ink); border-radius: 3px; box-shadow: 0 30px 60px rgba(0, 0, 0, .28); background: var(--paper) var(--paper-noise); }
.note { position: relative; z-index: 2; padding: 22px 22px 24px; background: var(--n, var(--note-yellow)); color: var(--ink); border-radius: 2px; box-shadow: 0 12px 24px rgba(40, 54, 24, .2); transform: rotate(var(--r, -1deg)); }
.note h3 { font: 400 1.35rem/1.1 var(--display); text-transform: uppercase; color: var(--pine); }
.note .num { margin-top: 10px; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--pine); }
.note p { margin-top: 8px; font-size: .88rem; line-height: 1.55; }
.doc { position: relative; z-index: 1; margin: -18px 18px 0 30px; padding: 34px 20px 20px; background: var(--note-cream); border: 1px solid rgba(40, 54, 24, .18); box-shadow: 0 8px 18px rgba(40, 54, 24, .14); transform: rotate(var(--r2, 1deg)); }
.doc .tag { font-size: .78rem; font-weight: 700; }
.doc b { display: block; margin-top: 4px; font: 500 1.08rem/1.3 var(--serif); }
.doc .lines { height: 46px; margin-top: 12px; background: repeating-linear-gradient(to bottom, rgba(40, 54, 24, .16) 0 2px, transparent 2px 9px); }
.pins { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 44px 34px; margin-top: 44px; }
.pinned { position: relative; }
.photo { position: relative; display: block; background: #fff; padding: 10px 10px 34px; box-shadow: 0 14px 28px rgba(40, 54, 24, .22); transform: rotate(var(--r, -2deg)); color: var(--ink); text-decoration: none; }
.photo img, .photo video { width: 100%; height: var(--h, 330px); object-fit: cover; object-position: var(--pos, 0 0); background: #e9e5cf; }
.photo .cap { position: absolute; left: 12px; right: 12px; bottom: 9px; font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
.clip { position: absolute; top: -30px; left: 62%; z-index: 3; width: 22px; height: 70px; color: #3a3a34; }
.exhibit { margin-top: 110px; }
.exhibit:first-child { margin-top: 0; }
.ex-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 400 clamp(1.9rem, 3vw, 2.6rem)/1 var(--display); text-transform: uppercase; color: var(--pine); }
.ex-label small { font: 600 .8rem var(--mono); letter-spacing: .05em; color: var(--ink-soft); }
.rule { height: 1px; margin-top: 18px; background: rgba(40, 54, 24, .35); }
/* A rule that bleeds. Each <i> is a stain seeping from the line with a drip hanging from it:
   --x where it sits, --w stain width, --sx where the drip hangs, --len drip length.
   Add class "live" and a --d delay and the drip swells, lets a drop go, and the drop falls. Reduced motion leaves still stains. */
.bleed { position: relative; z-index: 3; --blood: #7E1C11; --blood-hi: #B23A26; --blood-lo: #4F0E07; }
.bleed i { position: absolute; top: -1px; left: var(--x); width: var(--w, 36px); height: 5px; border-radius: 2px 2px 55% 45% / 1px 1px 100% 100%;
  background: linear-gradient(to bottom, var(--blood-lo), var(--blood)); }
.bleed i::before { content: ""; position: absolute; top: 3px; left: var(--sx, 40%); width: 9px; height: var(--len, 24px);
  background: radial-gradient(circle at 38% calc(100% - 8px), var(--blood-hi) 0 1px, transparent 1.7px),
              radial-gradient(4.4px 6.5px at 50% calc(100% - 6.5px), var(--blood) 0 88%, transparent 100%),
              linear-gradient(90deg, var(--blood-lo), var(--blood) 40%, var(--blood-hi) 62%, var(--blood)) 50% 0 / 5px calc(100% - 8px) no-repeat; }
.bleed i.live::before { animation: drip-swell 6s var(--d, 0s) infinite ease-in; }
.bleed i.live::after { content: ""; position: absolute; top: calc(var(--len, 24px) - 2px); left: var(--sx, 40%); margin-left: .5px; width: 8px; height: 8px;
  border-radius: 0 50% 50% 50%; background: radial-gradient(circle at 60% 60%, var(--blood) 55%, var(--blood-lo)); opacity: 0; transform: rotate(45deg);
  animation: drip-drop 6s var(--d, 0s) infinite; }
@media (max-width: 600px) { .bleed i { width: calc(var(--w, 36px) * .55); } .bleed i:not(.live) { display: none; } }
@keyframes drip-swell {
  0% { height: calc(var(--len, 24px) * .5); } 52% { height: var(--len, 24px); } 60% { height: calc(var(--len, 24px) + 7px); }
  63% { height: calc(var(--len, 24px) * .55); } 100% { height: calc(var(--len, 24px) * .5); }
}
@keyframes drip-drop {
  0%, 60% { opacity: 0; transform: translateY(1px) rotate(45deg); }
  61% { opacity: 1; transform: translateY(1px) rotate(45deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86% { opacity: 1; transform: translateY(140px) scale(.85, 1.25) rotate(45deg); }
  92%, 100% { opacity: 0; transform: translateY(156px) scale(.85, 1.25) rotate(45deg); }
}
.ex-intro { margin-top: 20px; font: 400 1.15rem/1.6 var(--serif); max-width: 40em; }
.label { font-size: .8rem; color: var(--muted); }

/* ---------- Motion (slower than the old site, to match the intro) ---------- */
/* Scroll reveals. They use translate and scale, so rotated notes and photos keep their tilt. */
.anim [data-anim] { opacity: 0; transition: opacity var(--reveal-dur) ease, translate var(--reveal-dur) var(--ease), scale var(--reveal-dur) var(--ease); transition-delay: var(--d, 0ms); }
.anim [data-anim="pop"] { scale: .9; translate: 0 18px; }
.anim [data-anim="up"] { translate: 0 36px; }
.anim [data-anim="left"] { translate: -48px 0; }
.anim [data-anim="right"] { translate: 48px 0; }
.anim [data-anim].in { opacity: 1; translate: none; scale: none; }
/* Headline words rise one by one (after the intro on the home page) */
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.words .w > span { display: inline-block; transform: translateY(105%); animation: rise var(--word-dur) var(--ease) forwards; animation-delay: calc(var(--i) * var(--word-step) + 250ms); }
.intro:not(.intro-fast) .words .w > span { animation-delay: calc(var(--i) * var(--word-step) + 3.3s); }
.words.wait .w > span { animation-play-state: paused; }   /* an added case file's headline waits until it's on screen */
/* Page turn between pages: the sheet dims with a heartbeat line, then the next page fades up */
.turn { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center; background: var(--pine-deep); opacity: 0; transition: opacity .55s ease; }
.turn svg { width: min(520px, 70vw); height: 60px; overflow: visible; }
.turn path { fill: none; stroke: #45BD62; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(69, 189, 98, .6)); }
html.leaving .turn { opacity: 1; pointer-events: auto; }
html.leaving .turn path { transition: stroke-dashoffset .7s ease-in-out .15s; stroke-dashoffset: 0; }
html.arriving .turn { opacity: 1; }
html.arrived .turn { opacity: 0; transition-duration: .8s; }
@keyframes rise { to { transform: none; } }
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Phones ---------- */
@media (max-width: 1080px) {
  .topbar { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { position: fixed; top: 64px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gutter) 20px;
    background: rgba(22, 31, 12, .98); border-bottom: 1px solid var(--pine-line); font-size: .95rem; }
  .nav a { padding: 12px 14px; border-radius: 10px; }
  body.menu-open .nav { display: flex; }
}
/* Mid-size screens: keep the status compact so the menu still fits */
@media (max-width: 1360px) { .status .vw { display: none; } .who { gap: 12px; } }
/* Phones and tablets: the status sits under the name */
@media (max-width: 1080px) {
  .who { flex-direction: column; align-items: flex-start; gap: 3px; }
  .status { gap: 6px; }
  .status .active, .status .visits { padding: 1px 8px; font-size: .66rem; gap: 5px; }
  .status .active i, .status .visits i { width: 6px; height: 6px; }
}
@media (max-width: 480px) { .btn .lg { display: none; } .btn .sm { display: inline; } .brand { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .words .w > span { transform: none; }
}