/* ============================================================
   Shared stylesheet — bold editorial gallery theme: monochrome
   (warm paper + near-black ink) with one sharp rust accent used
   deliberately. Big condensed display type, sharp corners, dense
   editorial layout. Sunflower mark is the signature motif (nav,
   hero, footer). Keep this file alongside the HTML pages.
   ============================================================ */

:root{
  --canvas: #F5F3EE;      /* page background — warm paper */
  --white: #F5F3EE;       /* foreground text on dark surfaces (same warm paper tone) */
  --paper: #F5F3EE;       /* card/panel surface — flush with canvas, borders do the work */
  --ink: #0A0A0A;         /* main body text — near-black */
  --brown: #B5451F;       /* rust — the one sharp accent */
  --brown-deep: #17130F;  /* near-black — footer, badges, deep contexts */
  --blue: #B5451F;        /* aliased to rust — keeps the palette monochrome + one accent */
  --blue-deep: #8C3517;   /* deeper rust variant — hover states */
  --line: rgba(10,10,10,0.18);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background-color: var(--canvas);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
}
a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:3px; }
::selection{ background:var(--ink); color:var(--canvas); }

.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase; opacity:0.75;
  display:flex; align-items:center; gap:0.6rem; color:var(--brown);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-deep); }

/* ---------- sunflower signature mark ---------- */
.sunflower-mark{ display:inline-block; width:20px; height:20px; flex-shrink:0; }
.sunflower-mark.lg{ width:60px; height:60px; }
.sunflower-mark svg{ width:100%; height:100%; display:block; }
.sunflower-petals{ transform-origin:60px 60px; }
@media (prefers-reduced-motion: no-preference){
  .sunflower-petals{ animation:sway 4.5s ease-in-out infinite; }
  @keyframes sway{
    0%, 100%{ transform:rotate(-5deg); }
    50%{ transform:rotate(5deg); }
  }
}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 2.4rem;
  background:rgba(245,243,238,0.92); backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
.nav-mark{
  display:flex; align-items:center; gap:0.55rem;
  font-family:'Anton', sans-serif; font-weight:400; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.01em;
  color:var(--ink); text-decoration:none;
}
.nav-links{ display:flex; gap:1.6rem; }
.nav-links a{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none; color:var(--ink); opacity:0.65;
  padding:0 0 3px; border-bottom:2px solid transparent;
  transition:all 0.2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{ opacity:1; border-color:var(--brown); }
.nav-links a.current{ opacity:1; color:var(--brown); border-color:var(--brown); }

/* ---------- page header ---------- */
.page-hero{ padding:6rem 2.4rem 2.6rem; max-width:1080px; margin:0 auto; position:relative; }
.movement{ display:flex; align-items:center; gap:0.9rem; margin-bottom:0.5rem; }
.movement h1, .movement h2{
  font-family:'Anton', sans-serif; font-weight:600;
  font-size:clamp(2.3rem,5.5vw,3.4rem); color:var(--ink);
}
.section-intro{ max-width:600px; opacity:0.78; margin:1rem 0 0; line-height:1.65; font-size:1.05rem; }

/* ---------- home hero ---------- */
.hero{
  padding:8rem 2.4rem 2.5rem; max-width:1200px; margin:0 auto; position:relative;
}
.hero-top{ display:flex; align-items:center; gap:1.4rem; }
.hero h1{
  font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(3.2rem, 9vw, 7.5rem); line-height:0.9; letter-spacing:-0.01em;
}
.hero h1 .highlight{
  font-family:'Newsreader', serif; font-style:italic; font-weight:500;
  text-transform:none; color:var(--blue); letter-spacing:0; font-size:1.2em;
}
.hero-pun{
  display:block; font-family:'Newsreader', serif; font-style:italic; font-weight:500;
  text-transform:none; font-size:0.4em; letter-spacing:0; color:var(--ink);
  margin-top:0.5rem; line-height:1.2;
}
.hero-meta-line{
  font-family:'IBM Plex Mono'; font-size:0.78rem; letter-spacing:0.03em; color:rgba(10,10,10,0.65);
  margin-top:1.4rem;
}
.hero-sub{ margin-top:1.4rem; max-width:640px; font-size:1.15rem; line-height:1.7; opacity:0.82; }
.hero-actions{ display:flex; gap:1.1rem; margin-top:2.3rem; flex-wrap:wrap; scroll-margin-top:6rem; }

.btn{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.03em;
  padding:0.9rem 1.7rem; text-decoration:none; border-radius:0;
  border:2px solid var(--ink); display:inline-block; background:var(--canvas); color:var(--ink);
  transition:all 0.2s ease;
}
.btn.solid{ background:var(--brown); color:var(--white); border-color:var(--brown); }
.btn.solid:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
.btn:not(.solid):hover{ border-color:var(--blue-deep); color:var(--blue-deep); }

.hero-meta{ display:flex; gap:1.4rem; margin-top:3.2rem; flex-wrap:wrap; }
.stat-chip{
  background:var(--paper); border:1px solid var(--line); border-radius:0;
  padding:0.9rem 1.3rem; box-shadow:0 6px 18px rgba(181,69,31,0.08);
}
.stat-chip .v{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.15rem; color:var(--blue-deep); }
.stat-chip .l{ font-family:'IBM Plex Mono'; font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; opacity:0.6; margin-top:0.2rem; }

/* ---------- home menu (links to each page) ---------- */
.menu-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; margin-top:3.8rem; }
@media (max-width:820px){ .menu-grid{ grid-template-columns:repeat(2, 1fr); } }
.menu-card{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:0;
  padding:1.8rem 1.5rem; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:0.6rem; min-height:150px; justify-content:space-between;
  box-shadow:0 6px 18px rgba(181,69,31,0.06);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.menu-card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(181,69,31,0.16); }
.menu-card .name{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.5rem; }
.menu-card .desc{ font-family:'IBM Plex Mono'; font-size:0.68rem; opacity:0.6; letter-spacing:0.02em; }

/* ---------- section shell ---------- */
section{ position:relative; padding:2.2rem 2.4rem 5.5rem; max-width:1080px; margin:0 auto; }

.subhead{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--brown); margin:2.8rem 0 1.4rem;
  padding-top:1.4rem; border-top:2px solid var(--ink);
}
.subhead:first-of-type{ border-top:none; padding-top:0; margin-top:0; }

.section-header{
  font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase; font-size:1.9rem; letter-spacing:0.01em;
  color:var(--ink); margin:3rem 0 1.2rem; padding-top:1.4rem; border-top:2px solid var(--ink);
}

.section-mark{
  display:flex; align-items:baseline; gap:0.8rem; margin:3rem 0 1.4rem;
  padding-top:1.6rem; border-top:2px solid var(--ink);
}
.section-mark:first-of-type{ margin-top:2.4rem; }
.section-mark .num{ font-family:'IBM Plex Mono'; font-size:0.8rem; color:var(--brown); }
.section-mark h2{
  font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:1.7rem; letter-spacing:0.01em;
}

/* ---------- project cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; }
@media (max-width:720px){ .cards{ grid-template-columns:1fr; } }

.card{
  padding:1.8rem; display:flex; flex-direction:column; gap:0.9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:0;
  box-shadow:0 6px 18px rgba(181,69,31,0.06);
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover{ box-shadow:0 10px 26px rgba(181,69,31,0.14); transform:translateY(-2px); }
.card-top{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:0.4rem; }
.card-org{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.3rem; }
.card-date{ font-family:'IBM Plex Mono'; font-size:0.68rem; opacity:0.6; }
.card-role{ font-family:'IBM Plex Mono'; font-size:0.72rem; opacity:0.75; text-transform:uppercase; letter-spacing:0.04em; color:var(--brown); }
.card p{ font-size:0.95rem; line-height:1.6; opacity:0.85; }
.card-metrics{ display:flex; gap:2rem; margin-top:0.4rem; flex-wrap:wrap; }
.metric{ display:flex; flex-direction:column; }
.metric .n{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.7rem; color:var(--blue-deep); }
.metric .l{ font-family:'IBM Plex Mono'; font-size:0.6rem; opacity:0.65; text-transform:uppercase; }

/* ---------- gallery placeholder grid ---------- */
.gallery-strip{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0.9rem; margin-top:1.1rem; }
@media (max-width:600px){ .gallery-strip{ grid-template-columns:1fr; } }

/* ---------- photography page: masonry layout ---------- */
.photo-masonry{ columns:3 260px; column-gap:1.3rem; }
.photo-block{ break-inside:avoid; margin-bottom:1.3rem; display:flex; flex-direction:column; gap:0.5rem; }
.photo-block img{ width:100%; display:block; border-radius:0; border:1px solid var(--line); box-shadow:0 6px 16px rgba(181,69,31,0.08); }
.photo-block .cap{ font-family:'IBM Plex Mono'; font-size:0.7rem; opacity:0.65; text-align:center; }
@media (max-width:700px){ .photo-masonry{ columns:2 180px; } }
@media (max-width:460px){ .photo-masonry{ columns:1; } }
.gallery-thumb{
  aspect-ratio:4/3; border:1px dashed var(--line); border-radius:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:0.65rem; text-align:center; padding:0.6rem;
  color:var(--brown); opacity:0.7; background:rgba(139,90,43,0.05);
}

/* ---------- project cards (Work page — click through, hover preview) ---------- */
.project-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.8rem; margin-top:1rem; scroll-margin-top:6rem; }
@media (max-width:760px){ .project-grid{ grid-template-columns:1fr; } }

.project-card{
  display:block; text-decoration:none; color:var(--ink); border:2px solid var(--ink);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover{ transform:translateY(-4px); box-shadow:6px 6px 0 var(--ink); }
.preview-link{ display:block; text-decoration:none; }

.motion-preview{
  position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
  background:var(--ink); border-bottom:2px solid var(--ink);
}

/* Opus — two phone screens auto-scrolling continuously in opposite directions.
   Each track holds the screenshot TWICE back-to-back; animating exactly -50%
   of the track's height loops seamlessly forever (no pause, no reverse). */
.motion-preview.opus-dual{ display:flex; background:#0d0e12; }
.phone-col{ flex:1; position:relative; overflow:hidden; background:#0d0e12; }
.scroll-track{ display:flex; flex-direction:column; width:100%; }
.scroll-track img{ width:100%; display:block; }
.phone-col.col-a .scroll-track{ animation:scrollDown 15s linear infinite; }
.phone-col.col-b .scroll-track{ animation:scrollUp 19s linear infinite; }
@keyframes scrollDown{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-50%); } }
@keyframes scrollUp{ 0%{ transform:translateY(-50%); } 100%{ transform:translateY(0); } }

/* Apple Calendar & Photography & West Valley — simple static image, no motion */
.motion-preview.static-preview img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Substack/Photography card — single-column continuous infinite scroll down.
   Content (home + posts) is duplicated back-to-back in the HTML for the same
   seamless-loop technique as the Opus previews. */
.motion-preview.substack-scroll{ background:#0d0e12; }
.scroll-col{ position:relative; width:100%; }
.scroll-col img{ width:100%; display:block; }
.motion-preview.substack-scroll .scroll-col{
  position:absolute; top:0; left:0; animation:scrollDownSubstack 24s linear infinite;
}
@keyframes scrollDownSubstack{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-50%); } }

@media (prefers-reduced-motion: reduce){
  .scroll-track{ animation:none; }
  .motion-preview.substack-scroll .scroll-col{ animation:none; }
}

.project-info{ padding:1.6rem 1.8rem 2rem; transition:background 0.25s ease, color 0.25s ease; }
.project-card:hover .project-info, .project-card:has(.preview-link:hover) .project-info{ background:var(--ink); color:var(--white); }
.project-info h3{ font-family:'Anton', sans-serif; text-transform:uppercase; font-weight:400; font-size:1.45rem; color:inherit; letter-spacing:0.01em; }
.project-tags{
  font-family:'IBM Plex Mono'; font-size:0.72rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--brown);
  margin-top:0.5rem;
}
.project-tags a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.project-tags a:hover{ color:var(--brown); }

/* ---------- back link (project detail pages) ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none;
  font-family:'IBM Plex Mono'; font-size:0.75rem; color:var(--brown); opacity:0.85;
  margin-bottom:1.6rem;
}
.back-link:hover{ opacity:1; color:var(--blue-deep); }
.spec-row{
  display:flex; justify-content:space-between; gap:2rem; padding:0.9rem 0;
  border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono'; font-size:0.78rem;
}
.spec-row span:first-child{ color:var(--brown); flex-shrink:0; }
.spec-row span:last-child{ text-align:right; }

/* ---------- case study (Opus) ---------- */
.case-study{ background:var(--paper); border:1px solid var(--line); border-radius:0; padding:2.6rem; margin-top:0.5rem; box-shadow:0 8px 24px rgba(181,69,31,0.08); }
.case-title{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.9rem; }
.case-question{ font-size:1.05rem; line-height:1.65; opacity:0.8; margin-top:0.9rem; max-width:680px; }
.case-meta{ display:flex; gap:2.2rem; flex-wrap:wrap; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.case-meta div{ display:flex; flex-direction:column; gap:0.25rem; }
.case-meta .l{ font-family:'IBM Plex Mono'; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; opacity:0.55; }
.case-meta .v{ font-family:'IBM Plex Mono'; font-size:0.78rem; }

.case-block{ margin-top:2.4rem; }
.case-block h3{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.35rem; margin-bottom:0.9rem; color:var(--brown); }
.case-block p{ font-size:0.96rem; line-height:1.7; opacity:0.85; }
.case-block p + p{ margin-top:0.9rem; }

.research-columns{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1rem; }
@media (max-width:700px){ .research-columns{ grid-template-columns:1fr; } }
.research-col h4{ font-family:'IBM Plex Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--blue-deep); margin-bottom:0.7rem; }
.research-col ul{ list-style:none; }
.research-col li{ font-size:0.92rem; line-height:1.5; padding:0.5rem 0; border-bottom:1px solid var(--line); opacity:0.85; }

.feature-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.4rem; margin-top:1rem; }
@media (max-width:700px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-item{ background:var(--paper); border:1px solid var(--line); border-radius:0; padding:1.1rem 1.2rem; }
.feature-item h4{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:0.4rem; }
.feature-item p{ font-size:0.9rem; line-height:1.55; opacity:0.8; }

.case-list{ margin-top:0.6rem; padding-left:1.2rem; }
.case-list li{ font-size:0.94rem; line-height:1.7; opacity:0.85; margin-bottom:0.3rem; }

/* ---------- violin page ---------- */
.violin-grid{ display:grid; grid-template-columns:0.8fr 1.35fr; gap:3.2rem; align-items:start; }
@media (max-width:760px){ .violin-grid{ grid-template-columns:1fr; } }
.portrait-frame{
  border-radius:0; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(181,69,31,0.12);
}
.portrait-frame img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:3/4; }
.bio p{ line-height:1.75; opacity:0.85; font-size:0.98rem; }
.bio p + p{ margin-top:1.15rem; }

.awards{ list-style:none; margin-top:1.2rem; }
.awards li{
  padding:0.75rem 0; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; font-size:0.92rem;
}
.awards li .yr{ font-family:'IBM Plex Mono'; font-size:0.7rem; opacity:0.6; white-space:nowrap; color:var(--brown); }

.recordings{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:1rem; }
@media (max-width:760px){ .recordings{ grid-template-columns:1fr; } }
.recording{ padding:0.9rem; background:var(--paper); border:1px solid var(--line); border-radius:0; }
.recording-title{ font-family:'Anton', sans-serif; font-weight:600; font-size:0.85rem; margin-bottom:0.6rem; }
.video-frame{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:0; border:1px solid var(--line); }
.video-frame iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ---------- play page ---------- */
/* ---------- play page: bulletin board ---------- */
.bulletin-board{ padding:0; }

.board-grid{ display:grid; grid-template-columns:2fr 1fr; grid-template-rows:auto auto; gap:1.6rem; }
.board-grid .guide-card{ grid-column:1; grid-row:1; }
.board-grid .photo-card{ grid-column:2; grid-row:1; }
.board-grid .small-row{ grid-column:1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.board-grid .cardboard-card{ grid-column:2; grid-row:2; }
@media (max-width:820px){
  .board-grid{ grid-template-columns:1fr; }
  .board-grid .guide-card, .board-grid .photo-card, .board-grid .small-row, .board-grid .cardboard-card{ grid-column:1; }
  .board-grid .small-row{ grid-template-columns:1fr 1fr; }
}

.pinned{
  position:relative; background:var(--paper-card, var(--paper)); border:1px solid var(--line);
  border-radius:0; box-shadow:0 8px 18px rgba(0,0,0,0.18);
  transform:rotate(var(--tilt, 0deg)); transition:transform 0.2s ease, box-shadow 0.2s ease;
}
a.pinned:hover{ transform:rotate(0deg) translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,0.24); }
.pin-dot{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--blue-deep) 55%, var(--brown-deep));
  box-shadow:0 3px 5px rgba(0,0,0,0.35); z-index:2;
}

/* guide-style substack card */
.guide-card{ --tilt:-1deg; padding:2rem; color:var(--white); text-decoration:none;
  background:linear-gradient(160deg, var(--brown-deep), var(--blue-deep));
  min-height:260px; display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid rgba(255,255,255,0.25);
}
.guide-card .corner{ position:absolute; width:16px; height:16px; border-color:rgba(255,255,255,0.6); border-style:solid; }
.guide-card .corner.tl{ top:10px; left:10px; border-width:2px 0 0 2px; }
.guide-card .corner.br{ bottom:10px; right:10px; border-width:0 2px 2px 0; }
.guide-card .g-eyebrow{ font-family:'IBM Plex Mono'; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; }
.guide-card h3{ font-family:'Anton', sans-serif; font-weight:700; font-size:2rem; color:var(--white); margin-top:0.5rem; }
.guide-card p{ opacity:0.88; margin-top:0.6rem; max-width:380px; font-size:0.95rem; line-height:1.5; }
.guide-card .g-preview{ margin-top:1.1rem; border-top:1px solid rgba(255,255,255,0.25); padding-top:0.7rem; }
.guide-card .g-post{
  display:flex; justify-content:space-between; gap:1rem; padding:0.4rem 0;
  border-bottom:1px solid rgba(255,255,255,0.12); font-size:0.82rem;
}
.guide-card .g-post:last-child{ border-bottom:none; }
.guide-card .g-post-title{ opacity:0.92; }
.guide-card .g-post-date{ font-family:'IBM Plex Mono'; font-size:0.68rem; opacity:0.6; white-space:nowrap; }
.guide-card .g-cta{
  margin-top:1.4rem; font-family:'IBM Plex Mono'; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--blue); display:flex; align-items:center; gap:0.4rem;
}

/* landscape photography card */
.photo-card{ --tilt:1.2deg; position:relative; overflow:hidden; min-height:260px; text-decoration:none; display:block; }
.photo-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(28,22,16,0.82), transparent 60%); }
.photo-card .pc-content{ position:absolute; left:1.2rem; right:1.2rem; bottom:1.1rem; z-index:2; color:var(--white); }
.photo-card h3{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.2rem; color:var(--white); }
.photo-card p{ font-size:0.78rem; opacity:0.85; margin-top:0.2rem; }

/* small pinned cards (escape room, modeling, cardboard violin) */
.small-card{ padding:1.2rem; }
.small-card:nth-child(1){ --tilt:-1.6deg; }
.small-card:nth-child(2){ --tilt:1.4deg; }
.cardboard-card{ --tilt:-1deg; padding:1.2rem; }
.small-card .sc-thumb, .cardboard-card .sc-thumb{ aspect-ratio:4/3; border-radius:0; margin-bottom:0.8rem; overflow:hidden; border:1px solid var(--line); }
.small-card .sc-thumb img, .cardboard-card .sc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.small-card h3, .cardboard-card h3{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.05rem; }
.small-card p, .cardboard-card p{ font-size:0.82rem; opacity:0.75; margin-top:0.3rem; line-height:1.45; }

/* ---------- about page ---------- */
.about-hero{
  padding:6rem 2.4rem 4rem; max-width:1080px; margin:0 auto; position:relative;
}
.about-grid{ display:grid; grid-template-columns:1.3fr 0.85fr; gap:3.2rem; align-items:center; margin-top:0.5rem; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo-frame{
  position:relative; border-radius:0; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(181,69,31,0.12); aspect-ratio:3/4;
}
.about-photo-frame img{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
  transition:opacity 0.4s ease;
}
.about-photo-frame img.photo-base{ object-position:55% 25%; opacity:1; }
.about-photo-frame img.photo-hover{ object-position:50% 20%; opacity:0; }
.about-photo-frame:hover img.photo-hover{ opacity:1; }
.about-hero h1{
  font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem, 6vw, 4.2rem); line-height:0.95;
}
.about-hero h1 .highlight{ font-family:'Newsreader', serif; font-style:italic; font-weight:500; text-transform:none; color:var(--blue); font-size:1.2em; }
.about-bio{ max-width:560px; margin-top:1.4rem; font-size:1.03rem; line-height:1.75; opacity:0.82; }
.about-bio p + p{ margin-top:1rem; }
.about-links{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.about-links a{
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem; text-decoration:none;
  padding:0.85rem 1.4rem; border-radius:0; border:2px solid var(--ink);
  transition:all 0.2s ease;
}
.about-links a:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:var(--white); }

/* ---------- media carousel (violin page): drag or scroll horizontally ---------- */
.scroll-hint{
  display:flex; align-items:center; gap:0.4rem; font-family:'IBM Plex Mono'; font-size:0.72rem;
  color:var(--blue); opacity:0.85; margin-top:0.6rem; letter-spacing:0.02em;
}
.carousel-wrap{ margin-top:0.8rem; }
.carousel-viewport{
  overflow-x:auto; overflow-y:hidden; cursor:grab; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; padding-bottom:0.4rem;
}
.carousel-viewport.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.carousel-viewport::-webkit-scrollbar{ height:5px; }
.carousel-viewport::-webkit-scrollbar-track{ background:transparent; }
.carousel-viewport::-webkit-scrollbar-thumb{ background:var(--line); border-radius:0; }
.media-carousel-track{ display:flex; gap:1.4rem; width:max-content; }
.carousel-item{ flex:0 0 220px; scroll-snap-align:start; display:flex; flex-direction:column; gap:0.6rem; }
@media (min-width:700px){ .carousel-item{ flex-basis:250px; } }
.carousel-item .photo-box{
  width:100%; aspect-ratio:3/4; border-radius:0; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 6px 18px rgba(181,69,31,0.1);
}
.carousel-item .photo-box img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-item .cap{ font-family:'IBM Plex Mono'; font-size:0.7rem; opacity:0.65; text-align:center; }

.gallery-strip.two-col{ grid-template-columns:repeat(2, 1fr); }
.gallery-strip.four-col{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:820px){ .gallery-strip.four-col{ grid-template-columns:repeat(2, 1fr); } }
/* ---------- case study: findings & design opportunities ---------- */
.finding{ margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.finding:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.finding-head{ display:flex; align-items:center; gap:0.7rem; }
.finding-num{
  flex-shrink:0; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--brown-deep);
  color:var(--white); font-family:'IBM Plex Mono'; font-size:0.75rem; display:flex;
  align-items:center; justify-content:center;
}
.finding h4{ font-family:'Anton', sans-serif; font-weight:600; font-size:1.05rem; }
.finding p{ font-size:0.92rem; line-height:1.6; opacity:0.85; margin-top:0.5rem; }
.opportunity{
  background:rgba(181,69,31,0.1); border-left:3px solid var(--blue);
  padding:0.8rem 1.1rem; margin-top:0.7rem; border-radius:0; font-size:0.88rem; line-height:1.55;
  color:var(--ink);
}
.opportunity strong{ color:var(--blue); font-family:'IBM Plex Mono'; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.03em; }

.quad-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
@media (max-width:600px){ .quad-grid{ grid-template-columns:1fr; } }
.quad{ padding:1.1rem 1.3rem; border-radius:0; }
.quad.green{ background:rgba(111,181,107,0.14); border:1px solid rgba(111,181,107,0.35); }
.quad.blue{ background:rgba(181,69,31,0.1); border:1px solid rgba(181,69,31,0.28); }
.quad.yellow{ background:rgba(232,184,75,0.16); border:1px solid rgba(232,184,75,0.35); }
.quad.red{ background:rgba(209,107,107,0.14); border:1px solid rgba(209,107,107,0.3); }
.quad h4{ font-family:'IBM Plex Mono'; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; opacity:0.8; }
.quad ul{ margin-top:0.6rem; padding-left:1.1rem; font-size:0.86rem; line-height:1.5; }
.quad li{ margin-bottom:0.2rem; }

.figure-row{ display:flex; gap:1.1rem; margin-top:1.2rem; flex-wrap:wrap; }
.figure-block{ flex:1 1 220px; max-width:260px; opacity:0.88; transition:opacity 0.2s ease, transform 0.2s ease; }
.figure-block:hover{ opacity:1; transform:translateY(-2px); }
.figure-block img{ width:100%; border:1px solid var(--line); border-radius:0; box-shadow:0 4px 12px rgba(181,69,31,0.08); }
.figure-block figcaption{ font-family:'IBM Plex Mono'; font-size:0.68rem; opacity:0.6; margin-top:0.5rem; line-height:1.45; }

.case-note{ font-style:italic; opacity:0.65; font-size:0.85rem; margin-top:2rem; }

/* ---------- before/after comparison ---------- */
.compare-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.2rem; }
@media (max-width:760px){ .compare-pair{ grid-template-columns:1fr; } }
.compare-item{ display:flex; flex-direction:column; gap:0.6rem; }
.compare-tag{
  display:inline-flex; width:fit-content; font-family:'IBM Plex Mono'; font-size:0.68rem;
  font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:0.3rem 0.7rem; border-radius:0;
}
.compare-tag.before{ color:#b23b3b; background:#fbe9e9; }
.compare-tag.after{ color:#2c6e3f; background:#e7f5ea; }
.compare-item img{ width:100%; border:1px solid var(--line); border-radius:0; box-shadow:0 6px 16px rgba(181,69,31,0.08); }
.compare-caption{ font-size:0.83rem; opacity:0.8; line-height:1.5; }

.gallery-item{ display:flex; flex-direction:column; gap:0.5rem; }
.gallery-item img{
  width:100%; height:auto; display:block; border-radius:0;
  border:1px solid var(--line); box-shadow:0 4px 14px rgba(181,69,31,0.08);
}
.gallery-item .cap{ font-family:'IBM Plex Mono'; font-size:0.68rem; opacity:0.6; text-align:center; }

/* ---------- footer ---------- */
footer{ background:var(--brown-deep); color:var(--white); padding:3rem 2.4rem; margin-top:2rem; }
.footer-inner{
  max-width:1080px; margin:0 auto; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:1.2rem;
}
.footer-nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-nav a{ font-family:'IBM Plex Mono'; font-size:0.72rem; text-decoration:none; opacity:0.8; }
.footer-nav a:hover{ opacity:1; color:var(--blue); }
.footer-copy{ font-family:'IBM Plex Mono'; font-size:0.68rem; opacity:0.6; }
.footer-copy a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-copy a:hover{ color:var(--brown); opacity:1; }

/* ============================================================
   Interactive calendar demo (Apple Calendar case study)
   Namespaced with wi- (week interactive) / mi- (month interactive)
   to avoid clashing with the rest of the site's styles. Uses a
   system font to look like an actual calendar app UI.
   ============================================================ */

.mini-before{ max-width:300px; opacity:0.85; margin:0.8rem 0 1.2rem; }
.mini-before img{ width:100%; border:1px solid var(--line); border-radius:0; box-shadow:0 4px 12px rgba(181,69,31,0.08); }
.mini-before .compare-tag{ margin-bottom:0.5rem; }

.toggle-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin:1rem 0 1.3rem; }
.opt-toggle{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem; padding:0.55rem 1rem; border:1px solid var(--line); border-radius:0;
  cursor:pointer; background:var(--paper); transition:all 0.2s ease; user-select:none;
}
.opt-toggle input{ accent-color:var(--blue-deep); }
.opt-toggle:has(input:checked){ background:var(--blue-deep); color:var(--white); border-color:var(--blue-deep); }

.wi-frame, .mi-frame{
  font-family:'Helvetica Neue', Arial, sans-serif; border:1px solid var(--line); border-radius:0;
  overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(181,69,31,0.1);
}
.wi-topbar, .mi-topbar{
  display:flex; align-items:center; justify-content:space-between; padding:8px 14px;
  border-bottom:1px solid #e5e6ea; font-size:10px; color:#444;
}
.wi-topbar .wi-icons, .mi-topbar .mi-icons{ display:flex; gap:8px; }
.wi-dot{ width:13px; height:13px; border-radius:0; background:#e2483f; display:inline-block; }
.wi-dot2{ width:13px; height:13px; border-radius:0; background:#c7c9cf; display:inline-block; }
.wi-segctrl, .mi-segctrl{ display:flex; border:1px solid #d8dade; border-radius:0; overflow:hidden; font-size:9px; }
.wi-segctrl span, .mi-segctrl span{ padding:3px 8px; color:#666; }
.wi-segctrl span.active, .mi-segctrl span.active{ background:#e9edf5; color:#16233d; font-weight:700; }
.wi-monthtitle, .mi-monthtitle{ font-size:16px; font-weight:700; color:#16233d; padding:10px 14px 4px; }
.wi-legend{ display:flex; gap:10px; padding:4px 14px 6px; font-size:7.5px; color:#666; flex-wrap:wrap; }
.wi-legend span.sw{ display:inline-block; width:8px; height:8px; border-radius:0; margin-right:3px; vertical-align:-1px; }

.wi-gridwrap{ padding:0 14px 14px; }
.wi-dayheader{ position:relative; height:18px; border-bottom:1px solid #e5e6ea; margin-bottom:2px; }
.wi-dh{ position:absolute; top:0; width:calc((100% - 38px)/7); text-align:center; font-size:9px; color:#8a8f99; }
.wi-dh.weekend{ color:#3a5a8f; font-weight:700; }
.wi-viewport{ position:relative; height:716px; overflow:hidden; }
.wi-weekendcol{
  position:absolute; top:0; bottom:0; background:#eef2f9; z-index:0; opacity:0; transition:opacity 0.3s ease;
}
.wi-weekend-on .wi-weekendcol{ opacity:1; }
.wi-sleepband{
  position:absolute; top:0; left:38px; right:0; height:36px;
  background:repeating-linear-gradient(135deg,#e7edf6,#e7edf6 6px,#dbe4f2 6px,#dbe4f2 12px);
  border-top:1px solid #cfd8e8; border-bottom:1px solid #cfd8e8; display:flex; align-items:center;
  justify-content:center; font-size:8.5px; color:#5a6b8c; z-index:1; transition:height 0.5s ease;
}
.wi-collapse-off .wi-sleepband{ height:280px; }
.wi-eventslayer{ position:absolute; top:0; left:0; right:0; transition:transform 0.5s ease; transform:translateY(0px); }
.wi-collapse-off .wi-eventslayer{ transform:translateY(244px); }
.wi-gridline{ position:absolute; left:38px; right:0; height:1px; background:#f0f1f3; }
.wi-tlabel{ position:absolute; left:0; width:34px; font-size:7px; color:#aeb2ba; text-align:right; }
.wi-event{
  position:absolute; border-radius:0; padding:2px 4px; font-size:7.6px; line-height:1.15;
  overflow:hidden; color:#fff; z-index:2; transition:top 0.5s ease;
}
.wi-hierarchy-on .wi-event[data-bold="1"]{ font-weight:800; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.85); }
.wi-hierarchy-on .wi-event[data-italic="1"]{ font-style:italic; opacity:0.82; }
.wi-c-academics{ background:#4a86e0; } .wi-c-violin{ background:#9b6bc7; } .wi-c-research{ background:#e3934f; }
.wi-c-social{ background:#3fb1c2; } .wi-c-personal{ background:#9099a8; } .wi-c-deadline{ background:#2f3f66; }
.wi-now{ position:absolute; z-index:5; height:2px; background:#e2483f; transition:all 0.4s ease; }
.wi-nowdot{ position:absolute; z-index:5; width:8px; height:8px; margin-top:-3px; margin-left:-4px; border-radius:50%; background:#e2483f; transition:all 0.4s ease; }
.wi-nowlabel{ position:absolute; z-index:5; width:34px; text-align:right; font-size:7px; color:#e2483f; font-weight:700; opacity:0; transition:opacity 0.3s ease; }
.wi-now-hi .wi-now{ height:3px; box-shadow:0 0 4px rgba(226,72,63,0.6); }
.wi-now-hi .wi-nowdot{ width:10px; height:10px; margin-top:-4px; margin-left:-5px; }
.wi-now-hi .wi-nowlabel{ opacity:1; }

/* month interactive */
.mi-dayheader{ display:grid; grid-template-columns:repeat(7,1fr); padding:0 6px; border-bottom:1px solid #e5e6ea; }
.mi-dayheader div{ font-size:9px; color:#8a8f99; text-align:center; padding-bottom:3px; }
.mi-dayheader div.weekend{ color:#3a5a8f; font-weight:700; }
.mi-grid{ display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:78px; padding:0 6px 10px; }
.mi-cell{ border:0.5px solid #eceef1; padding:3px 4px; position:relative; overflow:hidden; }
.mi-cell.dim{ background:#fafafb; color:#c3c6cc; }
.mi-weekend-on .mi-cell.wknd{ background:#f2f5fb; }
.mi-daynum{ font-size:9px; font-weight:700; color:#333; }
.mi-daynum.today{ background:#e2483f; color:#fff; border-radius:50%; width:15px; height:15px; display:inline-flex; align-items:center; justify-content:center; font-size:8px; }
.mi-datenum-row{ display:flex; justify-content:flex-start; }
.mi-datenum-on .mi-datenum-row{ position:absolute; top:2px; right:3px; justify-content:flex-end; }
.mi-banner{ background:#8a93a3; color:#fff; font-size:6.6px; font-weight:700; padding:1px 3px; border-radius:0; margin-top:1px; display:inline-block; }
.mi-ribbon-on .mi-cell.wbreak{ padding-top:6px; }
.mi-ribbon-on .mi-cell.wbreak .mi-banner{
  position:absolute; top:0; left:0; right:0; height:4px; background:#9aa5c4; color:transparent;
  padding:0; border-radius:0; font-size:0;
}
.mi-ribbon-on .mi-cell.wbreak .mi-banner::after{
  content:attr(data-label); position:absolute; top:6px; left:4px; font-size:6px; font-weight:700;
  color:#5a6b8c; letter-spacing:0.2px;
}
.mi-icons{ display:none; gap:2px; margin:2px 0 2px; }
.mi-icons-on .mi-icons{ display:flex; }
.mi-icondot{ width:5px; height:5px; border-radius:50%; }
.mi-dot-academics{ background:#4a86e0; } .mi-dot-violin{ background:#9b6bc7; } .mi-dot-social{ background:#3fb1c2; }
.mi-dot-personal{ background:#9099a8; } .mi-dot-birthday{ background:#d9548a; } .mi-dot-deadline{ background:#2f3f66; }
.mi-ev{ font-size:6.4px; color:#333; margin-top:1px; padding:0.5px 2px; border-radius:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mi-c-academics{ background:#dbe7fb; color:#20418c; } .mi-c-violin{ background:#ecdff5; color:#5c3577; }
.mi-c-social{ background:#dbf3f6; color:#1c6672; } .mi-c-personal{ background:#e8eaed; color:#4a4f59; }
.mi-c-birthday{ background:#fbdfe9; color:#8c2f52; } .mi-c-deadline{ background:#dde2ec; color:#2f3f66; }
.mi-legend{ display:flex; gap:10px; padding:0 14px 6px; font-size:7.5px; color:#666; flex-wrap:wrap; }
.mi-legend span.sw{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:3px; vertical-align:-1px; }

@media (max-width:640px){
  .wi-viewport{ height:520px; }
  .wi-event{ font-size:6.6px; }
  .mi-grid{ grid-auto-rows:60px; }
  .mi-ev{ font-size:5.6px; }
}

/* ---------- hover tooltip term (e.g. "Systems Design") ---------- */
.term-tip{
  text-decoration:underline; text-decoration-style:dotted; text-decoration-color:currentColor;
  text-decoration-thickness:1px; text-underline-offset:3px; cursor:help; position:relative;
  z-index:500;
}
.tip-bubble{
  position:absolute; top:135%; left:0; width:230px; white-space:normal; line-height:1.4;
  background:var(--brown-deep); color:var(--white); font-family:'Inter', sans-serif; font-size:0.72rem;
  padding:0.6rem 0.8rem; border-radius:0; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.2s ease; z-index:9999; text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.term-tip:hover .tip-bubble, .term-tip:focus .tip-bubble{ opacity:1; visibility:visible; }

/* ---------- case study preview strip (top of page) ---------- */
.preview-strip{ display:flex; gap:1rem; margin:1.6rem 0 0.4rem; }
.preview-strip img{
  flex:1; width:50%; border:1px solid var(--line); border-radius:0;
  box-shadow:0 8px 22px rgba(181,69,31,0.12);
}
@media (max-width:640px){ .preview-strip{ flex-direction:column; } .preview-strip img{ width:100%; } }

/* ============================================================
   Zoomable images + lightbox (photography, case studies, violin)
   Cursor is a custom circle-plus icon; click opens a full-screen
   lightbox; close via the X button, Escape key, or clicking outside.
   ============================================================ */
img.zoomable{
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2234%22%20height%3D%2234%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%2214%22%20fill%3D%22rgba%2828%2C22%2C16%2C0.72%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M17%2011v12M11%2017h12%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 17 17, zoom-in;
}
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(15,12,8,0.92); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:3rem 2rem;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease;
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-img{
  max-width:90vw; max-height:88vh; border-radius:0; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  cursor:default;
}
.lightbox-close{
  position:fixed; top:1.4rem; right:1.4rem; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.3);
  font-size:1.7rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease; z-index:1001;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.25); }