:root{--accent:#8f1f2c;--paper:#f5f2eb;--ink:#171513;--title-font:'Cormorant Garamond',serif;--body-font:'DM Sans',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body-font)}
.hero{height:58vw;min-height:520px;max-height:760px;position:relative;overflow:hidden;background:#152128}.hero-video,.hero-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.hero-video iframe{transform:scale(1.2)}.hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.hero-video{z-index:1}.hero-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.08) 48%,rgba(0,0,0,.28))}
.topbar{position:absolute;z-index:4;top:0;left:0;right:0;padding:30px 6.5%;display:flex;justify-content:space-between;align-items:flex-start}.brand img{width:210px;filter:invert(1);opacity:.96}.menu{display:flex;gap:28px;margin-top:8px}.menu a{font-family:var(--title-font);font-size:15px;letter-spacing:.04em;color:white;text-decoration:none;text-shadow:0 1px 7px rgba(0,0,0,.35)}
.hero-controls{position:absolute;z-index:4;left:6.5%;bottom:62px;display:flex;align-items:center;gap:14px;color:white}.circle-btn{width:47px;height:47px;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(10,10,10,.18);color:white;font-size:21px;backdrop-filter:blur(4px);cursor:pointer}.hero-controls span{font-size:14px}
.manifesto{padding:56px 8% 58px;text-align:center;background:#f8f6f1}.manifesto h1,.section-title h2,.approach h2,.contact h2{font-family:var(--title-font);font-weight:500}.manifesto h1{font-size:32px;letter-spacing:.18em;margin:0 0 22px}.manifesto p{font-size:16px;line-height:1.48;margin:0 auto 22px;max-width:900px;color:#4a4845}
.portfolio{padding:32px 3.4% 34px}.section-title{display:flex;align-items:center;gap:18px;margin:0 0 16px}.section-title span,.kicker span{display:block;width:46px;height:2px;background:var(--accent)}.section-title h2{font-size:25px;letter-spacing:.12em;margin:0}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:300px;gap:4px}.tile{position:relative;overflow:hidden;background:#222;cursor:default}.tile.wide{grid-column:span 2}.tile img,.editable-image img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1);transition:transform .2s}.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.72))}.tile-copy{position:absolute;left:18px;right:16px;bottom:16px;color:white;z-index:2}.tile-copy h3{font-family:var(--title-font);font-size:24px;font-weight:400;margin:0 0 3px}.tile-copy p{margin:0;font-size:11px;letter-spacing:.16em}
.approach{display:grid;grid-template-columns:44% 56%;min-height:250px;background:#f8f6f1}.approach-image{overflow:hidden;min-height:250px}.approach-copy{padding:35px 6%}.kicker{display:flex;gap:18px;align-items:center;font-family:var(--title-font);letter-spacing:.12em;font-size:13px}.approach h2{font-size:29px;letter-spacing:.06em;margin:14px 0 10px}.approach p{font-size:14px;line-height:1.55;color:#4c4945;margin:0;max-width:670px}
.contact{display:grid;grid-template-columns:58% 42%;background:linear-gradient(90deg,#260c05,#51220f 58%,#2a120a);color:#fff;min-height:290px}.contact-copy{padding:52px 7%}.contact h2{font-size:42px;font-weight:400;margin:0 0 15px}.contact p{font-size:14px;margin:0 0 25px}.contact a{display:inline-block;padding:15px 25px;border:1px solid #d7be74;color:#f2db8d;text-decoration:none;font-size:15px;letter-spacing:.02em}.contact-image{overflow:hidden;min-height:290px}
.edit-toggle{position:fixed;z-index:1000;right:18px;bottom:18px;border:0;background:#171513;color:#fff;padding:12px 18px;border-radius:28px;box-shadow:0 5px 20px rgba(0,0,0,.25);cursor:pointer}.editor{position:fixed;z-index:1100;right:-340px;top:0;width:320px;height:100vh;background:#fff;padding:18px;box-shadow:-8px 0 30px rgba(0,0,0,.18);transition:right .25s;overflow:auto}.editor.open{right:0}.editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.editor-head button{border:0;background:none;font-size:28px;cursor:pointer}.editor label{display:block;font-size:13px;margin:16px 0}.editor select,.editor input[type=color],.editor input[type=text],.editor input:not([type]){display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #d9d4cc;background:#fff}.nav-editor{margin:14px 0;padding:10px;background:#faf8f4}.nav-editor summary{cursor:pointer;font-size:13px;font-weight:600}.nav-editor label{margin:10px 0}.nav-editor input+input{margin-top:5px}.editor-note{font-size:12px;line-height:1.4;color:#69635f;background:#f4f1eb;padding:10px;margin:10px 0}.editor-btn{width:100%;padding:11px;margin-top:10px;background:#171513;color:#fff;border:1px solid #171513;cursor:pointer}.editor-btn.ghost{background:#fff;color:#171513}
.editing [contenteditable=true]{outline:1px dashed rgba(143,31,44,.5);outline-offset:3px}.editing .tile,.editing .editable-image{cursor:pointer}.editing .tile:hover,.editing .editable-image:hover{outline:3px solid var(--accent);outline-offset:-3px}.image-modal{position:fixed;z-index:1200;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center}.image-modal[hidden]{display:none}.image-panel{width:min(420px,90vw);background:white;padding:18px}.image-panel label{display:block;margin:14px 0;font-size:13px}.image-panel input{width:100%;margin-top:7px}
@media(max-width:760px){.hero{height:72vh}.topbar{padding:20px}.brand img{width:160px}.menu{gap:12px;flex-wrap:wrap;justify-content:flex-end}.menu a{font-size:11px}.hero-controls{left:20px;bottom:28px}.manifesto{padding:44px 22px}.manifesto h1{font-size:24px}.manifesto p{font-size:14px}.portfolio-grid{grid-template-columns:1fr;grid-auto-rows:320px}.tile.wide{grid-column:auto}.approach,.contact{grid-template-columns:1fr}.approach-image,.contact-image{min-height:280px}.contact h2{font-size:34px}.editor{width:min(320px,90vw)}}
video.hero-video{object-fit:cover;object-position:center;z-index:1}.hero{height:38vw;min-height:420px;max-height:680px}.hero-fallback{display:none}.editing{padding-right:340px}.editor{width:330px;right:-360px}.editor.open{right:0}.selected{outline:2px solid #aa4f36!important;outline-offset:5px}.editor details{border-bottom:1px solid #ddd4c7;padding:12px 0}.editor summary{cursor:pointer;font-weight:600}.editor input[type=number],.editor input[type=range]{width:100%;margin-top:6px}.editor-btn{border-radius:5px}#selectionLabel,#saveStatus{font-size:12px;line-height:1.5;color:#655c54}#dragElement{touch-action:none;cursor:move}.image-modal{inset:auto 350px 18px auto;background:transparent;box-shadow:0 8px 45px #0004}.image-panel{width:290px;border-radius:8px}.editing .tile:after{pointer-events:none}.editor input,.editor select{font-size:14px}.editor-head{position:sticky;top:-18px;background:white;padding:12px 0;z-index:2}button:focus-visible,a:focus-visible{outline:3px solid #c48c4d;outline-offset:4px}.tile img{display:block}[data-link]:not([data-link=""]){cursor:pointer}@media(max-width:900px){.editing{padding-right:0}.editing main,.editing header{margin-right:0}.editor{top:0;height:55vh;width:300px}.image-modal{right:10px;bottom:10px}.hero{height:65vh;min-height:390px}.manifesto h1{letter-spacing:.1em}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Full-screen opening, aligned with the supplied visual reference. */
.hero{height:100vh;height:100svh;min-height:0;max-height:none}
.topbar{inset:0;padding:0;pointer-events:none}
.topbar a{pointer-events:auto}
.brand{position:absolute;left:4.8%;top:60%;width:36%;max-width:540px;mix-blend-mode:screen}
.brand img{display:block;width:100%;filter:brightness(0) invert(1);opacity:1}
.menu{position:absolute;top:34px;right:4.5%;gap:36px;margin:0}
.menu a{font-family:var(--body-font);font-size:11px;font-weight:400;letter-spacing:.26em;text-shadow:none}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 65%,rgba(245,242,235,.9) 100%)}
.hero-controls{bottom:30px}
.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.approach h2{margin-top:0}
@media(max-width:760px){.hero{height:100vh;height:100svh;min-height:0;max-height:none}.menu{top:26px;right:6%;left:6%;justify-content:flex-end;gap:20px}.menu a{font-size:10px;letter-spacing:.16em}.brand{left:6%;top:61%;width:78%;max-width:500px}.portfolio-grid{grid-template-columns:1fr}}

/* Showreel audio toggle and tonal contact button. */
#soundBtn{display:inline-flex;align-items:center;justify-content:center}
.contact a[href="mailto:contact@istorik.studio"]{background:#713e2c!important;border:0!important;color:#fff5ed!important;box-shadow:none!important;border-radius:0;padding:16px 26px;text-decoration:none}
.contact a[href="mailto:contact@istorik.studio"]:hover{background:#85503c!important}

#editToggle[hidden]{display:none!important}