@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap");
/* The fixed frame (2026-10-24): one sidebar that never moves, one stage
   that turns to a section at a time. Loaded on the home page and, through
   shell.js, on case and writing pages. */
:root { --side: clamp(230px, 19vw, 290px); }

.shell-side {
  --paper: #fff;
  --ink: #262626;
  --soft: rgba(38, 38, 38, 0.42);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: var(--side);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 26px 26px;
  background: var(--paper);
  color: var(--ink);
  border-right: 1px solid rgba(38, 38, 38, 0.14);
  font-family: "Hanken Grotesk", sans-serif;
}
.shell-side a { color: inherit; text-decoration: none; }
.shell-side .shell-side__top { display: grid; gap: 22px; flex-shrink: 0; }
.shell-side .shell-side__brand { display: flex; align-items: center; gap: 12px; font: 400 22px/1 "Instrument Serif", "Times New Roman", serif; }
.shell-side .shell-side__brand svg { width: 56px; height: auto; stroke: currentColor; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.shell-side .shell-side__brand svg circle { fill: currentColor; stroke: none; }
.shell-side .shell-side__where {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}
.shell-side .shell-side__where [data-clock] { color: var(--ink); font-variant-numeric: tabular-nums; }
.shell-side .shell-side__menu { display: none; }

.shell-side .shell-side__nav { display: grid; gap: 18px; }
.shell-side .shell-side__nav a { display: grid; gap: 5px; color: var(--soft); transition: color 300ms ease; }
.shell-side .shell-side__nav strong {
  font: 400 clamp(38px, 3.3vw, 54px)/0.9 "Instrument Serif", "Times New Roman", serif;
  letter-spacing: -0.01em;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}
.shell-side .shell-side__nav small { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.shell-side .shell-side__nav a:hover strong { transform: translateX(6px); }
.shell-side .shell-side__nav a:hover,
.shell-side .shell-side__nav a.is-current { color: var(--ink); }


.shell-side .shell-side__foot { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.shell-side .shell-side__foot a { border-bottom: 1px solid transparent; }
.shell-side .shell-side__foot a:hover { border-color: currentColor; }

/* The stage sits beside the frame. */
body.has-shell { padding-left: var(--side); }
body.has-shell .line-nav.case-nav,
body.has-shell > .topbar { display: none; }

/* Home: one view at a time, arriving with a short rise. */
.stage { min-height: 100vh; }
.view[hidden] { display: none; }
.view { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.view.is-shown { opacity: 1; transform: none; }

/* The cover is the old opening set, laid over everything until you enter. */
.cover {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: grid;
  align-content: center;
  background: var(--paper);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform 900ms cubic-bezier(.7,0,.2,1), visibility 0s linear 900ms;
}
body.at-cover .cover { transform: none; visibility: visible; transition: transform 900ms cubic-bezier(.7,0,.2,1); }
body.at-cover { overflow: hidden; }
.cover .hero { min-height: 100vh; }
.cover__enter {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  background: none;
  font: 500 12px/1 "Hanken Grotesk", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.cover__enter span { display: inline-block; animation: drop 2s ease-in-out infinite; }
@keyframes drop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Home intro: a wordmark, and project heroes arriving from the four sides. */
.intro { position: relative; background: #fff; }
.intro__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.intro__mark {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  font: 400 calc((100vw - var(--side)) * 0.3)/0.8 "Instrument Serif", "Times New Roman", serif;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  animation: mark-in 1200ms cubic-bezier(.2,.8,.2,1) both;
}
.intro__mark span { font-family: var(--script); font-size: 0.62em; letter-spacing: 0; }
@keyframes mark-in { from { opacity: 0; letter-spacing: 0.05em; } to { opacity: 1; letter-spacing: -0.03em; } }
.intro__side {
  position: absolute;
  top: 32px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  animation: mark-in 900ms ease 500ms both;
}
.intro__side--l { left: clamp(24px, 3vw, 48px); }
.intro__side--r { right: clamp(24px, 3vw, 48px); text-align: right; }
.intro__deck { position: absolute; inset: 0; }
.intro__card {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  overflow: hidden;
  will-change: transform, clip-path;
}
/* Each hero keeps its own proportions: nothing is cropped to fit a box. */
.intro__card img { display: block; width: auto; height: auto; max-width: min(52vw, 820px); max-height: 64vh; }
.intro__cap {
  position: absolute;
  z-index: 50;
  left: clamp(24px, 3vw, 48px);
  right: clamp(24px, 3vw, 48px);
  bottom: 28px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.intro__cap [data-intro-name] { font: 400 clamp(28px, 2.6vw, 42px)/1 "Instrument Serif", serif; }
.intro__cap [data-intro-kind] { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.intro__cap.is-swap > * { animation: cap-in 600ms cubic-bezier(.2,.8,.2,1) both; }
.intro__cap.is-swap > *:last-child { animation-delay: 120ms; }
@keyframes cap-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.intro.has-card .intro__mark { color: rgba(38, 38, 38, 0.9); }
.view[data-view="home"] .positioning { position: relative; }
.intro__all {
  display: inline-block;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

/* Work: the index runs the full width of the stage now that the frame holds the intro. */
.studio.studio--solo { display: block; }

/* Writing (rules, 2026-10-24): one living method first, then the papers.
   A row reads number / title + subtitle / field and length, in the
   index-card grammar of constanzacoscia.xyz; the cover shows in its own
   column at its own proportions, never hanging off the edge. */
.writing-view { padding: 140px clamp(36px, 6vw, 120px) 120px; }
.view-head { display: grid; gap: 14px; margin-bottom: 56px; max-width: 760px; }
.view-head h2 { margin: 0; font: 400 clamp(40px, 4.4vw, 72px)/0.95 "Instrument Serif", serif; }
.view-head__note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--soft); max-width: 52ch; }
.shelf-index { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 280px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.shelf-index__group { margin: 44px 0 10px; font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.shelf-index__group:first-child { margin-top: 0; }
.shelf-index__list a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(230px, 0.5fr);
  align-items: baseline;
  gap: 18px;
  padding: 16px 0 18px;
  border-top: 1px solid rgba(38, 38, 38, 0.12);
  color: var(--ink);
  text-decoration: none;
}
.shelf__num { font: 400 12px/1 "Roboto Mono", ui-monospace, monospace; color: var(--soft); transition: color 300ms ease; }
.shelf__title { display: grid; gap: 6px; }
.shelf__title strong { font: 400 clamp(22px, 2vw, 30px)/1.05 "Instrument Serif", serif; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.shelf__title small { font-size: 13px; line-height: 1.45; color: var(--soft); }
.shelf__meta { font: 400 11px/1.6 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.02em; text-transform: uppercase; color: var(--soft); }
.shelf-index__list a:hover .shelf__num { color: var(--ink); }
.shelf-index__list a:hover .shelf__title strong { transform: translateX(8px); font-style: italic; }
.shelf-index__list a.is-method strong { font-style: italic; }
.shelf-index__cover { position: sticky; top: 140px; margin: 0; opacity: 0; transition: opacity 300ms ease; }
.shelf-index__cover img { display: block; width: 100%; height: auto; border: 1px solid rgba(38, 38, 38, 0.1); }
.shelf-index.is-peeking .shelf-index__cover { opacity: 1; }
@media (max-width: 1100px) {
  .shelf-index { grid-template-columns: 1fr; }
  .shelf-index__cover { display: none; }
  .shelf-index__list a { grid-template-columns: 44px minmax(0, 1fr); }
  .shelf__meta { grid-column: 2; }
}

/* Phones: the frame becomes a bar along the top with a full-screen menu. */
@media (max-width: 860px) {
  body.has-shell { padding-left: 0; padding-top: 58px; }
  .shell-side {
    inset: 0 0 auto 0;
    width: auto;
    height: 58px;
    padding: 0 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(38, 38, 38, 0.14);
    overflow: hidden;
    transition: height 600ms cubic-bezier(.7,0,.2,1);
  }
  .shell-side .shell-side__top { grid-template-columns: auto 1fr auto; align-items: center; height: 58px; gap: 12px; }
  .shell-side .shell-side__where { font-size: 10px; text-align: right; }
  .shell-side .shell-side__where br { display: none; }
  .shell-side .shell-side__menu {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font: 500 12px/1 "Hanken Grotesk", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .shell-side .shell-side__nav, .shell-side .shell-side__foot { opacity: 0; transition: opacity 300ms ease; }
  .shell-side.is-open { height: 100vh; padding-bottom: 28px; }
  .shell-side.is-open .shell-side__nav, .shell-side.is-open .shell-side__foot { opacity: 1; transition-delay: 250ms; }
  .shell-side .shell-side__nav strong { font-size: 52px; }
  .intro__card { width: 84%; aspect-ratio: 4 / 5; }
  .intro__mark { font-size: 27vw; }
  .intro__side { font-size: 9px; top: 18px; }
  .paper-list__cover { display: none; }
  .writing-view { padding: 72px 18px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .view, .cover, .shell-side { transition: none; }
  .intro__mark, .intro__side, .cover__enter span { animation: none; }
}

/* Before the first card lands, the caption invites a scroll. */
.intro:not(.has-card) .intro__cap::before {
  content: "Scroll to open the work";
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
  animation: mark-in 900ms ease 900ms both;
}
.intro__deck { transition: opacity 300ms linear; }

/* Home: the two lines read as a magazine standfirst, not a headline. */
.view[data-view="home"] .positioning { min-height: 80vh; padding: 140px clamp(36px, 6vw, 120px); display: grid; align-content: center; }
.view[data-view="home"] .positioning p {
  max-width: 18ch;
  font: 400 clamp(40px, 4.6vw, 76px)/1.02 "Instrument Serif", "Times New Roman", serif;
  letter-spacing: -0.01em;
  text-transform: none;
}
.view[data-view="home"] .positioning > span { margin-top: 32px; max-width: 46ch; font-size: 15px; line-height: 1.55; }
.view[data-view="home"] .intro__all { justify-self: start; }

/* Contact: a short list, and the old television kept small beside it. */
.contact-page { min-height: 100vh; padding: 140px clamp(36px, 6vw, 120px) 80px; }
.contact-page__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.contact-page__list { margin: 0; border-top: 1px solid var(--line); }
.contact-page__list div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-page__list dt { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.contact-page__list dd { margin: 0; font: 400 clamp(20px, 1.8vw, 28px)/1.2 "Instrument Serif", serif; }
.contact-page__list a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 400ms cubic-bezier(.2,.8,.2,1); }
.contact-page__list a:hover { background-size: 100% 1px; }
.ctv { position: relative; margin: 0; aspect-ratio: 2048 / 1080; }
.ctv__screen { position: absolute; left: 0.6%; top: 13.4%; width: 67.2%; height: 82.4%; overflow: hidden; border-radius: 0 0 7% 7% / 0 0 7% 7%; background: #030303; }
.ctv__screen video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.18) brightness(0.6); }
.ctv__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: saturate(0.92) contrast(1.05) brightness(0.9); }
@media (max-width: 860px) {
  .contact-page { padding: 72px 18px 56px; }
  .contact-page__grid { grid-template-columns: 1fr; }
  .contact-page__list div { grid-template-columns: 72px 1fr; }
}

@media (max-width: 860px) {
  :root { --side: 0px; }
  .shell-side { justify-content: flex-start; }
  .shell-side .shell-side__nav { margin-top: auto; }
  .shell-side .shell-side__foot { margin-top: auto; }
  .shell-side .shell-side__city { display: none; }
  .shell-side .shell-side__brand { font-size: 20px; }
}

/* Case pages close on the next project, not a second contact block. */
body.cv3-page .contact-tv { display: none; }
.next-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px 24px;
  min-height: 46vh;
  padding: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 64px);
  background: var(--card);
  color: #262626;
  text-decoration: none;
  overflow: hidden;
}
.next-band small { grid-column: 1 / -1; align-self: start; font: 500 11px/1 "Hanken Grotesk", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.next-band strong { font: 400 clamp(56px, 8vw, 140px)/0.9 "Instrument Serif", "Times New Roman", serif; letter-spacing: -0.02em; transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.next-band span { font: 400 clamp(40px, 5vw, 80px)/1 "Instrument Serif", serif; transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.next-band:hover strong { transform: translateX(14px); }
.next-band:hover span { transform: translateX(20px); }

/* White pass (2026-10-24): one clean white ground everywhere, after
   constanzacoscia.xyz. The paper lines and dot screen are gone, and project
   colour survives only as a small square beside each number. */
body.has-shell { --paper: #fff; background: #fff; }
body.has-shell::after { display: none; }
.cover { --paper: #fff; }
.work-strip { background: #fff; }
.studio { --wash: transparent !important; }

/* At a glance: every image at its own proportions, all on one baseline. */
.work-strip__track { align-items: flex-end; }
.strip-card { --tall: min(58vh, 640px); width: auto; min-width: 220px; height: auto; max-height: none; grid-template-rows: auto auto; align-self: end; }
.strip-card__media { background: none; height: var(--tall); display: flex; align-items: flex-end; }
.strip-card__media img,
.strip-card__media.is-contain img { width: auto; max-width: 56vw; height: auto; max-height: var(--tall); object-fit: initial; padding: 0; }
.strip-card__num::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px; background: var(--card); }
.strip-card__foot { grid-template-columns: auto 1fr auto; gap: 14px; }
.work-strip__pin { grid-template-rows: auto auto auto; align-content: center; padding: 48px 0 32px; }
.work-strip__hint { margin-top: 28px; }

/* Small type (2026-10-24): labels, captions and the sidebar's small lines
   are set in Roboto Mono beside Instrument Serif, the mono/display pairing of
   constanzacoscia.xyz. Running paragraphs stay in Hanken Grotesk. */
:root { --mono: "Roboto Mono", ui-monospace, monospace; }
.shell-side .shell-side__where,
.shell-side .shell-side__nav small,
.shell-side .shell-side__foot,
.shell-side .shell-side__menu,
.cover__enter,
.intro__side,
.intro__cap [data-intro-kind],
.intro__all,
.work-strip__hint,
.strip-card__num,
.strip-card__tag,
.profile__eyebrow,
.next-band small { font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; }
.strip-card__num { font-size: 12px; }

/* Sidebar: the current section sits on a black bar with its name reversed
   out, and the bar runs in from the left on hover (mariamarago.com). */
.shell-side .shell-side__nav strong { position: relative; z-index: 0; justify-self: start; padding: 0 10px 2px 4px; margin-left: -4px; transition: color 400ms cubic-bezier(.7,0,.2,1), transform 400ms cubic-bezier(.2,.8,.2,1); }
.shell-side .shell-side__nav strong::before {
  content: "";
  position: absolute;
  inset: 4px 0 0;
  z-index: -1;
  background: #111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(.7,0,.2,1);
}
/* Only the current section carries the bar; hover just nudges the word. */
.shell-side .shell-side__nav a:not(.is-current):hover strong { transform: translateX(6px); }
.shell-side .shell-side__nav a.is-current strong { color: #fff; }
.shell-side .shell-side__nav a.is-current strong::before { transform: scaleX(1); }

/* Cursor (mariamarago.com): a small dot that inverts whatever it crosses,
   trails the pointer a little, and swells over anything clickable. */
html.has-dot, html.has-dot * { cursor: none !important; }
html.has-dot input, html.has-dot textarea, html.has-dot select { cursor: text !important; }
.dot-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: width 220ms ease, height 220ms ease, opacity 300ms ease, transform 250ms cubic-bezier(.22,1,.36,1);
}
.dot-cursor.is-on { opacity: 1; }
.dot-cursor.is-big { width: 46px; height: 46px; }
.dot-cursor.is-down { transform: translate(-50%, -50%) scale(1.4); transition: width 220ms ease, height 220ms ease, transform 250ms cubic-bezier(.34,1.56,.64,1); }

/* Profile opening (2026-10-25): one landscape photo across the whole stage,
   the line printed into it with multiply, and "What I do" as a drawer that
   the scroll pulls out from the right and pushes back. */
.me-open { position: relative; height: 340vh; --dim: 0; }
.me-open__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #fff; }
.me-open__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; }
.me-open__pin::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: var(--dim); pointer-events: none; }
.me-open__words { position: absolute; left: clamp(28px, 4vw, 64px); right: clamp(28px, 4vw, 64px); bottom: clamp(28px, 5vh, 56px); z-index: 1; mix-blend-mode: multiply; color: #ff4a1c; }
.me-open__hi { margin: 0 0 10px; font: 400 13px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: #ff4a1c; }
.me-open__line { margin: 0; max-width: 14ch; font: 400 clamp(64px, 8.6vw, 150px)/0.86 "Instrument Serif", serif; letter-spacing: -0.02em; }
.me-open__hint { position: absolute; top: 28px; right: clamp(28px, 4vw, 64px); z-index: 1; margin: 0; font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }
.me-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(600px, 52%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 40px clamp(28px, 3.4vw, 52px);
  background: #fff;
  color: var(--ink);
  border-left: 1px solid rgba(38, 38, 38, 0.12);
  transform: translateX(102%);
  will-change: transform;
}
.me-drawer__lede { margin: 0; font: 400 clamp(19px, 1.5vw, 23px)/1.3 "Instrument Serif", serif; }
.me-drawer__table { margin: 0; border-top: 1px solid rgba(38, 38, 38, 0.18); }
.me-drawer__table div { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(38, 38, 38, 0.18); }
.me-drawer__table dt { font: 400 10.5px/1.6 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.me-drawer__table dd { margin: 0; font-size: 13px; line-height: 1.45; }
.me-drawer__skills { font: 400 18px/1.25 "Instrument Serif", serif !important; }
.me-drawer__link { align-self: start; font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #111; padding: 7px 10px; text-decoration: none; }

/* The story after it: paragraphs as blocks now, so a paragraph can carry a strip. */
.view[data-view="profile"] .profile { padding-top: 120px; }
.who p { margin: 0; }
.view[data-view="profile"] .who { font-size: clamp(28px, 3vw, 48px); }
.who__strip { display: flex; gap: 6px; margin-top: 22px; }
.who__strip img { height: 64px; width: auto; filter: grayscale(0.2); transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.who__strip img:hover { transform: translateY(-6px) rotate(-2deg); }

@media (max-width: 860px) {
  .me-open { height: auto; }
  .me-open__pin { position: relative; height: auto; overflow: visible; }
  .me-open__photo { position: relative; height: 70vh; }
  .me-open__pin::after { display: none; }
  .me-open__words { bottom: auto; top: calc(70vh - 220px); }
  .me-open__line { font-size: 54px; }
  .me-drawer { position: relative; width: auto; transform: none !important; border-left: 0; padding: 40px 18px; }
}
.shell-side .shell-side__now { display: inline-block; margin-top: 4px; color: var(--ink); text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { .shell-side .shell-side__now { display: none; } }

/* Work in progress (2026-10-25): one panel at the head of the strip, beside
   project 01. Newest first, -05 down to -01; only -05 is open. */
.wip-panel { flex: none; align-self: end; width: clamp(320px, 30vw, 440px); display: grid; gap: 14px; }
.wip-panel__head { margin: 0; font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.wip-panel__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(38, 38, 38, 0.16); }
.wip-panel__list li { border-bottom: 1px solid rgba(38, 38, 38, 0.16); }
.wip-panel__row { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; padding: 10px 0; color: var(--ink); text-decoration: none; }
.wip-panel__row span { grid-row: span 2; font: 400 12px/1.6 "Roboto Mono", ui-monospace, monospace; color: var(--soft); }
.wip-panel__row strong { font: 400 20px/1.1 "Instrument Serif", serif; }
.wip-panel__row em { font: 400 10.5px/1.6 "Roboto Mono", ui-monospace, monospace; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
a.wip-panel__row:hover strong { font-style: italic; }
.wip-panel__list li:not(.is-open) .wip-panel__row { color: rgba(38, 38, 38, 0.62); }
.wip-panel__media { display: block; padding: 0 0 14px 50px; }
.wip-panel__media img { display: block; width: 100%; height: auto; max-height: 30vh; object-fit: contain; object-position: left; }
@media (max-width: 760px) { .wip-panel { width: 82vw; scroll-snap-align: start; } }

/* Round 2026-10-25: profile slogan, skills folded inside their cell, the
   cut-out photo, and What I do on black running straight into the TV. */
.me-open__photo { object-position: 50% 45%; }
.me-open__sub { margin: 18px 0 0; max-width: 34ch; font: 400 clamp(20px, 1.9vw, 30px)/1.2 "Instrument Serif", serif; color: #ff4a1c; }
.me-drawer__skills { font: inherit !important; }
.me-drawer__skills details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.me-drawer__skills details summary::-webkit-details-marker { display: none; }
.me-drawer__skills details summary::after { content: "+"; font-family: "Roboto Mono", ui-monospace, monospace; }
.me-drawer__skills details[open] summary::after { content: "\2212"; }
.me-drawer__skills ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.me-drawer__skills li { font: 400 17px/1.3 "Instrument Serif", serif; }
.profile__frame img.is-cut { object-fit: contain; background: #fff; }

.view[data-view="profile"] .skill-section {
  --ink: #f4f2ee; --paper: #080808; --soft: rgba(244, 242, 238, 0.6);
  background: #080808; color: #f4f2ee;
}
.view[data-view="profile"] .skill-section .profile__eyebrow,
.view[data-view="profile"] .skill-section .skill-lead,
.view[data-view="profile"] .skill-section .skill-copy { color: #f4f2ee; }
.view[data-view="profile"] .skill-strips button { color: #f4f2ee; border-color: rgba(244, 242, 238, 0.7); }
.view[data-view="profile"] .skill-strips button:hover,
.view[data-view="profile"] .skill-strips button[aria-expanded="true"] { background: #f4f2ee; color: #080808; }
.view[data-view="profile"] .skill-section { opacity: 1; transform: none; }
.view[data-view="profile"] .contact-tv { margin: 0; padding: 0; min-height: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; background: #080808; }
.view[data-view="profile"] .contact-tv__set { left: 0; bottom: 0; min-width: 0; flex: none; width: max(100%, calc(100vh * 1.896)); aspect-ratio: 2048 / 1080; margin: 0; }
.view[data-view="profile"] .contact-tv__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }

/* Work strip: a film plays over its poster while the card is on screen. */
.strip-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strip-card__media.is-contain video { object-fit: contain; }

/* Profile slogan treatments. Default is plain white; ?fx= previews others. */
.me-open__words { mix-blend-mode: normal; color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.18); }
.me-open__hi, .me-open__sub { color: inherit; }
.me-open[data-fx="red"] .me-open__words { mix-blend-mode: multiply; color: #ff4a1c; text-shadow: none; }
.me-open[data-fx="diff"] .me-open__words { mix-blend-mode: difference; color: #fff; text-shadow: none; }
.me-open[data-fx="ink"] .me-open__words { color: #111; text-shadow: none; }
.me-open[data-fx="overlay"] .me-open__words { mix-blend-mode: overlay; color: #fff; text-shadow: none; }
.me-open[data-fx="label"] .me-open__words { color: #111; text-shadow: none; }
.me-open[data-fx="label"] .me-open__words > * { display: table; background: #fff; padding: 0 0.12em; }
.me-open[data-fx="label"] .me-open__line { max-width: none; }
.me-open[data-fx="outline"] .me-open__line { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.me-open[data-fx="outline"] .me-open__words { text-shadow: none; }

/* One type system on the project index: serif for names and titles,
   mono for numbers and labels. No script, no third face. */
.studio .script { font: italic 400 1em/1 "Instrument Serif", serif; letter-spacing: -0.01em; }
.studio .work-list a strong { font: 400 clamp(20px, 1.6vw, 26px)/1.1 "Instrument Serif", serif; letter-spacing: 0; }
.studio .work-list a span, .studio .work-list a em, .studio .axis-zero { font-family: "Roboto Mono", ui-monospace, monospace; }
.studio .project-note [data-preview-year] { font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; color: var(--soft); }
.studio .project-note h3 { font-family: "Instrument Serif", serif; }
.studio .project-note p { font: 400 clamp(18px, 1.4vw, 22px)/1.3 "Instrument Serif", serif; letter-spacing: 0; text-transform: none; }
.studio .project-note a, .studio .time-range, .studio figcaption { font-family: "Roboto Mono", ui-monospace, monospace; }

/* Earlier / now / next, under the clock. */
.shell-side .shell-side__day { margin: 10px 0 0; display: grid; gap: 3px; font: 400 11px/1.4 "Roboto Mono", ui-monospace, monospace; }
.shell-side .shell-side__day div { display: grid; grid-template-columns: 62px 1fr; }
.shell-side .shell-side__day dt { color: var(--soft); text-transform: uppercase; letter-spacing: 0.04em; }
.shell-side .shell-side__day dd { margin: 0; color: var(--soft); }
.shell-side .shell-side__day div:first-child dd { color: var(--ink); }
.shell-side .shell-side__day div:first-child dd::before { content: "\25CF  "; }
.shell-side .shell-side__day dd.is-in { animation: day-in 500ms cubic-bezier(.2,.8,.2,1); }
@keyframes day-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .shell-side .shell-side__day { display: none; } }

/* Landing: the original set, with the sidebar already in place, then the
   projects fly in over it in the same frame. */
body.has-shell .cover { left: var(--side); }
body.has-shell .cover .hero { padding-top: 9vh; }
.intro--cover { position: absolute; inset: 0; z-index: 20; background: transparent !important; pointer-events: none; }
.intro--cover .intro__pin { position: absolute; inset: 0; height: auto; }
.intro--cover .intro__card, .intro--cover .intro__skip, .intro--cover.is-end .intro__end { pointer-events: auto; }
.intro--cover .intro__cap { background: #fff; padding-top: 10px; }
.intro--cover:not(.has-card) .intro__cap { background: transparent; }

/* Opening: the phone alone, quick, over a blurred glimpse of the page. */
.opening-gate { background: rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); }
/* The phone rises from the bottom edge, already playing, and rests on it. */
.opening-gate { place-items: end center; }
.opening-gate img { display: block; height: min(94vh, 940px); width: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.22)); animation: phone-rise 1100ms cubic-bezier(.16,1,.3,1) both; }
@keyframes phone-rise { from { transform: translateY(100%); } to { transform: none; } }

/* Home runs by itself now: one screen, no scroll. */
.view[data-view="home"] .intro { height: 100vh !important; }
.intro__end {
  position: absolute; inset: 0; z-index: 60; display: grid; align-content: center; gap: 28px;
  padding: 0 clamp(36px, 6vw, 120px); background: #fff; opacity: 0; pointer-events: none;
  transition: opacity 700ms ease;
}
.intro__end p { margin: 0; max-width: 22ch; font: 400 clamp(40px, 5vw, 84px)/0.98 "Instrument Serif", serif; letter-spacing: -0.01em; }
.intro__end span { max-width: 46ch; font: 400 13px/1.6 "Roboto Mono", ui-monospace, monospace; }
.intro.is-end .intro__end { opacity: 1; pointer-events: auto; }
.intro.is-end .intro__end p { animation: cap-in 900ms cubic-bezier(.2,.8,.2,1) both; }
.intro.is-end .intro__end span { animation: cap-in 900ms cubic-bezier(.2,.8,.2,1) 300ms both; }
.intro__skip { position: absolute; z-index: 70; right: clamp(24px, 3vw, 48px); top: 28px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.intro--cover .intro__cap::before { content: none !important; }
body.has-shell .cover .hero h1 { font-size: min(calc((100vw - var(--side)) * 0.19), 26vh); }
body.has-shell .cover .television { width: min(44%, 64vh); }
.me-drawer__skills ul { margin: 0; }
.me-drawer__more { display: inline-block; margin-top: 10px; font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.me-drawer__more:hover { opacity: 0.6; }

.shelf-index__wip { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(230px, 0.5fr); align-items: baseline; gap: 18px; padding: 16px 0 18px; border-top: 1px solid rgba(38, 38, 38, 0.12); border-bottom: 1px solid rgba(38, 38, 38, 0.12); }
@media (max-width: 760px) {
  .shelf-index__wip { grid-template-columns: 44px minmax(0, 1fr); }
  .shelf-index__wip .shelf__meta { display: none; }
}

/* Profile cursor: a small cut-out of her as a child instead of the dot. */
.sticker-cursor { position: fixed; left: 0; top: 0; z-index: 10001; height: 110px; width: auto; pointer-events: none; opacity: 0; transform: translate(-30%, -20%); transition: opacity 200ms ease; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
html.has-sticker .sticker-cursor { opacity: 1; }
html.has-sticker .dot-cursor { opacity: 0 !important; }
.sticker-cursor.is-pop { animation: sticker-pop 420ms cubic-bezier(.34,1.56,.64,1); }
@keyframes sticker-pop { from { transform: translate(-30%, -20%) scale(0.4) rotate(-12deg); } to { transform: translate(-30%, -20%) scale(1) rotate(0); } }

/* The cover waits for a scroll before the projects come in. */
.intro__hint { position: absolute; z-index: 70; left: 50%; bottom: 28px; margin: 0; transform: translateX(-50%); font: 400 11px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); transition: opacity 400ms ease; }
.intro__hint span { display: inline-block; animation: hint-bob 1.6s ease-in-out infinite; }
.intro.has-card .intro__hint, .intro.is-end .intro__hint { opacity: 0; }
@keyframes hint-bob { 50% { transform: translateY(4px); } }

/* Sidebar rows (mariamarago.com): the name on the left, a two-line note set
   flush right, and a hairline under each row. */
.shell-side .shell-side__nav { gap: 0; }
.shell-side .shell-side__nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 12px; border-bottom: 1px solid rgba(17, 17, 17, 0.85); }
.shell-side .shell-side__nav strong { font-size: clamp(34px, 2.7vw, 44px); }
.shell-side .shell-side__nav small { font-size: 10px; line-height: 1.35; letter-spacing: 0.08em; text-align: right; }

/* Writing (after rodrigoachivi.com): Swiss sections. A label on a short rule,
   a giant upper-case title whose lines step across the page and rise into
   place, a bracketed tag over a large paragraph, then a two-column index.
   The method sits on black, the academic papers follow on white. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.view[data-view="writing"] .writing-view { padding-top: 0; }
.wmethod, .wpapers { --pad: clamp(36px, 6vw, 120px); --sans: "Inter Tight", "Hanken Grotesk", system-ui, sans-serif; font-family: var(--sans); }
.wmethod { margin: 0 calc(-1 * var(--pad)) 0; padding: 120px var(--pad) 140px; background: #0b0b0b; color: #fff; }
.wpapers { padding-top: 140px; }
.sw-head { position: relative; display: grid; grid-template-columns: minmax(140px, 0.22fr) 1fr; align-items: start; }
.sw-label { margin: 0; padding-bottom: 8px; border-bottom: 1px solid currentColor; font: 500 13px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.01em; align-self: start; margin-top: 1.2vw; }
.sw-title { margin: 0; font: 500 clamp(64px, 8.6vw, 168px)/0.86 var(--sans); letter-spacing: -0.045em; text-transform: uppercase; }
.sw-title > span { display: block; overflow: hidden; padding-bottom: 0.04em; }
.sw-title > span > i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform 1100ms cubic-bezier(.16,1,.3,1); }
.sw-title > span:nth-child(1) { padding-left: 4%; }
.sw-title > span:nth-child(2) { padding-left: 0; }
.sw-title > span:nth-child(3) { padding-left: 22%; }
.sw-title > span:nth-child(2) > i { transition-delay: 90ms; }
.sw-title > span:nth-child(3) > i { transition-delay: 180ms; }
.sw-title.is-in > span > i { transform: none; }
.sw-lede { margin-top: 56px; max-width: 1180px; }
.sw-tag { margin: 0 0 14px; font: 400 12px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.02em; }
.sw-big { margin: 0; font: 400 clamp(24px, 2.3vw, 38px)/1.2 var(--sans); letter-spacing: -0.015em; }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); row-gap: 72px; margin-top: 140px; }
.sw-item__head { display: grid; gap: 18px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sw-item__top { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); font: 500 13px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.01em; }
.sw-item__title { max-width: 26ch; font: 500 clamp(22px, 2vw, 32px)/1.15 var(--sans); letter-spacing: -0.02em; transition: opacity 300ms ease; }
.sw-item__head:hover .sw-item__title { opacity: 0.6; }
.sw-item__more { font: 400 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.sw-item.is-open .sw-item__more { opacity: 0; }
.sw-item__more { transition: opacity 300ms ease; }
.sw-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms cubic-bezier(.65,0,.35,1); }
.sw-item.is-open .sw-item__body { grid-template-rows: 1fr; }
.sw-item__body > div { overflow: hidden; max-width: 58ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.sw-item__body > div > :first-child { margin-top: 18px; }
.sw-item__body p { margin: 0 0 12px; }
.sw-item__body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sw-item__body b { font-weight: 500; color: #fff; }
.sw-lede, .sw-item { opacity: 0; transform: translateY(40px); transition: opacity 900ms ease, transform 1000ms cubic-bezier(.16,1,.3,1); }
.sw-lede.is-in, .sw-item.is-in { opacity: 1; transform: none; }
.sw-item:nth-child(even) { transition-delay: 120ms; }
.wpapers .shelf-index { margin-top: 110px; }
@media (prefers-reduced-motion: reduce) {
  .sw-title > span > i, .sw-lede, .sw-item { transform: none; opacity: 1; transition: none; }
}
@media (max-width: 760px) {
  .wmethod, .wpapers { --pad: 18px; }
  .wmethod { padding: 72px 18px 88px; }
  .sw-head { grid-template-columns: 1fr; gap: 24px; }
  .sw-label { justify-self: start; }
  .sw-title > span { padding-left: 0 !important; }
  .sw-grid { grid-template-columns: 1fr; row-gap: 48px; margin-top: 88px; }
  .sw-lede { margin-top: 72px; }
}

/* Over anything clickable the cut-out shrinks away and a small dot marks the
   exact point, so a link can be aimed at. */
.sticker-cursor { transition: opacity 200ms ease, transform 260ms cubic-bezier(.22,1,.36,1); }
html.has-sticker.over-link .sticker-cursor { opacity: 0; transform: translate(-30%, -20%) scale(0.3); }
html.has-sticker.over-link .dot-cursor { opacity: 1 !important; width: 12px; height: 12px; }
.sw-head--plain { display: block; }
.sw-head--plain .sw-label { display: inline-block; min-width: 180px; margin-top: 0; }