/* Canvas: shared stylesheet for every page of the portfolio. */
/* Proposal 5: Canvas. One idea: the homepage is a design file, and the page is being composed while you watch.
   Shape rule: frames and selections are sharp (they are artboards), interface pieces are 10px, comments are bubbles.
   Accent: selection cobalt. The sticky note keeps its paper yellow in both themes because it is an object, not a surface.
   z-index scale: 2 dragged layers, 5 cursors, 10 nav, 95 visitor cursor. */
:root {
  --bg: #F3F4F6;
  --grid: #E3E5EA;
  --surface: #FCFCFD;
  --ink: #17181C;
  --muted: #5A5E69;
  --line: #D4D7DE;
  --accent: #2A4BF5;
  --accent-soft: #D3DBFF;
  --on-accent: #FCFCFD;
  --note: #FFE27A;
  --sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 2px rgba(23, 24, 40, 0.08), 0 12px 32px rgba(23, 24, 40, 0.12);
}
[data-theme="dark"] {
  --bg: #16171A;
  --grid: #212329;
  --surface: #1E2025;
  --ink: #EFF0F3;
  --muted: #A0A5B1;
  --line: #32353D;
  --accent: #7B95FF;
  --accent-soft: #2A3566;
  --on-accent: #16171A;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  font-family: var(--sans); color: var(--ink); font-size: 1rem; line-height: 1.6; overflow-x: clip;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* NAV: the file's top bar */
.nav-bar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); transition: transform 0.5s var(--ease); }
.nav-bar.away { transform: translateY(-100%); }
nav { position: relative; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { font-weight: 600; text-decoration: none; text-transform: lowercase; letter-spacing: -0.01em; }
.nav-right, .links { display: flex; align-items: center; gap: 0.35rem; }
.links a, .lang-toggle, .theme-toggle, .hamburger {
  font-family: var(--mono); font-size: 0.8rem; text-transform: lowercase; text-decoration: none; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 0.4rem 0.7rem; border-radius: 6px; transition: background 0.2s ease, color 0.2s ease;
}
.links a:hover, .lang-toggle:hover, .theme-toggle:hover, .hamburger:hover { background: var(--accent-soft); color: var(--ink); }
.hamburger { display: none; }

/* TYPE */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.08; }
h1 em, .footer-tagline em { font-style: normal; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 0% 100%; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; }
strong { font-weight: 600; color: var(--ink); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.95rem; font-weight: 500;
  text-decoration: none; text-transform: lowercase; padding: 0.75rem 1.25rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { scale: 0.97; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { box-shadow: 0 0 0 4px var(--accent-soft); }
.btn-secondary:hover { border-color: var(--accent); }

/* SELECTION FRAME: border + four handles + name tag */
.frame { position: relative; border: 1.5px solid var(--accent); padding: clamp(1.1rem, 2.2vw, 1.9rem); }
.frame-label { position: absolute; left: -1.5px; top: -27px; font-family: var(--mono); font-size: 0.75rem; text-transform: lowercase; color: var(--accent); white-space: nowrap; }
.hd { position: absolute; width: 9px; height: 9px; background: var(--surface); border: 1.5px solid var(--accent); }
.hd.tl { left: -5px; top: -5px; } .hd.tr { right: -5px; top: -5px; } .hd.bl { left: -5px; bottom: -5px; } .hd.br { right: -5px; bottom: -5px; }

/* MULTIPLAYER CURSORS: actors in the intro, not a replacement for the visitor's pointer */
.cursors { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cur { --c: var(--accent); position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; opacity: 0; }
.cur i { font-size: 22px; color: var(--c); }
.cur span { margin: 15px 0 0 -3px; background: var(--c); color: var(--bg); font-family: var(--mono); font-size: 0.72rem; padding: 2px 8px; border-radius: 0 8px 8px 8px; }
.cur.ai { --c: var(--ink); }
#cur-work { z-index: 5; pointer-events: none; }
/* The visitor's own pointer joins the file as a third collaborator ("tu" / "you").
   The arrow replaces the system cursor only over plain canvas; over links, buttons, handles and draggable layers
   the system cursor comes back (pointer, grab, resize) and only the name tag keeps following. Pointer devices only. */
.cur.you { --c: #D01F7A; position: fixed; z-index: 95; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; will-change: transform; }
[data-theme="dark"] .cur.you { --c: #FF6DB3; }
.cur.you.live { opacity: 1; }
.cur.you i { margin: -4px 0 0 -4px; transition: opacity 0.12s ease; }
.cur.you.native i { opacity: 0; }
.has-you, .has-you body { cursor: none; }

/* HERO */
.hero { position: relative; padding-top: clamp(3.5rem, 9vh, 5.5rem); padding-bottom: 7rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.sub { font-size: 1.1rem; color: var(--muted); max-width: 50ch; margin: 2rem 0 1.75rem; }
.cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.intro-pending [data-intro] { opacity: 0; }
.pile { position: relative; height: 440px; }
.layer { position: absolute; background: var(--surface); padding: 8px; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); cursor: grab; touch-action: none; }
.layer:active { cursor: grabbing; }
.layer img { border-radius: 5px; pointer-events: none; }
.pile .l1 { width: 62%; aspect-ratio: 4 / 3; left: 0; top: 4%; rotate: -5deg; }
.pile .l2 { width: 46%; aspect-ratio: 1; right: 0; top: 22%; rotate: 6deg; }
.pile .l3 { width: 54%; aspect-ratio: 4 / 3; left: 16%; bottom: 0; rotate: -2deg; }
/* a layer can show a zoomed crop of a larger image: --zoom is the image width, --mx / --my shift it (all in % of the layer width) */
.crop { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 5px; background: #fff; }
.crop img { width: var(--zoom, 100%); height: auto; max-width: none; margin: var(--my, 0) 0 0 var(--mx, 0); border-radius: 0; }

/* SECTIONS */
.section { padding-bottom: 8rem; }
.section > h2 { margin-bottom: 3.5rem; }

/* WORK: artboards on the canvas */
/* Each project is a frame the visitor can resize from its corner handles. --w is its width in % of the row.
   The script keeps the two frames inside the row (growing one pushes the other, down to a minimum), so nothing ever overlaps or wraps. */
.boards { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 3.5rem 3rem; }
.board { --w: 54; display: block; flex: 0 0 auto; width: calc(var(--w) * 1%); min-width: 0; text-decoration: none; }
.board.low { --w: 37; margin-top: 7rem; }
.resizing { user-select: none; -webkit-user-select: none; }
.grip { z-index: 2; cursor: nwse-resize; touch-action: none; transition: background 0.15s ease, scale 0.2s ease; }
.grip.tr, .grip.bl { cursor: nesw-resize; }
.grip::after { content: ''; position: absolute; inset: -10px; }
.grip:hover, .resizing .grip { background: var(--accent); scale: 1.25; }
.dim { position: absolute; right: -1px; top: -27px; z-index: 2; font-family: var(--mono); font-size: 0.7rem; line-height: 1; padding: 4px 7px; border-radius: 4px; background: var(--accent); color: var(--on-accent); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
[data-board]:hover .dim, .resizing .dim, [data-board]:focus-within .dim { opacity: 1; }
/* Every frame with handles resizes the same way: hero and footer frames, inner-page titles, screenshots.
   Width is a percentage of the parent, clamped between data-min and 100. */
[data-resize]:hover .dim, [data-resize]:focus-within .dim { opacity: 1; }
[data-resize].sized { width: calc(var(--w) * 1%); max-width: none; }
.footer-frame.sized { display: block; }
.footer-frame.sized .footer-tagline { max-width: none; }
.shot-btn .grip { opacity: 0; }
.board-art { position: relative; aspect-ratio: 16 / 10; background: var(--surface); outline: 1px solid var(--line); transition: outline-color 0.2s ease; }
.board-art img { object-position: top center; }
.board:hover .board-art, .board.resizing .board-art, .board:focus-within .board-art { outline: 1.5px solid var(--accent); }
.board h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.15; margin: 1.5rem 0 0.9rem; }
.board-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags li { font-family: var(--mono); font-size: 0.74rem; text-transform: lowercase; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.55rem; }
.read { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.8rem; text-transform: lowercase; color: var(--accent); }
.read i { transition: transform 0.4s var(--ease); }
.board:hover .read i { transform: translateX(5px); }
.board-soon { --w: 100; position: relative; flex: 0 0 auto; width: calc(var(--w) * 1%); display: flex; justify-content: center; align-items: center; padding: 2.25rem 2rem; border: 1.5px dashed var(--line); }
.board-soon:hover, .board-soon.resizing, .board-soon:focus-within { border-color: var(--accent); }
.board-soon h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); color: var(--muted); }
.soon-label { font-family: var(--mono); font-size: 0.78rem; text-transform: lowercase; color: var(--on-accent); background: var(--accent); border-radius: 6px; padding: 0.25rem 0.7rem; }

/* PLAYGROUND: a sticky note and a loose image, both draggable */
.desk { position: relative; display: grid; grid-template-columns: minmax(0, 560px) 260px; gap: 4rem; align-items: center; justify-content: center; padding: 1rem 0; }
.note { background: var(--note); color: #1B1B1F; padding: clamp(1.75rem, 3.5vw, 3rem); box-shadow: var(--shadow); rotate: -2deg; cursor: grab; touch-action: pan-y; }
.note p { font-size: 1.08rem; margin: 1.1rem 0 1.75rem; color: #3A3520; }
.note .btn { background: #1B1B1F; border-color: #1B1B1F; color: #FFF6CF; }
.desk .layer { position: relative; aspect-ratio: 1; rotate: 5deg; }


/* ABOUT: three comments left on the canvas */
.thread { display: grid; gap: 1.5rem; max-width: 920px; }
.comment { display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; align-items: start; transform-origin: 22px 22px; }
.comment:nth-child(2) { margin-left: 5rem; }
.comment:nth-child(3) { margin-left: 2.5rem; }
.avatar { width: 44px; height: 44px; border-radius: 999px; overflow: hidden; border: 2px solid var(--accent); background: var(--surface); }
.bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; padding: 1.25rem 1.5rem; box-shadow: var(--shadow); color: var(--muted); font-size: 1.05rem; }

/* DOPPELGÄNGER CHAT: scripted Q&A. A floating avatar button (every page) opens the conversation in a panel
   with its own scroll, so the page never grows. The About thread only has a CTA that opens the same panel.
   The dashed avatar ring marks the "copy" of Federica; the visitor's messages use the same magenta as their cursor.
   z-index: 80 (above the nav, below the visitor cursor). */
.avatar.twin { border-style: dashed; }
.chat-cta { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.75rem; }
.chat-cta .btn { font-size: 1.05rem; padding: 0.95rem 1.5rem; box-shadow: 0 10px 26px rgba(42, 75, 245, 0.28); }
.chat-cta .btn i { font-size: 1.25rem; }
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 60px; height: 60px; padding: 0; border: none; border-radius: 999px; background: none; cursor: pointer; transition: opacity 0.25s ease, scale 0.45s var(--ease), visibility 0s; }
.chat-fab .avatar { display: block; width: 100%; height: 100%; background: var(--surface); box-shadow: var(--shadow); border-width: 2px; transition: border-color 0.2s ease; }
.chat-fab > i { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.95rem; box-shadow: 0 0 0 2px var(--bg); }
.chat-fab:hover { scale: 1.08; }
.chat-fab:hover .avatar { border-style: solid; }
.chat-fab:active { scale: 0.96; }
.chat-fab.away { opacity: 0; scale: 0.6; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, scale 0.3s ease, visibility 0s linear 0.3s; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font-family: var(--sans); font-size: 0.92rem; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.9rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, translate 0.3s var(--ease); }
.chip:hover { border-color: var(--accent); background: var(--accent-soft); translate: 0 -2px; }
.chip:active { scale: 0.97; }
.chip-contact { border-style: dashed; }

.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 80; width: min(420px, calc(100vw - 40px)); height: min(620px, calc(100dvh - 96px));
  display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow), 0 30px 80px rgba(23, 24, 40, 0.22); overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none; scale: 0.92; transform-origin: 100% 100%;
  transition: opacity 0.25s ease, scale 0.45s var(--ease), visibility 0s linear 0.45s;
}
.chat-panel.open { opacity: 1; visibility: visible; pointer-events: auto; scale: 1; transition: opacity 0.25s ease, scale 0.45s var(--ease); }
.chat-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.8rem 0.8rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.chat-head:active { cursor: grabbing; }
.chat-head .avatar { width: 34px; height: 34px; flex-shrink: 0; }
.chat-head h2 { flex: 1; min-width: 0; font-size: 0.98rem; letter-spacing: -0.02em; }
.chat-close { display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: 8px; background: none; color: var(--muted); font-size: 1.15rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.chat-close:hover { background: var(--accent-soft); color: var(--ink); }
.chat-log { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.chat-log .comment:nth-child(n) { grid-template-columns: 34px 1fr; gap: 0.6rem; margin-left: 0; }
.chat-log .avatar { width: 34px; height: 34px; }
.chat-log .bubble { padding: 0.8rem 1rem; font-size: 0.95rem; box-shadow: none; }
.msg-you { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.msg-you .bubble { --you: #D01F7A; border-color: var(--you); border-radius: 18px 18px 4px 18px; color: var(--ink); max-width: 85%; overflow-wrap: anywhere; }
[data-theme="dark"] .msg-you .bubble { --you: #FF6DB3; }
.msg-tag { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.msg-twin .bubble .btn { margin-top: 0.9rem; }
.bubble a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }
.typing { display: inline-flex; gap: 5px; padding: 0.35rem 0; }
.typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--muted); opacity: 0.35; }
.chat-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 0.8rem 1rem 1rem; }
.chat-log .chips { padding-left: calc(34px + 0.6rem); gap: 0.4rem; }
.chat-log .chip { font-size: 0.85rem; padding: 0.45rem 0.75rem; background: var(--surface); }
.chat-log .chip:hover { translate: none; }
.chat-form label { display: block; font-family: var(--mono); font-size: 0.72rem; text-transform: lowercase; color: var(--muted); margin-bottom: 0.4rem; }
.chat-field { display: flex; gap: 0.5rem; }
.chat-field input { flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.65rem 0.85rem; cursor: text; }
.chat-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.chat-field .btn { padding: 0.65rem 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .chat-fab { animation: fab-in 0.6s var(--ease) 1.6s both; }
  @keyframes fab-in { from { opacity: 0; scale: 0.4; } }
  .msg-you, .msg-twin { animation: msg-in 0.45s var(--ease) both; }
  @keyframes msg-in { from { opacity: 0; translate: 0 10px; } }
  .typing i { animation: typing 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes typing { 50% { opacity: 1; translate: 0 -3px; } }
}
@media (max-width: 767px) {
  .chat-fab { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  /* on phones the panel is a full-screen sheet and the page behind stops scrolling */
  .chat-panel { inset: 0; width: auto; height: auto; border: none; border-radius: 0; transform: none !important; transform-origin: 50% 100%; }
  .chat-head { cursor: default; }
  .chat-lock { overflow: hidden; }
}

/* EXPERIENCE: version history */
.history { position: relative; max-width: 860px; margin-top: 6rem; }
.rail, .rail-fill { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.rail-fill { background: var(--accent); transform-origin: top; }
.history article { position: relative; padding: 0 0 2.75rem 2.75rem; }
.history article:last-child { padding-bottom: 0; }
.knot { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--bg); border: 2px solid var(--line); transition: background 0.3s ease, border-color 0.3s ease, scale 0.5s var(--ease); }
.history article.on .knot { background: var(--accent); border-color: var(--accent); scale: 1.2; }
.xp-period { font-family: var(--mono); font-size: 0.78rem; text-transform: lowercase; color: var(--accent); margin-bottom: 0.4rem; }
.history h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; margin-bottom: 0.5rem; }
.xp-desc { color: var(--muted); max-width: 60ch; }

/* FOOTER */
/* the footer is also a .container, whose padding shorthand would reset top and bottom: set them with the longhands */
footer { position: relative; }
footer.container { padding-top: 2rem; padding-bottom: 7rem; }
.footer-frame { display: inline-block; margin-top: 27px; }
.footer-tagline { font-size: clamp(2.2rem, 6vw, 5.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; max-width: 12em; }
.footer-cta { margin-top: 2.5rem; }
.footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: 5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.76rem; text-transform: lowercase; color: var(--muted); }
.footer-meta i { color: var(--accent); vertical-align: -1px; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  h1 em, .footer-tagline em { background-size: 100% 100%; }
  .cursors { display: none; }
}

/* MOBILE: one column, cursors off, layers become a simple strip */
@media (max-width: 767px) {
  .hamburger { display: block; }
  .links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
  .links.open { display: flex; }
  .cursors { display: none; }
  .hero { padding-bottom: 4.5rem; }
  .hero-grid, .desk { grid-template-columns: 1fr; gap: 2.5rem; }
  .boards { gap: 2.5rem; }
  .pile { height: 300px; }
  .section { padding-bottom: 5rem; }
  .section > h2 { margin-bottom: 2.5rem; }
  .board, .board.low, .board-soon { width: 100%; }
  .board.low { margin-top: 0; }
  .board-soon { padding: 1.5rem; }
  .grip { pointer-events: none; }
  .dim, #cur-work { display: none; }
  .desk .layer { max-width: 200px; }
  .comment:nth-child(n) { margin-left: 0; }
  .history { margin-top: 4rem; }
}

/* ---------- Inner pages: case studies and playground ---------- */
.layer-name { display: block; font-family: var(--mono); font-size: 0.78rem; text-transform: lowercase; color: var(--accent); margin-bottom: 1rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.8rem; text-transform: lowercase; text-decoration: none; color: var(--muted); margin-bottom: 4rem; transition: color 0.2s ease; }
.back-link i { transition: transform 0.4s var(--ease); }
.back-link:hover { color: var(--accent); }
.back-link:hover i { transform: translateX(-4px); }

.case-hero { padding-top: clamp(2.5rem, 7vh, 4rem); padding-bottom: 5rem; max-width: 1000px; }
.case-hero h1, .page-hero h1 { font-size: clamp(1.9rem, 3.5vw, 3.3rem); }
.case-hero-sub { font-size: 1.15rem; color: var(--muted); max-width: 62ch; margin-top: 2rem; }

/* case study body + inspector panel (the sidebar reads like a design tool's properties panel) */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 4.5rem; align-items: start; padding-bottom: 5rem; }
.section-block, .full-bleed-img-wrap { margin-bottom: 4.5rem; }
.main-col > :last-child { margin-bottom: 0; }
.main-col p { color: var(--muted); font-size: 1.08rem; max-width: 66ch; margin-bottom: 1.1rem; }
.main-col .block-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.12; margin-bottom: 1rem; }
.main-col em { color: var(--ink); }

.result-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.result-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; color: var(--muted); }
.result-list i { color: var(--accent); font-size: 1.2rem; margin-top: 0.15rem; }

/* process as a version history: the rail fills with the scroll (--p is set by the script) */
.process-list { position: relative; display: grid; gap: 1.6rem; padding-left: 2.75rem; }
.process-list::before, .process-list::after { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.process-list::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
.process-list li { position: relative; color: var(--muted); font-size: 1.05rem; max-width: 64ch; }
.process-list li::before { content: ''; position: absolute; left: -2.75rem; top: 5px; z-index: 1; width: 16px; height: 16px; border-radius: 999px; background: var(--bg); border: 2px solid var(--line); transition: background 0.3s ease, border-color 0.3s ease, scale 0.5s var(--ease); }
.process-list li.on::before { background: var(--accent); border-color: var(--accent); scale: 1.2; }

/* screenshots are frames: click to zoom */
.shot { margin-top: 2.5rem; }
.shot-btn { position: relative; display: block; width: 100%; padding: 0; border: none; background: var(--surface); outline: 1px solid var(--line); cursor: zoom-in; transition: outline-color 0.2s ease; }
.shot-btn img { height: auto; }
.shot-btn .hd { opacity: 0; transition: opacity 0.2s ease; }
.shot-btn:hover, .shot-btn:focus-visible { outline: 1.5px solid var(--accent); }
.shot-btn:hover .hd, .shot-btn:focus-visible .hd { opacity: 1; }
.shot figcaption { font-family: var(--mono); font-size: 0.75rem; text-transform: lowercase; color: var(--muted); margin-top: 0.85rem; }

.main-col .pull-quote { background: var(--note); color: #1B1B1F; font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); rotate: -1.2deg; max-width: 32em; margin-bottom: 2rem; }

.inspector { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.sidebar-block { padding: 1.3rem 1.4rem; }
.sidebar-block + .sidebar-block { border-top: 1px solid var(--line); }
.sidebar-block h3 { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: lowercase; color: var(--muted); margin-bottom: 1rem; }
.sidebar-metric { display: flex; align-items: center; gap: 0.35rem; font-size: 2.1rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.sidebar-metric i { font-size: 1.5rem; color: var(--accent); }
.sidebar-metric-label { display: block; font-family: var(--mono); font-size: 0.74rem; text-transform: lowercase; color: var(--muted); margin: 0.2rem 0 1.1rem; }
.sidebar-metric-label:last-child { margin-bottom: 0; }
.sidebar-meta-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 0.92rem; text-align: right; }
.sidebar-meta-row span:first-child { font-family: var(--mono); font-size: 0.76rem; text-transform: lowercase; color: var(--muted); text-align: left; padding-top: 0.15rem; }
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sidebar-tag { font-family: var(--mono); font-size: 0.74rem; text-transform: lowercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.55rem; }

.next-case { display: block; text-decoration: none; border: 1.5px dashed var(--line); padding: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 7rem; transition: border-color 0.2s ease; }
.next-case:hover { border-color: var(--accent); border-style: solid; }
.next-case-title { display: block; font-size: clamp(1.5rem, 2.8vw, 2.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 1.25rem; }
.next-case:hover .read i { transform: translateX(5px); }
main > .content-grid:last-child { padding-bottom: 7rem; }

.lightbox { position: fixed; inset: 0; z-index: 90; display: none; overflow: auto; overscroll-behavior: contain; padding: clamp(1rem, 4vw, 3rem); background: rgba(12, 13, 17, 0.9); cursor: zoom-out; }
.lightbox.open { display: flex; }
/* the image keeps its full width and the overlay scrolls, so tall screenshots can be read; auto margins centre short ones */
.lightbox img { display: block; width: min(1500px, 100%); height: auto; max-width: none; margin: auto; object-fit: contain; background: var(--surface); }
.lightbox-close { position: fixed; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: none; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 1.25rem; cursor: pointer; box-shadow: var(--shadow); }
.lightbox-close:hover { background: var(--you); color: var(--on-you); }

/* playground: projects pinned on the canvas, free to move */
.page-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: 4rem; align-items: center; padding-top: clamp(2.5rem, 7vh, 4rem); padding-bottom: 6rem; }
.pg-layer { position: relative; aspect-ratio: 1037 / 954; max-width: 340px; justify-self: center; rotate: 4deg; }
.pins { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; padding: 1rem 0 8rem; }
.pin { padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow); cursor: grab; touch-action: pan-y; }
.pin:active { cursor: grabbing; }
.pin h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; margin-bottom: 1rem; }
.pin p { margin-bottom: 1.5rem; }
.pin .tags { margin-bottom: 1.75rem; }
.pin-note { background: var(--note); color: #1B1B1F; rotate: -1.5deg; }
.pin-note p { color: #3A3520; }
.pin-note .tags li { background: transparent; border-color: rgba(27, 27, 31, 0.35); color: #3A3520; }
.pin-note .btn { background: #1B1B1F; border-color: #1B1B1F; color: #FFF6CF; }
.pin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; rotate: 1.5deg; margin-top: 4.5rem; }
.pin-card p { color: var(--muted); }
.pin-card .btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.more { padding-bottom: 7rem; }
.jumps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.jump { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; border: 1.5px dashed var(--line); text-decoration: none; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 600; letter-spacing: -0.03em; transition: border-color 0.2s ease, color 0.2s ease; }
.jump i { transition: transform 0.4s var(--ease); }
.jump:hover { border-color: var(--accent); border-style: solid; color: var(--accent); }
.jump:hover i { transform: translateX(5px); }

@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; gap: 3rem; }
  .inspector { position: static; order: -1; }
}
@media (max-width: 767px) {
  .back-link { margin-bottom: 3.5rem; }
  .case-hero, .page-hero { padding-bottom: 3.5rem; }
  .page-hero, .pins, .jumps, .result-list { grid-template-columns: 1fr; }
  .page-hero { gap: 2.5rem; }
  .pg-layer { max-width: 220px; justify-self: start; }
  .pins { gap: 2rem; padding-bottom: 5rem; }
  .pin-card { margin-top: 0; }
  .section-block, .full-bleed-img-wrap { margin-bottom: 3.5rem; }
  .next-case { margin-bottom: 5rem; }
  .more { padding-bottom: 5rem; }
}

/* ---------- Post-it: every yellow note has the classic folded corner ----------
   The corner is cut out of the background (so the canvas grid shows through) and a darker flap is drawn over it.
   The shadow is a drop-shadow filter because a box-shadow would ignore the missing corner. */
.note, .pin-note, .main-col .pull-quote {
  --fold: 40px;
  position: relative;
  background: linear-gradient(315deg, transparent calc(var(--fold) * 0.7071), var(--note) 0);
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(23, 24, 40, 0.1)) drop-shadow(0 14px 22px rgba(23, 24, 40, 0.16));
}
.note::after, .pin-note::after, .main-col .pull-quote::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: var(--fold); height: var(--fold);
  background: linear-gradient(to top left, transparent 50%, #E3C048 50%, #F2D560);
  border-top-left-radius: 5px;
  box-shadow: -3px -3px 6px rgba(60, 45, 0, 0.14);
}
/* the home note is a real square sticky; longer notes keep their natural height */
.note { aspect-ratio: 1; max-width: 460px; justify-self: end; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.75rem, 3vw, 2.5rem); }
.note p { margin: 1rem 0 1.5rem; }
.main-col .pull-quote { padding-bottom: clamp(2rem, 3.5vw, 2.75rem); }
@media (max-width: 767px) {
  .note, .pin-note, .main-col .pull-quote { --fold: 32px; }
  .note { aspect-ratio: auto; justify-self: stretch; max-width: none; }
}

/* ---------- The visitor's colour ----------
   Two actors, two colours. Cobalt is Federica: her frames, labels and selections. Magenta is the visitor ("tu" / "you"):
   their cursor, their chat messages, and anything they touch. At rest the page is cobalt; whatever the visitor hovers,
   focuses, grabs or selects turns magenta, so the response always reads as "this is you". */
:root { --you: #D01F7A; --you-soft: #FBD3E7; --on-you: #FFFBFD; }
[data-theme="dark"] { --you: #FF6DB3; --you-soft: #4A1C36; --on-you: #16171A; }
.cur.you { --c: var(--you); }
::selection { background: var(--you-soft); color: var(--ink); }
:focus-visible, .chat-field input:focus-visible { outline-color: var(--you); }
.chat-field input:focus-visible { border-color: var(--you); }

.btn-primary:hover, .pin-card .btn:hover, .chat-cta .btn:hover { background: var(--you); border-color: var(--you); color: var(--on-you); box-shadow: 0 0 0 4px var(--you-soft); }
.btn-secondary:hover, .chip:hover { border-color: var(--you); background: var(--you-soft); }
.links a:hover, .lang-toggle:hover, .theme-toggle:hover, .hamburger:hover, .chat-close:hover { background: var(--you-soft); }
.back-link:hover, .jump:hover, .bubble a:not(.btn):hover { color: var(--you); }
.board:hover .read, .next-case:hover .read { color: var(--you); }

/* frames answer to the hand that holds them */
.frame[data-resize]:hover, .frame[data-resize].resizing, .frame[data-resize]:focus-within { border-color: var(--you); }
.frame[data-resize]:hover .hd, .frame[data-resize].resizing .hd, .frame[data-resize]:hover .frame-label { border-color: var(--you); color: var(--you); }
.board:hover .board-art, .board.resizing .board-art, .board:focus-within .board-art, .shot-btn:hover, .shot-btn:focus-visible { outline-color: var(--you); }
.board:hover .hd, .board.resizing .hd, .board-soon:hover .hd, .board-soon.resizing .hd, .shot-btn:hover .hd { border-color: var(--you); }
.board-soon:hover, .board-soon.resizing, .board-soon:focus-within, .next-case:hover, .jump:hover { border-color: var(--you); }
.grip:hover, .resizing .grip { background: var(--you); border-color: var(--you); }
.dim { background: var(--you); color: var(--on-you); }

/* the chat is an invitation addressed to the visitor */
.chat-fab > i { background: var(--you); color: var(--on-you); }
.chat-fab:hover .avatar { border-color: var(--you); }
.msg-you .bubble { border-color: var(--you); }

/* when the "federica" cursor demonstrates a resize, the frame stays hers */
.board.by-federica .board-art { outline-color: var(--accent); }
.board.by-federica .hd { border-color: var(--accent); }
.board.by-federica .grip { background: var(--surface); border-color: var(--accent); }
.board.by-federica .grip.br { background: var(--accent); }
.board.by-federica .dim { background: var(--accent); color: var(--on-accent); }

/* anything the visitor can pick up shows their selection box while they hover or drag it */
.drag { outline: 1.5px solid transparent; outline-offset: 4px; transition: outline-color 0.2s ease; }
.drag:hover, .drag:active { outline-color: var(--you); }

/* tags react to the visitor too */
.tags li { transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.tags li:hover, .pin-note .tags li:hover { border-color: var(--you); color: var(--you); background: var(--you-soft); }

/* case study section headings work as bookmarks for someone scanning the page: bold, in the visitor's colour */
.main-col .layer-name { display: flex; align-items: center; gap: 0.55rem; font-family: var(--sans); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--you); margin-bottom: 1.1rem; scroll-margin-top: 90px; }
.main-col .layer-name::before { content: ''; width: 9px; height: 9px; flex-shrink: 0; background: var(--you); }

/* The highlighter behind a headline's key phrase is Federica's cobalt; when the visitor hovers the headline it turns magenta.
   --hl is registered as a colour so the change can fade instead of snapping. */
@property --hl { syntax: '<color>'; inherits: true; initial-value: transparent; }
h1, .footer-tagline { --hl: var(--accent-soft); transition: --hl 0.3s ease; }
h1:hover, .footer-tagline:hover { --hl: var(--you-soft); }

/* Touch devices have no hover, so everything addressed to the visitor is magenta from the start */
@media (hover: none) {
  h1, .footer-tagline { --hl: var(--you-soft); }
  .btn-primary, .pin-card .btn, .chat-cta .btn { background: var(--you); border-color: var(--you); color: var(--on-you); box-shadow: none; }
  .btn-secondary, .chip { border-color: var(--you); }
  .read, .board .read, .next-case .read, .back-link, .jump i, .bubble a:not(.btn) { color: var(--you); }
  .jump, .next-case { border-color: var(--you); }
  .hamburger, .lang-toggle, .theme-toggle { color: var(--you); }
}