/* Mattias Paul portfolio. Layout: header bar, then two columns (room left, section panel right); one column on phones. */
:root{
  --bg:#f4efe6; --panel:#fffdf8; --fg:#1f2624; --muted:#5d6864; --line:#e2d9c8;
  --accent:#2f7d6d; --accent-ink:#ffffff; --chip:#e7f0ec; --mark:#e07a5f;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
}
body.evening{
  --bg:#1e2632; --panel:#26303d; --fg:#eef0ea; --muted:#b3bcc4; --line:#3a4656;
  --accent:#7fd1bd; --accent-ink:#11201c; --chip:#2f3d48;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 var(--body); transition:background-color .6s, color .6s}
h1,h2,h3,h4{font-family:var(--display); line-height:1.2; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--accent)}
button{font:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.skip{position:absolute; left:-999px; top:8px; background:var(--panel); padding:6px 12px; z-index:10}
.skip:focus{left:8px}

/* header */
.topbar{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:10px max(16px, env(safe-area-inset-left)) 10px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:5}
.brand{font-family:var(--display); font-weight:700; line-height:1.15; margin-right:auto}
.brand small{display:block; font-family:var(--body); font-weight:400; font-size:.78rem; color:var(--muted)}
.nav{display:flex; flex-wrap:wrap; gap:2px; align-items:center}
.nav button{color:var(--fg); background:none; border:1px solid transparent; border-radius:999px; padding:5px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:.92rem}
.nav button svg{width:16px; height:16px}
.nav button:hover{background:var(--chip)}
.nav button[aria-current="true"]{background:var(--chip); border-color:var(--line); font-weight:700}
.actions{display:flex; align-items:center; gap:8px}
.cta{font-size:.9rem; font-weight:700; padding:6px 14px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); text-decoration:none; cursor:pointer}
.ghost{font-size:.88rem; padding:5px 12px; border-radius:999px; border:1px solid var(--line); color:var(--fg); text-decoration:none}
.iconbtn{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--fg); cursor:pointer}
.iconbtn svg{width:16px; height:16px}

/* main layout */
.body{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); min-height:calc(100vh - 60px)}
.scene{display:grid; align-content:start; gap:6px; padding:24px max(16px, env(safe-area-inset-left)) 12px; min-width:0}
.hello{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; align-items:center}
.portrait{width:96px; height:96px; border-radius:18px; object-fit:cover; display:block; box-shadow:0 2px 0 var(--line)}
.hello h1{font-size:clamp(1.3rem, 2.6vw, 1.85rem)}
.hint{grid-column:1 / -1; display:inline-flex; align-items:center; gap:8px; font-size:.9rem}
.hint i{width:10px; height:10px; border-radius:50%; background:var(--mark); flex:none}
#room{width:100%; max-width:760px; height:auto; display:block; margin:0 auto; touch-action:manipulation}

/* panel */
.panel{background:var(--panel); border-left:1px solid var(--line); padding:26px 28px 40px; display:grid; gap:14px; align-content:start; min-width:0}
.panel h2{font-size:1.45rem}
.panel h2:focus{outline:none}
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.panel p,.panel li{font-size:.96rem}
.muted{color:var(--muted)}
.ph{border:1.5px dashed var(--muted); border-radius:8px; padding:12px; color:var(--muted); font-size:.92rem}
.ph b{color:var(--fg)}
.card{border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:grid; gap:8px}
.card.feature{border:2px solid var(--accent); padding:20px 22px; gap:12px}
.card .title{font-family:var(--display); font-size:1.15rem; line-height:1.25; font-weight:700}
.card dl{display:grid; gap:4px; margin:0}
.card dt{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:10px}
.card dt:first-child{margin-top:0}
.card dd{margin:0; line-height:1.6}
.credit{font-size:.84rem; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:.8rem; padding:2px 9px; border-radius:999px; background:var(--chip); justify-self:start}
.tl{list-style:none; margin:0; padding:0; display:grid}
.tl li{display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; padding:9px 0; border-top:1px solid var(--line)}
.tl .yr{font-family:var(--mono); font-size:.78rem; color:var(--muted); padding-top:2px}
.tl b{display:block}
.tools{list-style:none; margin:0; padding:0; display:grid}
.tools li{display:grid; gap:2px; padding:10px 0; border-top:1px solid var(--line)}
.tools li:first-child{border-top:0; padding-top:0}
.tools b{font-family:var(--display)}
.tools span{color:var(--muted); font-size:.94rem}
.tabs{display:inline-flex; justify-self:start; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; background:var(--bg)}
.tabs button{border:0; background:none; color:var(--fg); padding:5px 14px; border-radius:999px; cursor:pointer; font-size:.9rem}
.tabs button[aria-selected="true"]{background:var(--accent); color:var(--accent-ink); font-weight:700}
.copyrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.copyrow code{font-family:var(--mono); font-size:.92rem; user-select:all; overflow-wrap:anywhere}
.btn{font-size:.9rem; padding:6px 12px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer}
.panel h3{font-size:1.02rem; margin-top:6px}

/* room interaction */
.hot,.floor,.marker,.switch{cursor:pointer; outline:none}
.hot.lit{filter:drop-shadow(0 0 1.5px #e07a5f) drop-shadow(0 0 5px rgba(224,122,95,.75))}
.marker .tagwrap{visibility:hidden; opacity:0}
.marker:hover .tagwrap,.marker.lit .tagwrap,.marker.sel .tagwrap,.marker:focus-visible .tagwrap{visibility:visible; opacity:1}
.marker .disc{fill:#fffdf8; stroke:#e07a5f; stroke-width:2.5}
.marker .ico{fill:none; stroke:#1f2624; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.marker.sel .disc{fill:#e07a5f}
.marker.sel .ico{stroke:#ffffff}
.marker:focus-visible .disc{stroke:#2f7d6d; stroke-width:3.5}
.switch:focus-visible .plate{stroke:#2f7d6d; stroke-width:3}
.pulse{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .hot{transition:filter .15s}
  .marker .tagwrap{transition:opacity .15s}
  .pulse{transform-box:fill-box; transform-origin:center; animation:pulse 2.6s ease-out infinite}
  .steam{animation:steam 1.4s ease-out infinite; transform-box:fill-box; transform-origin:bottom}
}
@keyframes pulse{0%{opacity:.5; transform:scale(1)}100%{opacity:0; transform:scale(1.9)}}
@keyframes steam{0%{opacity:0; transform:translateY(4px)}30%{opacity:.9}100%{opacity:0; transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){ body{transition:none} }

/* phone */
@media (max-width:860px){
  .body{grid-template-columns:1fr; min-height:0}
  .topbar{gap:8px}
  .nav{order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding-bottom:2px; scrollbar-width:none}
  .nav button{border-color:var(--line); flex:0 0 auto}
  .actions .ghost{display:none}
  .portrait{width:64px; height:64px; border-radius:14px}
  .scene{padding-top:16px}
  .panel{border-left:0; border-top:1px solid var(--line); border-radius:16px 16px 0 0; box-shadow:0 -6px 18px rgba(0,0,0,.08); padding:22px max(16px, env(safe-area-inset-left)) 40px}
  .tl li{grid-template-columns:84px minmax(0,1fr)}
}

/* résumé view */
.resume{max-width:760px; margin:0 auto; padding:32px max(16px, env(safe-area-inset-left)) 60px; display:grid; gap:28px}
.resume section{display:grid; gap:12px}
@media print{
  .topbar .actions,.topbar .nav,.skip{display:none !important}
  .topbar{position:static}
  body{background:#fff; color:#000}
}
.resume-page .resume{border:0; box-shadow:none; border-radius:0; background:var(--panel)}
.resume-page{background:var(--bg)}
@media print{
  .resume-page .resume{padding:0}
  .resume .btn,.ph{display:none !important}
  .resume section{break-inside:avoid-page}
}