/* ---------- Tokens ---------- */
  :root{
    --bg:#111119;          /* warmed indigo */
    --bg-2:#191824;        /* raised panel */
    --ink:#e9edf6;         /* primary text */
    --muted:#a8a4b6;       /* secondary text */
    --line:#2b2839;        /* hairlines */

    /* bread palette */
    --brass:#dca35c;       /* crust gold — primary accent */
    --brass-soft:#eac89b;
    --crust:#b9762f;       /* deep baked crust */
    --crust-dark:#8d571f;
    --crumb:#f2ddb2;       /* soft interior */
    --crumb-2:#e5c288;

    --steel:#8d8798;
    --maxw:1080px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-settle:cubic-bezier(.34,1.2,.34,1);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}

  html{
    scroll-snap-type:y proximity;
    scroll-behavior:smooth;
    background:var(--bg);
  }
  body{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---------- Background layers ---------- */

  /* Top-right oven glow. Pinned — JS never touches it, so it cannot drift. */
  .glow-tr{
    position:fixed;
    top:0; right:0;
    width:min(1100px,95vw);
    height:min(760px,80vh);
    z-index:0;
    pointer-events:none;
    background:radial-gradient(60% 60% at 82% 8%, rgba(220,163,92,.16), transparent 68%);
    animation:emberBreathe 9s ease-in-out infinite;
  }
  @keyframes emberBreathe{
    0%,100%{opacity:.85}
    50%    {opacity:1}
  }

  .bg{
    position:fixed;
    inset:-25% -15%;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(900px 600px at 10% 105%, rgba(160,140,120,.10), transparent 62%);
    will-change:transform;
  }
  .grid{
    position:fixed;
    inset:-10%;
    z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:.16;
    mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    will-change:transform;
  }

  /* Flour-grain tactility over the whole page */
  .grain{
    position:fixed;inset:0;z-index:3;pointer-events:none;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- Falling whole bread ---------- */
  .breadfall{
    position:fixed;
    top:0; right:0; bottom:0;
    width:210px;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
  }
  /* three nested layers so fall / sway / spin stay independent */
  .bread-drop{
    position:absolute;
    top:-70px;
    animation-name:breadFall;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
  }
  .bread-drop .sway{
    display:block;
    animation-name:breadSway;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
  }
  .bread-drop svg{
    display:block;
    animation-name:breadSpin;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  @keyframes breadFall{
    from{transform:translateY(-70px)}
    to  {transform:translateY(114vh)}
  }
  @keyframes breadSway{
    0%,100%{transform:translateX(-13px)}
    50%    {transform:translateX(13px)}
  }
  @keyframes breadSpin{
    from{transform:rotate(0deg)}
    to  {transform:rotate(360deg)}
  }

  /* ---------- Layout ---------- */
  main{position:relative;z-index:1}
  section{
    min-height:100vh;
    scroll-snap-align:center;
    display:flex;
    align-items:center;
    padding:96px 32px;
  }
  .wrap{width:100%;max-width:var(--maxw);margin:0 auto}

  .eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--brass);
    margin:0 0 18px;
  }
  h1{
    font-family:"Syne",sans-serif;
    font-weight:800;
    font-size:clamp(3rem,10vw,7rem);
    line-height:.96;
    letter-spacing:-.02em;
    margin:0;
  }
  h2{
    font-family:"Syne",sans-serif;
    font-weight:700;
    font-size:clamp(1.9rem,4.4vw,3rem);
    letter-spacing:-.01em;
    margin:0 0 28px;
  }
  h3{font-family:"Syne",sans-serif;font-weight:600;margin:0 0 4px;font-size:1.18rem}
  p{margin:0 0 16px;color:var(--muted);max-width:60ch}
  a{color:var(--brass-soft);text-decoration:none}
  a:hover{color:var(--brass)}

  /* Scan anchors: the word glows like crust under oven heat. No underline,
     no background — the light does the work. */
  mark.bake{
    background:none;
    color:var(--crumb);
    font-weight:500;
    padding:0;
    text-shadow:
      0 0 12px rgba(220,163,92,.60),
      0 0 28px rgba(220,163,92,.30);
  }

  .sec-no{
    font-family:"IBM Plex Mono",monospace;
    color:var(--steel);
    font-size:.8rem;
    letter-spacing:.2em;
    display:block;
    margin-bottom:10px;
  }

  /* ---------- Hero ---------- */
  #home .lead{font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--muted);max-width:52ch;margin-top:26px}
  .name-line{display:flex;align-items:baseline;gap:.2em;flex-wrap:wrap}
  .cursor{color:var(--brass);animation:blink 1.1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
  .btn{
    position:relative;overflow:hidden;
    font-family:"IBM Plex Mono",monospace;
    font-size:.85rem;letter-spacing:.03em;
    padding:13px 22px;border-radius:2px;
    border:1px solid var(--line);
    color:var(--ink);background:transparent;
    transition:.35s var(--ease);cursor:pointer;
  }
  /* oven glow rising from below on hover */
  .btn::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(60% 140% at 50% 125%, rgba(220,163,92,.32), transparent 70%);
    opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
  }
  .btn:hover{border-color:var(--brass);transform:translateY(-2px)}
  .btn:hover::after{opacity:1}
  .btn.primary{border-color:var(--brass);color:var(--brass)}
  .scroll-hint{
    position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
    font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.25em;
    color:var(--steel);text-transform:uppercase;
  }
  .scroll-hint span{display:block;width:1px;height:34px;margin:10px auto 0;
    background:linear-gradient(var(--brass),transparent);animation:drop 1.8s var(--ease) infinite}
  @keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
    55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* ---------- About ---------- */
  .about-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:56px}
  .tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
  /* little crust-coloured rolls: warm fill + baked edge, so they lift off the dark
     background instead of dissolving into it */
  .tag{
    font-family:"IBM Plex Mono",monospace;font-size:.75rem;
    padding:7px 13px;
    border:1px solid rgba(220,163,92,.55);
    border-radius:999px;
    color:var(--brass-soft);
    background:linear-gradient(160deg, rgba(220,163,92,.34), rgba(185,118,47,.24));
    box-shadow:inset 0 1px 0 rgba(242,221,178,.18), 0 1px 3px rgba(0,0,0,.3);
    transition:.3s var(--ease);
  }
  .tag:hover{
    border-color:var(--brass);
    color:var(--crumb);
    background:linear-gradient(160deg, rgba(220,163,92,.48), rgba(185,118,47,.34));
    transform:translateY(-1px);
  }

  /* ---------- Profile photo ---------- */
  .about-side{display:flex;flex-direction:column}
  .avatar{
    position:relative;
    margin:0 0 22px;
    width:100%;max-width:240px;
    aspect-ratio:4/5;
    border-radius:10px;
    overflow:hidden;
    border:1px solid var(--line);
    border-top:2px solid var(--crust);
    background:
      radial-gradient(circle at 32% 26%, rgba(220,163,92,.16), transparent 62%),
      var(--bg-2);
  }
  .avatar img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
  .avatar-ph{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    font-family:"Syne",sans-serif;font-weight:700;
    font-size:2.6rem;letter-spacing:.04em;
    color:var(--crust);
  }
  .avatar-ph small{
    font-family:"IBM Plex Mono",monospace;font-weight:400;
    font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--steel);
  }
  .side-card{
    background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:24px;
    border-top:2px solid var(--crust);
  }
  .side-card .row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
  .side-card .row:last-child{border-bottom:0}
  .side-card .k{color:var(--steel);font-family:"IBM Plex Mono",monospace;font-size:.8rem}

  /* ---------- Experience ---------- */
  .timeline{border-left:1px solid var(--line);margin-left:6px}
  .job{position:relative;padding:0 0 40px 34px}
  .job:last-child{padding-bottom:0}
  .job::before{
    content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;
    background:var(--bg);border:2px solid var(--brass);transition:.4s var(--ease);
  }
  .job.in::before{box-shadow:0 0 0 5px rgba(220,163,92,.12)}
  .job .when{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--steel);letter-spacing:.05em}

  /* ---------- Projects ---------- */
  .proj{
    background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
    padding:30px;transition:.45s var(--ease);
  }
  .proj:hover{border-color:var(--brass);transform:translateY(-4px)}
  .proj .label{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.2em;color:var(--brass);text-transform:uppercase}
  .proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .proj-links{margin:16px 0 0}
  .proj-links a{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.03em}

  /* ---------- Skills ---------- */
  .skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .skill-card{
    background:var(--bg-2);border:1px solid var(--line);border-radius:6px;
    padding:22px;border-top:2px solid var(--crust);
  }
  .skill-card h3{
    font-family:"IBM Plex Mono",monospace;font-weight:500;
    font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--brass);margin:0 0 12px;
  }
  .skill-card .tags{margin-top:0}

  /* ---------- Break bread (puzzle) ---------- */
  .play{
    position:relative;
    height:330px;
    margin:30px 0 22px;
    border:1px dashed var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.014);
    overflow:hidden;
    touch-action:none;                 /* pointer drag owns the gesture */
    transition:border-color .6s var(--ease),background .6s var(--ease);
  }
  .play.solved{border-color:rgba(220,163,92,.4);background:rgba(220,163,92,.045)}

  .piece{
    position:absolute;left:0;top:0;
    cursor:grab;
    --face-l-op:.85;
    --face-r-op:.85;
    transition:transform .45s var(--ease-settle),filter .35s var(--ease);
    filter:drop-shadow(0 5px 11px rgba(0,0,0,.45));
    user-select:none;-webkit-user-select:none;
    touch-action:none;
  }
  .piece svg{display:block;pointer-events:none}
  .piece:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:6px}
  .piece.dragging{
    cursor:grabbing;
    transition:none;                   /* follow the pointer exactly */
    filter:drop-shadow(0 16px 26px rgba(0,0,0,.6));
  }
  .play.solved .piece{filter:drop-shadow(0 6px 20px rgba(220,163,92,.4))}

  .game-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .game-msg{
    margin:0;min-height:1.6em;
    font-family:"IBM Plex Mono",monospace;font-size:.82rem;
    color:var(--steel);letter-spacing:.04em;
  }
  .reveal-note{
    margin-top:26px;
    opacity:0;transform:translateY(12px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
  }
  .reveal-note.show{opacity:1;transform:none}
  .reveal-note .big{
    font-family:"Syne",sans-serif;font-weight:700;
    font-size:clamp(1.3rem,3vw,1.9rem);
    color:var(--brass);margin:0 0 8px;max-width:none;
  }

  /* steam curls up off the finished baguette */
  .steam{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none}
  .steam i{
    position:absolute;top:50%;
    width:11px;height:11px;border-radius:50%;
    background:rgba(234,200,155,.55);
    filter:blur(6px);opacity:0;
  }
  .play.solved .steam i{animation:steamUp 3.2s ease-out infinite}
  @keyframes steamUp{
    0%  {opacity:0;transform:translateY(0) scale(.7)}
    22% {opacity:.75}
    100%{opacity:0;transform:translateY(-70px) scale(1.9)}
  }

  /* ---------- Contact ---------- */
  #contact .wrap{text-align:center}
  #contact h2{font-size:clamp(2.4rem,7vw,4.6rem)}
  /* max-width still applies, so the auto margins do the centring */
  #contact p{margin-left:auto;margin-right:auto}
  .links{display:flex;gap:26px;justify-content:center;margin-top:26px;flex-wrap:wrap}
  .links a{font-family:"IBM Plex Mono",monospace;font-size:.85rem;letter-spacing:.05em}

  /* ---------- Side nav: the loaf ---------- */
  .rail{
    position:fixed;left:26px;top:50%;transform:translateY(-50%);
    z-index:5;
  }
  .baguette-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:0}

  .slice{
    display:flex;align-items:center;gap:13px;
    color:var(--steel);
    font-family:"IBM Plex Mono",monospace;font-size:.72rem;
    margin-bottom:0;                          /* 0 = one unbroken baguette */
    transition:margin-bottom .6s var(--ease-settle);
  }
  .slice .lbl{line-height:1.4}

  .slice-body{
    display:block;
    opacity:.42;
    /* cut faces stay hidden until a segment is actually separated */
    --face-top-op:0;
    --face-bot-op:0;
    transform-origin:left center;             /* swing away from the spine */
    transition:transform .6s var(--ease-settle),opacity .5s var(--ease),filter .5s var(--ease);
  }

  /* passed → cut away and fanned out; both faces exposed */
  .slice.cut{margin-bottom:8px}
  .slice.cut .slice-body{
    opacity:.52;
    --face-top-op:.85;
    --face-bot-op:.85;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  }

  /* current section → the segment being cut. No scale: equal widths keep
     the baguette reading as one object. */
  .slice.active{margin-bottom:8px}
  .slice.active .slice-body{
    opacity:1;
    transform:translateX(10px);
    --face-top-op:.85;
    --face-bot-op:.85;
    filter:drop-shadow(0 5px 12px rgba(0,0,0,.5));
  }

  /* the segment directly below the cut shows its fresh top face only —
     everything under it is still joined */
  .slice.next .slice-body{--face-top-op:.85}

  .slice:hover .slice-body{opacity:.85}

  .slice .lbl{
    opacity:0;transform:translateX(-6px);
    transition:.35s var(--ease);
    letter-spacing:.12em;text-transform:uppercase;
    white-space:nowrap;
  }
  .slice:hover .lbl{opacity:1;transform:none}
  .slice.active{color:var(--brass)}
  .slice.active .lbl{opacity:1;transform:none;color:var(--brass)}

  /* ---------- Reveal animation ---------- */
  [data-reveal]{
    opacity:0;transform:translateY(26px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
    transition-delay:calc(var(--i,0) * 80ms);
  }
  [data-reveal].in{opacity:1;transform:none}

  /* ---------- Responsive ---------- */
  @media(max-width:820px){
    .about-grid,.proj-grid,.skill-grid{grid-template-columns:1fr;gap:28px}
    .rail{display:none}
    section{padding:80px 22px}
    .breadfall{width:96px}
    .play{height:300px}
  }

  /* Phones: shorter board, and JS scales the pieces down to match (see scale()) */
  @media(max-width:560px){
    .play{height:270px}
  }

  /* ---------- Reduced motion ---------- */
  @media(prefers-reduced-motion:reduce){
    html{scroll-snap-type:none;scroll-behavior:auto}
    [data-reveal]{opacity:1;transform:none;transition:none}
    .bg,.grid,.breadfall{display:none}
    .cursor,.scroll-hint span,.glow-tr{animation:none}
    .play.solved .steam i{animation:none}
    .piece{transition:none}
    .reveal-note{transition:none}
  }

  /* ---------- Print: clean CV export ---------- */
  @media print{
    .rail,.breadfall,.grain,.glow-tr,.bg,.grid,.scroll-hint,#game,.cta-row{display:none !important}
    html,body{background:#fff;color:#111}
    section{min-height:auto;display:block;padding:14px 0;page-break-inside:avoid}
    h1{font-size:2.2rem}
    h2{font-size:1.4rem;margin-bottom:12px}
    h1,h2,h3,.eyebrow,.proj .label{color:#111}
    p,.tag,.side-card .k,.sec-no,.job .when{color:#333}
    a{color:#111;text-decoration:underline}
    .side-card,.proj{border:1px solid #ccc;background:#fff}
    .about-grid,.proj-grid,.skill-grid{grid-template-columns:1fr 1fr;gap:20px}
    .skill-card{border:1px solid #ccc;background:#fff}
    .skill-card h3,.proj-links a{color:#111}
    .tag{border:1px solid #bbb;background:none;box-shadow:none;color:#333}
    mark.bake{background:none;color:#111;font-weight:600;padding:0;text-shadow:none}
    .avatar{max-width:150px;border:1px solid #ccc;background:none}
    .avatar-ph{display:none}
  }