:root {
  --paper: #d9bc83;
  --paper-light: #ead5aa;
  --paper-dark: #c99f61;
  --ink: #2c1c12;
  --muted: #66503a;
  --red: #7d2c20;
  --gold: #b87522;
  --line: rgba(75, 44, 20, .28);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: #b78c53; font-family: Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.page-shell { width: 100%; overflow: visible; }

.topbar {
  position: fixed; top: 0;right:0;left:0;z-index: 30;
  height: 78px; padding: 0 max(28px, calc((100vw - var(--max)) / 2));
  display: grid; grid-template-columns: 315px 1fr 220px; align-items: center;
  color: var(--ink); border-bottom: 1px solid rgba(74, 42, 17, .35);
  background: rgba(220, 190, 134, .94); backdrop-filter: none;
  box-shadow: 0 5px 20px rgba(56, 32, 15, .14);
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
main{padding-top:78px}.hero{margin-top:-78px;min-height:100svh}.hero-copy{min-height:100svh}
.topbar.scrolled{background:rgba(205,174,119,.84);border-bottom-color:rgba(74,42,17,.2);box-shadow:0 8px 26px rgba(45,27,13,.16);backdrop-filter:none}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { color: var(--red); font-size: 36px; }
.brand strong { display: block; font: 400 23px/1 'Permanent Marker', cursive; white-space:nowrap; }
.brand small { color: var(--muted); font-size: 12px; }
.nav { display: flex; justify-content: center; gap: 30px; }
.nav a { position: relative; padding: 29px 0 25px; color: #563d28; font-size: 14px; font-weight: 700; }
.nav a.active, .nav a:hover { color: var(--red); }
.nav a.active::after, .nav a:hover::after { content: ''; position: absolute; right: 0; bottom: 15px; left: 0; height: 2px; background: var(--red); }
.cv-btn { justify-self: end; padding: 13px 18px; color: #fff3d7; border: 1px solid #5f2119; border-radius: 6px; background: var(--red); font-weight: 700; box-shadow: 0 5px 12px rgba(83, 31, 21, .2); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: calc(100svh - 78px); isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -2; background: url('assets/hero.jpg') center 42% / cover no-repeat; transform: scale(1.01); transition: transform 1.2s ease; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(35, 20, 11, .86) 0%, rgba(45, 26, 14, .64) 35%, rgba(35, 20, 11, .16) 68%, rgba(25, 15, 9, .05)); }
.hero:hover .hero-art { transform: scale(1.035); }
.hero-copy { width: min(var(--max), calc(100% - 56px)); min-height: calc(100svh - 78px); margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #f9e9c5; }
.eyebrow { margin: 0 0 12px; color: #e3a747; font-size: 12px; font-weight: 800; letter-spacing: .23em; }
.hero h1 { max-width: 750px; margin: 0; color: #fff0cf; font: 400 clamp(52px, 6vw, 88px)/.96 'Permanent Marker', cursive; letter-spacing: .02em; text-shadow: 0 5px 24px rgba(0, 0, 0, .38); }
.gold-line, .section-line { width: 62px; height: 3px; margin: 22px 0; background: var(--gold); }
.intro { max-width: 590px; margin: 0; color: rgba(255, 242, 215, .9); font: 18px/1.7 Georgia, serif; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; gap: 20px; padding: 14px 20px; border-radius: 6px; font-weight: 700; transition: transform .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-3px); }
.btn.primary { color: white; background: var(--red); box-shadow: 0 8px 18px rgba(77, 28, 20, .28); }
.btn.ghost { color: #fff0d0; border: 1px solid rgba(255, 231, 184, .65); background: rgba(39, 22, 12, .25); backdrop-filter: blur(5px); }

.dashboard-grid { background: var(--paper); }
.panel { position: relative; min-height: 620px; padding: 100px max(28px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); background-color: var(--paper-light); background-image: radial-gradient(circle at 10% 15%, rgba(255, 247, 216, .42), transparent 25%), radial-gradient(circle at 90% 80%, rgba(100, 58, 22, .08), transparent 28%), repeating-linear-gradient(0deg, rgba(76, 45, 20, .018) 0 1px, transparent 1px 6px); }
.panel:nth-child(even) { background-color: var(--paper); }
.panel h2 { margin: 0; color: var(--ink); font: 400 clamp(32px, 4vw, 50px)/1 'Permanent Marker', cursive; }

.about-content { display: grid; grid-template-columns: 300px minmax(0, 650px); gap: clamp(50px, 8vw, 110px); align-items: center; }
.portrait-sketch { position:relative;width:100%;aspect-ratio:1; }
.about img { width: 100%; height:100%; aspect-ratio: 1; object-fit: cover; border: 8px solid #bd8e50; border-radius: 50%; box-shadow: 10px 12px 0 rgba(87, 48, 20, .13), 0 24px 50px rgba(68, 39, 18, .18); }
.about p { margin: 0 0 18px; color: #46311f; font: clamp(18px, 1.7vw, 23px)/1.6 Georgia, serif; }
.about em, .about strong { color: var(--red); font-style: normal; }
.mini-mark { color: var(--red); font-size: 30px; }
.about-copy { position:relative; }
.about .about-content img { opacity:0;clip-path:circle(0 at 45% 38%);filter:grayscale(1) sepia(1) contrast(2.15) brightness(1.22); }
.drawing-pencil { position:absolute;z-index:4;left:42%;top:34%;color:#3d2818;font-size:34px;line-height:1;opacity:0;transform:rotate(-38deg);filter:drop-shadow(2px 3px 2px rgba(50,28,12,.28));pointer-events:none; }
.about .about-copy p { visibility:hidden; }
.about .about-copy p.type-ready { visibility:visible; }
.typed-char { opacity:0; }
.typed-char.is-written { opacity:1; }
.writing-quill { position:absolute;z-index:3;left:-12px;top:-18px;color:#542b17;font-size:34px;opacity:0;filter:drop-shadow(2px 3px 2px rgba(57,31,13,.22));transform:rotate(-28deg); }
.about.visible .about-content img { animation:pencil-portrait 2.8s cubic-bezier(.2,.7,.25,1) forwards; }
.about.visible .drawing-pencil { animation:artist-pencil 2.35s .12s linear forwards; }
.writing-quill.is-writing { opacity:1;transition:left .045s linear,top .045s linear; }
@keyframes pencil-portrait { 0%{opacity:0;clip-path:circle(0 at 45% 38%);filter:grayscale(1) sepia(1) contrast(2.2) brightness(1.25)} 12%{opacity:.45} 32%{opacity:.78;clip-path:circle(23% at 45% 38%)} 58%{opacity:1;clip-path:circle(46% at 50% 48%);filter:grayscale(1) sepia(1) contrast(1.85) brightness(1.15)} 76%{clip-path:circle(72% at 50% 50%);filter:grayscale(.9) sepia(.85) contrast(1.65)} 100%{opacity:1;clip-path:circle(72% at 50% 50%);filter:grayscale(0) sepia(0) contrast(1) brightness(1)} }
@keyframes artist-pencil { 0%{left:40%;top:30%;opacity:0;transform:rotate(-38deg)} 5%{opacity:1} 14%{left:60%;top:24%;transform:rotate(-24deg)} 25%{left:68%;top:42%;transform:rotate(-44deg)} 36%{left:38%;top:48%;transform:rotate(-20deg)} 47%{left:25%;top:30%;transform:rotate(-48deg)} 58%{left:31%;top:65%;transform:rotate(-26deg)} 70%{left:63%;top:72%;transform:rotate(-42deg)} 82%{left:76%;top:54%;transform:rotate(-20deg)} 93%{left:48%;top:82%;opacity:1;transform:rotate(-38deg)} 100%{left:54%;top:86%;opacity:0;transform:rotate(-32deg)} }

.skill-list { display: grid; gap: 24px; max-width: 1050px; padding: 32px; border: 1px solid var(--line); background: rgba(255, 242, 207, .25); }
.skill { display: grid; grid-template-columns: 270px 1fr 50px; gap: 24px; align-items: center; font-size: 15px; font-weight: 600; }
.skill b { font-weight: 600; }
.bar { height: 9px; overflow: hidden; border-radius: 10px; background: rgba(68, 39, 17, .18); }
.bar i { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, var(--red), #c17a27); }

/* Ink-styled skills */
.skills { overflow:hidden; }
.skills::after { content:'';position:absolute;right:-80px;bottom:45px;width:260px;height:190px;opacity:.07;background:radial-gradient(ellipse at 45% 55%,#4b1815 0 20%,transparent 21%),radial-gradient(circle at 70% 25%,#4b1815 0 8%,transparent 9%),radial-gradient(circle at 82% 66%,#4b1815 0 5%,transparent 6%),radial-gradient(circle at 22% 78%,#4b1815 0 4%,transparent 5%);transform:rotate(-14deg); }
.skills .skill-list { position:relative;gap:10px;max-width:1100px;padding:14px 0 0;border:0;background:transparent;box-shadow:none; }
.skills .skill-list::before { content:'ENCRE & MAÎTRISE';display:block;margin-bottom:10px;color:rgba(79,30,24,.65);font:700 10px/1 Inter,sans-serif;letter-spacing:.24em; }
.skills .skill { position:relative;min-height:58px;padding:9px 12px 9px 0;border-bottom:1px solid rgba(70,38,18,.16); }
.skills .skill > span { color:#3d281a;font-family:Georgia,serif;font-size:16px;opacity:0;transform:translateX(-15px); }
.skills .skill b { color:var(--red);font-family:Georgia,serif;opacity:0; }
.skills .bar { position:relative;height:12px;overflow:visible;border:0;border-radius:42% 58% 46% 54%;background:rgba(75,43,22,.12);box-shadow:inset 0 1px 2px rgba(59,31,14,.14); }
.skills .bar i { position:relative;display:block;width:var(--w);height:100%;border-radius:45% 55% 48% 52%;background:linear-gradient(90deg,#4d1716,#812a22 62%,#a6422d);box-shadow:0 1px 3px rgba(66,20,18,.25);transform:scaleX(0);transform-origin:left center; }
.skills .bar i::before { content:'';position:absolute;right:-5px;top:-3px;width:17px;height:17px;border-radius:52% 48% 58% 42%;background:#9a3828;opacity:0; }
.skills .bar i::after { content:'';position:absolute;right:-9px;top:14px;width:5px;height:8px;border-radius:50% 45% 55% 50%;background:#7d2c20;opacity:0; }
.skills.visible .skill > span { animation:ink-label .5s forwards; }
.skills.visible .skill b { animation:ink-label .4s forwards; }
.skills.visible .bar i { animation:ink-flow 1.25s cubic-bezier(.18,.72,.2,1) forwards; }
.skills.visible .bar i::before { animation:ink-head 1.25s ease-out forwards; }
.skills.visible .bar i::after { animation:ink-drop .65s 1.05s ease-in forwards; }
.skills.visible .skill:nth-child(2) :is(span,b,i){animation-delay:.12s}.skills.visible .skill:nth-child(3) :is(span,b,i){animation-delay:.28s}.skills.visible .skill:nth-child(4) :is(span,b,i){animation-delay:.44s}.skills.visible .skill:nth-child(5) :is(span,b,i){animation-delay:.60s}.skills.visible .skill:nth-child(6) :is(span,b,i){animation-delay:.76s}.skills.visible .skill:nth-child(7) :is(span,b,i){animation-delay:.92s}
@keyframes ink-flow { 0%{transform:scaleX(0);filter:blur(2px)} 45%{filter:blur(.5px)} 82%{transform:scaleX(1.03)} 100%{transform:scaleX(1);filter:none} }
@keyframes ink-label { from{opacity:0;transform:translateX(-15px)} to{opacity:1;transform:none} }
@keyframes ink-head { 0%,8%{opacity:0;transform:scale(.4)} 25%,82%{opacity:1;transform:scale(1)} 100%{opacity:.85;transform:scale(.8)} }
@keyframes ink-drop { 0%{opacity:0;transform:translateY(-5px) scale(.5)} 28%{opacity:.9} 100%{opacity:0;transform:translateY(22px) scale(.85)} }

.projects-head { display: flex; justify-content: space-between; align-items: flex-start; }
.projects-head > a { color: var(--red); font-weight: 700; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 38px; margin-top: 20px; }
.project-card { overflow: hidden; border: 1px solid #8a5d31; border-radius: 4px; background: #e2c490; box-shadow: 7px 8px 0 rgba(76, 43, 18, .13), 0 18px 35px rgba(65, 37, 17, .12); transition: transform .3s, box-shadow .3s; }
.project-card:hover { transform: translateY(-8px); box-shadow: 9px 12px 0 rgba(76, 43, 18, .13), 0 26px 45px rgba(65, 37, 17, .2); }
.thumb { position: relative; height: 270px; margin: 12px 12px 0; overflow: hidden; border: 1px solid rgba(53, 29, 12, .55); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.project-card:hover .thumb img { transform: scale(1.05); }
.thumb span { position: absolute; top: 10px; left: 10px; padding: 5px 9px; color: #fff0cf; background: var(--red); font-size: 10px; font-weight: 700; }
.project-body { padding: 22px 24px 24px; }
.project-body h3 { margin: 0 0 8px; font: 400 25px/1.2 'Permanent Marker', cursive; }
.project-body p { margin: 0 0 16px; color: #5c432d; line-height: 1.55; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tags span { padding: 5px 8px; border: 1px solid rgba(92, 52, 20, .2); background: rgba(114, 65, 24, .1); font-size: 11px; }
.project-body > a { display: block; margin-top: 18px; padding-top: 13px; color: var(--red); border-top: 1px solid rgba(84, 47, 19, .22); font-weight: 700; }

.stack-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; margin-top: 24px; }
.stack-grid div { display: grid; place-items: center; gap: 10px; padding: 25px 12px; border: 1px solid var(--line); background: rgba(255, 241, 205, .25); transition: transform .25s, background .25s; }
.stack-grid div:hover { transform: translateY(-5px); background: rgba(255, 244, 216, .5); }
.stack-grid img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(55, 31, 14, .16)); transition: transform .25s; }
.stack-grid div:hover img { transform: scale(1.1) rotate(-3deg); }
.stack-grid span { font-size: 13px; font-weight: 600; }
.stack { min-height: auto; padding-top: 64px; padding-bottom: 72px; }
.stack .section-line { margin: 16px 0 20px; }
.paper-burst { position: absolute; z-index: 4; left: max(22px,calc((100vw - var(--max))/2 - 80px)); top: 58%; width: 66px; height: 66px; opacity: 0; pointer-events: none; }
.paper-burst span { position: absolute; inset: 0; display: block; border: 2px solid #8a633c; border-radius: 47% 53% 42% 58%; background: radial-gradient(circle at 32% 28%,#f5e4ba,#d1aa70 58%,#9d713f); box-shadow: inset -8px -7px 13px rgba(75,43,18,.2),4px 7px 12px rgba(64,37,17,.22); }
.paper-burst span::before,.paper-burst span::after { content:''; position:absolute; background:rgba(92,57,26,.32); transform:rotate(-25deg); }
.paper-burst span::before { width:37px;height:2px;left:12px;top:20px;box-shadow:5px 12px 0 rgba(92,57,26,.25); }
.paper-burst span::after { width:2px;height:29px;left:29px;top:16px;box-shadow:13px 5px 0 rgba(92,57,26,.2); }
.paper-burst i,.paper-burst b,.paper-burst em { position:absolute; top:28px; left:28px; width:12px; height:9px; opacity:0; background:#d4ae73; border:1px solid #8a633c; }
.stack .stack-grid div { opacity: 0; transform: translate(-520px,-80px) scale(.4) rotate(-28deg); box-shadow:8px 14px 18px rgba(57,34,17,.2); }
.stack.visible .paper-burst { animation: paper-roll 1.45s cubic-bezier(.18,.72,.25,1) forwards,burst-hide .5s 1.85s forwards; }
.stack.visible .paper-burst span { animation: paper-wobble 1.45s ease-in-out forwards, paper-pop .48s 1.48s ease-out forwards; }
.stack.visible .paper-burst i { animation: scrap-one .9s 1.55s ease-out forwards; }
.stack.visible .paper-burst b { animation: scrap-two .95s 1.58s ease-out forwards; }
.stack.visible .paper-burst em { animation: scrap-three 1s 1.61s ease-out forwards; }
.stack.visible .stack-grid div { animation: stone-flow 1.05s cubic-bezier(.22,.68,.25,1) forwards; }
.stack.visible .stack-grid div:nth-child(1) { animation-delay: .08s; }
.stack.visible .stack-grid div:nth-child(2) { animation-delay: .18s; }
.stack.visible .stack-grid div:nth-child(3) { animation-delay: .28s; }
.stack.visible .stack-grid div:nth-child(4) { animation-delay: .38s; }
.stack.visible .stack-grid div:nth-child(5) { animation-delay: .48s; }
.stack.visible .stack-grid div:nth-child(6) { animation-delay: .58s; }
.stack.visible .stack-grid div:nth-child(7) { animation-delay: .68s; }
@keyframes paper-roll { 0%{opacity:0;transform:translateX(-150px) translateY(8px)} 10%{opacity:1} 30%{transform:translateX(-45px) translateY(-5px)} 48%{transform:translateX(28px) translateY(4px)} 68%{transform:translateX(98px) translateY(-3px)} 84%{transform:translateX(135px) translateY(2px)} 100%{opacity:1;transform:translateX(145px) translateY(0)} }
@keyframes paper-wobble { 0%{transform:rotate(-8deg) scale(.9)} 28%{transform:rotate(7deg) scale(.96)} 52%{transform:rotate(-5deg) scale(1)} 76%{transform:rotate(4deg) scale(.98)} 100%{transform:rotate(0) scale(1)} }
@keyframes paper-pop { 0%{opacity:1;transform:scale(1) rotate(0)} 48%{opacity:1;transform:scale(1.65) rotate(8deg)} 100%{opacity:0;transform:scale(.12) rotate(-12deg)} }
@keyframes burst-hide { to{opacity:0} }
@keyframes scrap-one { 0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(-65px,-58px) rotate(-150deg)} }
@keyframes scrap-two { 0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(78px,-35px) rotate(190deg)} }
@keyframes scrap-three { 0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(48px,62px) rotate(130deg)} }
@keyframes stone-flow { 0%{opacity:0;transform:translate(-520px,-80px) scale(.4) rotate(-28deg)} 18%{opacity:1;transform:translate(-360px,35px) scale(.68) rotate(22deg)} 42%{transform:translate(-205px,-18px) scale(.82) rotate(-14deg)} 64%{transform:translate(-88px,18px) scale(.94) rotate(8deg)} 82%{transform:translate(12px,-8px) scale(1.03) rotate(-3deg)} 92%{transform:translate(-4px,3px) scale(.99) rotate(1deg)} 100%{opacity:1;transform:none;box-shadow:none} }

.contact { min-height: 650px; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: clamp(50px, 7vw, 90px); align-items: center; }
.contact-copy { max-width: 380px; }
.contact-kicker { margin: 0 0 10px!important; color: var(--red)!important; font: 800 11px/1 Inter, sans-serif!important; letter-spacing: .22em; }
.contact-copy p { color: #4d3825; font: 19px/1.65 Georgia, serif; }
.contact-copy a, .contact-copy span { display: block; margin-top: 12px; font-size: 16px; }
.contact-copy a { color: var(--red); font-weight: 800; }
.contact-form { position: relative; width: 100%; max-width: 720px; display: grid; gap: 18px; padding: 34px; border: 1px solid #8a5b2c; background: rgba(241, 218, 173, .68); box-shadow: 8px 10px 0 rgba(78, 43, 17, .13), inset 0 0 55px rgba(103, 59, 22, .06); }
.contact-form::before,.contact-form::after { content: ''; position: absolute; width: 42px; height: 42px; border-color: var(--red); opacity: .55; }
.contact-form::before { top: 9px; left: 9px; border-top: 2px solid; border-left: 2px solid; }
.contact-form::after { right: 9px; bottom: 9px; border-right: 2px solid; border-bottom: 2px solid; }
.form-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; color: var(--red); border-bottom: 1px solid var(--line); font: 800 12px/1 Inter, sans-serif; letter-spacing: .16em; }
.form-heading i { width: 32px; height: 32px; display: grid; place-items: center; color: #f3dcae; border-radius: 50%; background: var(--red); font-style: normal; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 7px; color: #50371f; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.contact-form input,.contact-form textarea { width: 100%; padding: 13px 14px; color: var(--ink); border: 1px solid rgba(104, 63, 27, .38); border-radius: 3px; outline: none; background: rgba(255, 246, 220, .55); font: 15px/1.4 Georgia, serif; transition: border-color .2s, box-shadow .2s, background .2s; }
.contact-form textarea { min-height: 125px; resize: vertical; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color: #927553; }
.contact-form input:focus,.contact-form textarea:focus { border-color: var(--red); background: rgba(255, 247, 224, .8); box-shadow: 0 0 0 3px rgba(125, 44, 32, .1); }
.contact-form button { justify-self: start; display: inline-flex; gap: 24px; align-items: center; padding: 14px 22px; color: #fff1d3; border: 1px solid #5e2119; border-radius: 4px; background: var(--red); font: 700 14px/1 Inter, sans-serif; cursor: pointer; box-shadow: 0 6px 15px rgba(80, 29, 20, .2); transition: transform .2s, box-shadow .2s; }
.contact-form button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(80, 29, 20, .28); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 210px 1fr auto; padding: 0 24px; }
  .nav { gap: 20px; }
  .nav span { display: none; }
  .panel { padding: 80px 36px; }
  .contact { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 40px; }
  .stack-grid { grid-template-columns: repeat(4, 1fr); }
  .stack { padding-top: 58px; padding-bottom: 62px; }
  .paper-burst { left: 8px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 68px; }
  .topbar { height: 68px; grid-template-columns: 1fr auto; padding: 0 18px; }
  .brand strong { font-size: 18px; }
  .brand small, .cv-btn { display: none; }
  .menu-toggle { display: block; color: var(--ink); border: 0; background: transparent; font-size: 25px; }
  .nav { position: absolute; top: 68px; right: 0; left: 0; display: none; flex-direction: column; gap: 0; padding: 10px 20px; border-bottom: 1px solid var(--line); background: #d9ba82; }
  .nav.open { display: flex; }
  .nav span { display: inline; }
  .nav a { padding: 13px 0; }
  .nav a::after { display: none; }
  .hero, .hero-copy { min-height: calc(100svh - 68px); }
  .hero::before { background: linear-gradient(180deg, rgba(34, 20, 11, .18), rgba(34, 20, 11, .8) 74%); }
  .hero-art { background-position: 58% center; }
  .hero-copy { width: calc(100% - 40px); justify-content: flex-end; padding-bottom: 55px; }
  .hero h1 { font-size: clamp(43px, 14vw, 60px); }
  .intro { font-size: 16px; }
  .hero-actions { gap: 10px; flex-wrap: wrap; }
  .panel { min-height: auto; padding: 70px 22px; }
  .about-content { grid-template-columns: 1fr; gap: 35px; }
  .about img { width: min(78vw, 300px); justify-self: center; }
  .skill-list { padding: 20px; }
  .skill { grid-template-columns: 1fr 42px; gap: 10px; }
  .skill .bar { grid-column: 1 / -1; grid-row: 2; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .projects-head > a { display: none; }
  .thumb { height: 220px; }
  .stack-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stack { padding-top: 52px; padding-bottom: 56px; }
  .paper-burst { top: 43%; transform:scale(.75); }
  .contact { padding: 70px 22px; grid-template-columns: 1fr; gap: 35px; }
  .contact-copy { max-width: 520px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 26px 20px; }
}
@media(max-width:720px){.topbar.scrolled{background:rgba(213,181,125,.8)}}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .stack .stack-grid div { opacity: 1; transform: none; animation: none; }
  .paper-burst { display:none; }
}

/* Cinematic landing sequence */
.cinematic-intro { position:absolute;inset:0;z-index:12;display:grid;place-items:center;overflow:hidden;background:#080604;pointer-events:none; }
.cinematic-title { position:relative;z-index:2;display:grid;gap:10px;text-align:center;color:#f7e4bd;opacity:0;letter-spacing:.32em;text-shadow:0 3px 20px #000; }
.cinematic-title span { font-size:clamp(10px,1vw,14px);font-weight:700; }
.cinematic-title strong { font:400 clamp(34px,5vw,72px)/1 'Permanent Marker',cursive;letter-spacing:.08em; }
.cinematic-title::after { content:'';width:0;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,#d49333,transparent); }
.cinematic-flare { position:absolute;top:25%;right:30%;width:8px;height:8px;border-radius:50%;opacity:0;background:#fff4c8;box-shadow:0 0 25px 10px #f5c46b,0 0 90px 34px rgba(237,164,59,.5); }
.skip-intro { position:absolute;right:28px;bottom:24px;z-index:15;padding:8px 12px;color:rgba(255,239,207,.75);border:1px solid rgba(255,229,180,.32);border-radius:3px;background:rgba(17,10,6,.35);font-size:11px;letter-spacing:.08em;cursor:pointer;opacity:0; }
.cinematic-playing { overflow:hidden; }
.cinematic-playing:not(.cinematic-ready) .cinematic-intro,.cinematic-playing:not(.cinematic-ready) .cinematic-title,.cinematic-playing:not(.cinematic-ready) .cinematic-title::after,.cinematic-playing:not(.cinematic-ready) .cinematic-flare,.cinematic-playing:not(.cinematic-ready) .hero-art,.cinematic-playing:not(.cinematic-ready) .hero-copy,.cinematic-playing:not(.cinematic-ready) .topbar{animation-play-state:paused!important}
.cinematic-playing .topbar { position:fixed;top:0;right:0;left:0;width:100%;backdrop-filter:none;animation:cinema-header .72s 4.35s both; }
.cinematic-playing .hero,.cinematic-playing .hero-copy { min-height:100svh; }
.cinematic-playing .hero-art { will-change:transform;backface-visibility:hidden;animation:cinema-camera 5.8s cubic-bezier(.2,.7,.2,1) both; }
.cinematic-playing .hero::after { content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.62));animation:cinema-vignette 5.6s both; }
.cinematic-playing .cinematic-intro { animation:cinema-curtain 5.4s both; }
.cinematic-playing .cinematic-title { animation:cinema-title 3.5s .55s both; }
.cinematic-playing .cinematic-title::after { animation:cinema-line 1.5s 1s both; }
.cinematic-playing .cinematic-flare { animation:cinema-flare 2.8s 2.4s both; }
.cinematic-playing .skip-intro { animation:cinema-skip .6s 1s forwards; }
.cinematic-playing .hero-copy { animation:cinema-copy .82s 4.42s cubic-bezier(.2,.8,.2,1) both; }
.cinematic-done{overflow:auto}.cinematic-done .cinematic-intro,.cinematic-done .skip-intro{display:block;visibility:hidden;opacity:0;pointer-events:none}
.cinematic-done .hero-copy,.cinematic-done .hero-copy .eyebrow,.cinematic-done .hero-copy h1,.cinematic-done .hero-copy .gold-line,.cinematic-done .hero-copy .intro,.cinematic-done .hero-actions { animation:none;opacity:1;transform:none; }
@keyframes cinema-curtain { 0%,14%{background:#080604;opacity:1} 35%,72%{background:rgba(8,6,4,.18);opacity:1} 100%{opacity:0} }
@keyframes cinema-title { 0%,8%{opacity:0;transform:translate3d(0,18px,0)} 28%,68%{opacity:1;transform:translate3d(0,0,0)} 100%{opacity:0;transform:translate3d(0,-10px,0)} }
@keyframes cinema-line { 0%{width:0;opacity:0} 40%,80%{width:210px;opacity:1} 100%{width:210px;opacity:0} }
@keyframes cinema-camera { 0%{transform:translate3d(2%,0,0) scale(1.16)} 100%{transform:translate3d(0,0,0) scale(1.01)} }
@keyframes cinema-flare { 0%{opacity:0;transform:scale(.2)} 35%{opacity:.55;transform:scale(.8)} 100%{opacity:0;transform:scale(1.8)} }
@keyframes cinema-vignette { 0%,65%{opacity:1} 100%{opacity:0} }
@keyframes cinema-header { from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:none} }
@keyframes cinema-skip { to{opacity:1} }
@keyframes cinema-copy { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes cinema-copy-item { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media(max-width:720px){.cinematic-title{padding:0 22px}.cinematic-title strong{font-size:clamp(32px,12vw,52px)}.skip-intro{right:16px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.cinematic-intro,.skip-intro{display:none!important}.cinematic-playing{overflow:auto}.cinematic-playing .hero-copy{opacity:1!important;transform:none!important}}

/* Captain's log skills */
.skills::after { display:none; }
.skills .skill-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;max-width:1050px;padding:0;margin-top:6px; }
.skills .skill-list::before { display:none; }
.skills .skill { min-height:112px;padding:22px 24px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:16px 20px;border:1px solid rgba(66,54,37,.32);background:linear-gradient(135deg,rgba(247,229,188,.5),rgba(211,183,128,.28));box-shadow:4px 5px 0 rgba(78,54,28,.08);clip-path:polygon(1% 3%,98% 0,100% 94%,97% 100%,2% 97%,0 8%); }
.skills .skill::before { content:'✦';position:absolute;right:20px;bottom:14px;color:rgba(29,54,63,.12);font-size:26px; }
.skills .skill > span { color:#263a3f;font-family:Georgia,serif;font-size:16px;letter-spacing:.01em; }
.skills .skill b { color:#263a3f;font-family:'Permanent Marker',cursive;font-size:16px; }
.skills .bar { grid-column:1/-1;width:100%;height:7px;border-radius:0;background:repeating-linear-gradient(90deg,rgba(39,58,62,.17) 0 8px,transparent 8px 11px);box-shadow:none; }
.skills .bar i { height:7px;border-radius:45% 55% 40% 60%;background:linear-gradient(90deg,#172d35,#274751 70%,#3d6268);box-shadow:0 1px 2px rgba(20,40,46,.3); }
.skills .bar i::before { right:-4px;top:-3px;width:13px;height:13px;background:#2c5058; }
.skills .bar i::after { display:none; }
.skills.visible .skill { animation:log-card .55s ease both; }
.skills.visible .skill:nth-child(1){animation-delay:.05s}.skills.visible .skill:nth-child(2){animation-delay:.13s}.skills.visible .skill:nth-child(3){animation-delay:.21s}.skills.visible .skill:nth-child(4){animation-delay:.29s}.skills.visible .skill:nth-child(5){animation-delay:.37s}.skills.visible .skill:nth-child(6){animation-delay:.45s}
@keyframes log-card { from{opacity:0;transform:translateY(15px) rotate(-1deg)} to{opacity:1;transform:none} }
@media(max-width:720px){.skills .skill-list{grid-template-columns:1fr}.skills .skill{min-height:105px;padding:20px}.skills .bar{grid-column:1/-1;grid-row:2}}

/* Ancient navigator's register */
.skills .skill-list-old{display:none}.skill-register{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;max-width:1080px}.skill-entry{position:relative;min-height:126px;padding:22px 22px 22px 18px;display:grid;grid-template-columns:52px minmax(0,1fr) 56px;gap:17px;align-items:center;border:1px solid #98703f;background:radial-gradient(circle at 88% 15%,rgba(105,60,22,.1),transparent 25%),linear-gradient(105deg,rgba(245,224,181,.72),rgba(213,180,121,.55));box-shadow:inset 0 0 28px rgba(91,51,18,.07),5px 6px 0 rgba(85,48,20,.08)}.skill-entry:before,.skill-entry:after{content:'';position:absolute;width:18px;height:18px;border-color:rgba(99,60,27,.55)}.skill-entry:before{left:7px;top:7px;border-left:1px solid;border-top:1px solid}.skill-entry:after{right:7px;bottom:7px;border-right:1px solid;border-bottom:1px solid}.skill-number{height:58px;display:grid;place-items:center;color:#704a24;border-right:1px solid rgba(104,63,27,.3);font:400 17px/1 Georgia,serif}.skill-info{min-width:0;display:grid;gap:17px}.skill-info>span{color:#392516;font:700 17px/1.25 Georgia,serif}.skill-entry b{width:52px;height:52px;display:grid;place-items:center;color:#efd198;border:2px solid #67241c;border-radius:48% 52% 46% 54%;background:radial-gradient(circle at 35% 28%,#a74735,#7d2c20 62%,#571b18);box-shadow:inset 0 0 0 3px rgba(244,193,118,.15),2px 4px 7px rgba(73,34,18,.25);font:400 13px/1 'Permanent Marker',cursive;opacity:0}.rope{position:relative;width:100%;height:8px;border:1px solid rgba(92,56,24,.28);border-radius:8px;background:repeating-linear-gradient(135deg,#9a6c32 0 4px,#c49650 4px 8px)}.rope:before,.rope:after{content:'';position:absolute;z-index:2;top:50%;width:8px;height:12px;border:2px solid #795024;border-radius:50%;background:#d5ae70;transform:translateY(-50%)}.rope:before{left:-5px}.rope:after{right:-5px}.rope i{position:relative;z-index:1;display:block;width:var(--w);height:100%;border-radius:8px;background:repeating-linear-gradient(135deg,#5e351b 0 3px,#825229 3px 6px);transform:scaleX(0);transform-origin:left}.rope i:after{content:'';position:absolute;right:-5px;top:50%;width:11px;height:15px;border:2px solid #68401d;border-radius:45%;background:#c28a42;transform:translateY(-50%)}.skills.visible .skill-entry{animation:register-in .6s ease both}.skills.visible .skill-entry b{animation:wax-in .5s ease forwards}.skills.visible .rope i{animation:rope-in 1.1s cubic-bezier(.2,.7,.2,1) forwards}.skills.visible .skill-entry:nth-child(1){animation-delay:.04s}.skills.visible .skill-entry:nth-child(2){animation-delay:.13s}.skills.visible .skill-entry:nth-child(3){animation-delay:.22s}.skills.visible .skill-entry:nth-child(4){animation-delay:.31s}.skills.visible .skill-entry:nth-child(5){animation-delay:.40s}.skills.visible .skill-entry:nth-child(6){animation-delay:.49s}.skills.visible .skill-entry:nth-child(1) :is(b,i){animation-delay:.25s}.skills.visible .skill-entry:nth-child(2) :is(b,i){animation-delay:.38s}.skills.visible .skill-entry:nth-child(3) :is(b,i){animation-delay:.51s}.skills.visible .skill-entry:nth-child(4) :is(b,i){animation-delay:.64s}.skills.visible .skill-entry:nth-child(5) :is(b,i){animation-delay:.77s}.skills.visible .skill-entry:nth-child(6) :is(b,i){animation-delay:.9s}@keyframes register-in{from{opacity:0;transform:translateY(14px) rotate(-.5deg)}to{opacity:1;transform:none}}@keyframes rope-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes wax-in{0%{opacity:0;transform:scale(1.5) rotate(-14deg)}65%{opacity:1;transform:scale(.9) rotate(3deg)}100%{opacity:1;transform:none}}@media(max-width:720px){.skill-register{grid-template-columns:1fr}.skill-entry{min-height:114px;padding:17px 16px 17px 13px;grid-template-columns:42px minmax(0,1fr) 48px;gap:11px}.skill-number{height:52px}.skill-info>span{font-size:15px}.skill-entry b{width:46px;height:46px;font-size:12px}}
/* Unified antique ink block */
.skills .skill-register{position:relative;display:grid;grid-template-columns:1fr;gap:0;max-width:1060px;padding:40px 46px 28px;border:1px solid #8f6738;background:radial-gradient(circle at 9% 12%,rgba(255,244,213,.48),transparent 25%),rgba(235,207,153,.48);box-shadow:inset 0 0 45px rgba(85,47,17,.08),7px 8px 0 rgba(75,42,18,.08)}
.skills .skill-register:before{content:'✒  REGISTRE DES SAVOIRS';position:absolute;top:14px;left:46px;color:rgba(67,39,20,.68);font:700 10px/1 Georgia,serif;letter-spacing:.2em}
.skills .skill-entry{min-height:70px;padding:15px 4px;display:grid;grid-template-columns:minmax(220px,280px) minmax(220px,1fr) 52px;gap:22px;align-items:center;border:0;border-bottom:1px solid rgba(83,49,23,.18);background:none;box-shadow:none;opacity:1}
.skills .skill-entry:last-child{border-bottom:0}.skills .skill-entry:before,.skills .skill-entry:after{display:none}.skills .skill-number{display:none}.skills .skill-info{display:contents}.skills .skill-info>span{color:#352419;font:700 17px/1.3 Georgia,serif}
.skills .skill-entry b{width:auto;height:auto;display:block;color:#4a2b1c;border:0;border-radius:0;background:none;box-shadow:none;font:700 15px/1 Georgia,serif;text-align:right;opacity:0;transform:none}
.skills .rope{position:relative;width:100%;height:10px;overflow:visible;border:0;border-radius:50%;background:rgba(65,39,24,.1);box-shadow:none}.skills .rope:before,.skills .rope:after{display:none}
.skills .rope i{position:relative;display:block;width:var(--w);height:100%;border-radius:60% 40% 55% 45%;background:linear-gradient(90deg,#271912,#4a2b1d 55%,#6b3c24);box-shadow:0 1px 2px rgba(37,22,14,.25);transform:scaleX(0);transform-origin:left}
.skills .rope i:before{content:'';position:absolute;right:-7px;top:-3px;width:17px;height:16px;border:0;border-radius:58% 42% 51% 49%;background:#633720;box-shadow:0 1px 2px rgba(45,25,15,.25)}.skills .rope i:after{content:'';display:block;position:absolute;right:-5px;top:13px;width:5px;height:7px;border:0;border-radius:50%;background:#4a291b;opacity:0}
.skills.visible .skill-register .skill-entry{animation:none}.skills.visible .skill-register .rope i{animation:antique-ink 1.45s cubic-bezier(.2,.72,.18,1) forwards}.skills.visible .skill-register .rope i:after{animation:antique-drop .55s ease-in forwards}.skills.visible .skill-register .skill-entry b{animation:antique-number .35s forwards}
.skills.visible .skill-entry:nth-child(1) :is(i,b){animation-delay:.12s}.skills.visible .skill-entry:nth-child(2) :is(i,b){animation-delay:.32s}.skills.visible .skill-entry:nth-child(3) :is(i,b){animation-delay:.52s}.skills.visible .skill-entry:nth-child(4) :is(i,b){animation-delay:.72s}.skills.visible .skill-entry:nth-child(5) :is(i,b){animation-delay:.92s}.skills.visible .skill-entry:nth-child(6) :is(i,b){animation-delay:1.12s}
@keyframes antique-ink{0%{transform:scaleX(0);filter:blur(2px)}70%{filter:blur(.4px)}88%{transform:scaleX(1.025)}100%{transform:scaleX(1);filter:none}}@keyframes antique-drop{0%{opacity:0;transform:translateY(-3px) scale(.5)}30%{opacity:.8}100%{opacity:0;transform:translateY(16px) scale(.8)}}@keyframes antique-number{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@media(max-width:720px){.skills .skill-register{padding:40px 20px 20px}.skills .skill-register:before{left:20px}.skills .skill-entry{min-height:84px;padding:13px 0;grid-template-columns:1fr 42px;gap:8px 12px}.skills .skill-info{display:contents}.skills .skill-info>span{font-size:15px}.skills .rope{grid-column:1/-1;grid-row:2}.skills .skill-entry b{grid-column:2;grid-row:1}}

/* Interactive project folders */
.project-grid-old{display:none}.projects{min-height:680px}.project-folders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px;max-width:1000px;margin-top:28px}.project-folder{position:relative;min-height:290px;padding:56px 38px 32px;text-align:left;color:var(--ink);border:1px solid #8d6233;border-radius:2px;background:linear-gradient(160deg,#e8c98f,#d4aa6a);box-shadow:8px 10px 0 rgba(73,42,18,.12),0 22px 45px rgba(66,37,15,.13);cursor:pointer;overflow:visible;transition:transform .3s,box-shadow .3s}.project-folder:before{content:'';position:absolute;z-index:-1;top:-24px;left:0;width:46%;height:42px;border:1px solid #8d6233;border-bottom:0;border-radius:8px 10px 0 0;background:#d9b270}.project-folder:after{content:'';position:absolute;inset:10px;border:1px solid rgba(91,53,22,.18);pointer-events:none}.project-folder:hover{transform:translateY(-9px) rotate(-.4deg);box-shadow:10px 16px 0 rgba(73,42,18,.1),0 30px 55px rgba(66,37,15,.2)}.project-folder:nth-child(2):hover{transform:translateY(-9px) rotate(.4deg)}.folder-tab{position:absolute;top:-14px;left:22px;color:#65421f;font:700 10px/1 Inter,sans-serif;letter-spacing:.16em}.project-folder i{width:62px;height:62px;display:grid;place-items:center;margin-bottom:24px;color:#ecd39e;border:3px double #b47d38;border-radius:50%;background:#432b1c;font-size:27px;font-style:normal}.project-folder strong{display:block;font:400 clamp(28px,3vw,40px)/1 'Permanent Marker',cursive}.project-folder small{display:block;margin-top:12px;color:#634a32;font:16px/1.5 Georgia,serif}.project-folder em{position:absolute;right:30px;bottom:25px;color:#7d2c20;font-size:12px;font-style:normal;font-weight:800}
.project-dialog{width:min(1040px,calc(100% - 32px));max-height:90vh;padding:0;border:0;background:transparent;overflow:visible}.project-dialog::backdrop{background:rgba(28,17,10,.78);backdrop-filter:blur(6px)}.map-paper{position:relative;min-height:590px;max-height:90vh;padding:58px 64px 48px;overflow:auto;color:#342315;border:1px solid #8b5c2d;background:radial-gradient(circle at 8% 12%,rgba(255,247,216,.52),transparent 25%),radial-gradient(circle at 91% 80%,rgba(105,59,20,.1),transparent 28%),#dfbf82;box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 0 70px rgba(85,47,17,.1);clip-path:polygon(1% 2%,99% 0,100% 96%,98% 100%,2% 98%,0 5%)}.map-paper:before{content:'✦';position:absolute;right:50px;bottom:28px;width:90px;height:90px;display:grid;place-items:center;color:rgba(83,49,22,.18);border:1px solid rgba(83,49,22,.18);border-radius:50%;font-size:32px}.dialog-close{position:absolute;z-index:4;right:22px;top:18px;width:38px;height:38px;color:#efd6a3;border:1px solid #5f2119;border-radius:50%;background:var(--red);font-size:25px;cursor:pointer}.dialog-back{display:none;margin-bottom:18px;padding:0;color:#71351f;border:0;background:none;font-weight:800;cursor:pointer}.dialog-kicker{margin:0;color:#7d2c20;font-size:11px;font-weight:800;letter-spacing:.22em}.dialog-content h3{margin:8px 0 30px;font:400 clamp(35px,5vw,58px)/1 'Permanent Marker',cursive}.project-list{display:grid;gap:15px}.project-list button{display:grid;grid-template-columns:76px 1fr auto;gap:20px;align-items:center;padding:14px;text-align:left;color:var(--ink);border:1px solid rgba(91,54,24,.3);background:rgba(248,228,187,.42);cursor:pointer;transition:transform .2s,background .2s}.project-list button:hover{transform:translateX(7px);background:rgba(255,239,204,.68)}.project-list img{width:76px;height:64px;object-fit:cover;filter:sepia(.15)}.project-list strong{display:block;font:400 20px/1.2 'Permanent Marker',cursive}.project-list small{color:#70543a}.project-list em{color:#7d2c20;font-style:normal;font-weight:800}.project-detail{display:grid;grid-template-columns:1.2fr .8fr;gap:38px}.project-carousel{position:relative}.project-carousel img{width:100%;height:360px;object-fit:cover;border:8px solid rgba(244,219,173,.72);outline:1px solid #79502a;box-shadow:7px 8px 0 rgba(72,41,18,.12)}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px}.carousel-controls button{width:36px;height:34px;color:#f5dfb5;border:0;background:#572d1d;cursor:pointer}.carousel-dots{font:700 12px Georgia,serif}.project-description p{color:#513b28;font:17px/1.65 Georgia,serif}.project-description .tags{margin-top:22px}.project-description .tags span{background:rgba(104,59,22,.12)}
@media(max-width:720px){.project-folders{grid-template-columns:1fr;gap:42px}.project-folder{min-height:240px;padding:45px 26px 28px}.project-dialog{width:calc(100% - 18px)}.map-paper{min-height:80vh;padding:55px 22px 35px}.project-detail{grid-template-columns:1fr}.project-carousel img{height:230px}.project-list button{grid-template-columns:58px 1fr}.project-list img{width:58px;height:54px}.project-list em{display:none}}

/* Contact parchment unfolding */
.contact-form{opacity:0;clip-path:inset(49% 0 49% 0);transform:scaleX(.94);transform-origin:center center}
.contact-form::before,.contact-form::after{z-index:5;left:-12px;width:calc(100% + 24px);height:18px;border:1px solid #855a2d;border-radius:50%;background:linear-gradient(#ecd29d,#bb884b 48%,#8e5c2b 52%,#d4aa6c);box-shadow:0 4px 8px rgba(62,35,15,.25);opacity:0}
.contact-form::before{top:-9px;border-right:1px solid #855a2d;border-bottom:1px solid #855a2d}
.contact-form::after{right:auto;bottom:-9px;border-top:1px solid #855a2d;border-left:1px solid #855a2d}
.contact-form>*{opacity:0;transform:translateY(9px)}
.contact.visible .contact-form{animation:parchment-unfold 1.45s cubic-bezier(.2,.75,.2,1) forwards}
.contact.visible .contact-form::before{animation:scroll-top-roll 1.45s cubic-bezier(.2,.75,.2,1) forwards}
.contact.visible .contact-form::after{animation:scroll-bottom-roll 1.45s cubic-bezier(.2,.75,.2,1) forwards}
.contact.visible .contact-form>*{animation:form-ink-appear .55s 1.18s ease forwards}
.contact.visible .contact-form>*:nth-child(2){animation-delay:1.28s}.contact.visible .contact-form>*:nth-child(3){animation-delay:1.38s}.contact.visible .contact-form>*:nth-child(4){animation-delay:1.48s}.contact.visible .contact-form>*:nth-child(5){animation-delay:1.58s}
@keyframes parchment-unfold{0%{opacity:0;clip-path:inset(49% 0);transform:scaleX(.92)}12%{opacity:1}75%{clip-path:inset(0);transform:scaleX(1.015)}100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes scroll-top-roll{0%{top:calc(50% - 9px);opacity:0;transform:scaleX(.88)}10%{opacity:1}78%,100%{top:-9px;opacity:1;transform:scaleX(1)}}
@keyframes scroll-bottom-roll{0%{bottom:calc(50% - 9px);opacity:0;transform:scaleX(.88)}10%{opacity:1}78%,100%{bottom:-9px;opacity:1;transform:scaleX(1)}}
@keyframes form-ink-appear{from{opacity:0;transform:translateY(9px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.contact-form,.contact-form>*{opacity:1;clip-path:none;transform:none}.contact-form::before{top:-9px;opacity:1}.contact-form::after{bottom:-9px;opacity:1}}

/* Generated four-frame parchment animation */
.contact-form{min-height:540px;padding:76px 72px 70px;opacity:0;clip-path:none;transform:none;border:0;background-color:transparent;background-image:url('assets/scroll-frame-1.png');background-position:center;background-size:100% 100%;background-repeat:no-repeat;box-shadow:none}
.contact-form::before,.contact-form::after{display:none}
.contact-form>*{position:relative;z-index:2;opacity:0;transform:translateY(8px)}
.contact.visible .contact-form{animation:real-scroll-frames 2.35s steps(1,end) forwards}
.contact.visible .contact-form>*{animation:form-on-scroll .55s 2.18s ease forwards}
.contact.visible .contact-form>*:nth-child(2){animation-delay:2.28s}.contact.visible .contact-form>*:nth-child(3){animation-delay:2.38s}.contact.visible .contact-form>*:nth-child(4){animation-delay:2.48s}.contact.visible .contact-form>*:nth-child(5){animation-delay:2.58s}
@keyframes real-scroll-frames{0%{opacity:1;background-image:url('assets/scroll-frame-1.png')}27%{background-image:url('assets/scroll-frame-2.png')}54%{background-image:url('assets/scroll-frame-3.png')}78%,100%{opacity:1;background-image:url('assets/scroll-frame-4.png')}}
@keyframes form-on-scroll{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:720px){.contact-form{min-height:590px;padding:78px 38px 70px;background-size:145% 100%;background-position:center}}
@media(prefers-reduced-motion:reduce){.contact-form{opacity:1;background-image:url('assets/scroll-frame-4.png')}.contact-form>*{opacity:1;transform:none}}

/* Lightweight contact sheet — replaces heavy generated frames */
.contact{grid-template-columns:minmax(360px,430px) minmax(0,680px);gap:clamp(48px,6vw,82px)}.contact-copy{max-width:430px}.contact-copy p{max-width:420px}
.contact-form{min-height:0;max-width:680px;padding:38px 42px;opacity:0;clip-path:polygon(3% 0,97% 1%,100% 5%,99% 95%,96% 100%,3% 99%,0 95%,1% 5%);transform:translateX(45px) scale(.97);border:1px solid #94683a;background-color:#dfbd7f;background-image:radial-gradient(circle at 8% 12%,rgba(255,245,214,.42),transparent 26%),radial-gradient(circle at 92% 82%,rgba(98,55,20,.09),transparent 25%),repeating-linear-gradient(0deg,rgba(83,48,20,.018) 0 1px,transparent 1px 6px);box-shadow:8px 10px 0 rgba(76,43,18,.1),0 22px 45px rgba(69,39,17,.14)}
.contact-form::before,.contact-form::after{display:block;z-index:0;width:54px;height:54px;border:0;border-radius:50%;opacity:.08;background:#6c3b20;box-shadow:none}.contact-form::before{top:-24px;left:-18px}.contact-form::after{right:-22px;bottom:-25px;left:auto}
.contact-form>*{position:relative;z-index:1;opacity:0;transform:translateY(8px)}
.contact.visible .contact-form{animation:contact-sheet-in .9s cubic-bezier(.2,.78,.25,1) forwards}.contact.visible .contact-form>*{animation:form-on-scroll .45s .65s ease forwards}.contact.visible .contact-form>*:nth-child(2){animation-delay:.73s}.contact.visible .contact-form>*:nth-child(3){animation-delay:.81s}.contact.visible .contact-form>*:nth-child(4){animation-delay:.89s}.contact.visible .contact-form>*:nth-child(5){animation-delay:.97s}
@keyframes contact-sheet-in{0%{opacity:0;transform:translateX(45px) scale(.97);clip-path:polygon(48% 0,52% 0,54% 100%,46% 100%)}45%{opacity:1}100%{opacity:1;transform:none;clip-path:polygon(3% 0,97% 1%,100% 5%,99% 95%,96% 100%,3% 99%,0 95%,1% 5%)}}
@media(max-width:1050px){.contact{grid-template-columns:minmax(280px,340px) minmax(0,1fr)}}
@media(max-width:720px){.contact{grid-template-columns:1fr}.contact-form{min-height:0;padding:32px 22px;background-size:auto}.contact-copy,.contact-copy p{max-width:100%}}
@media(prefers-reduced-motion:reduce){.contact-form{opacity:1;transform:none;clip-path:none;background-image:radial-gradient(circle at 8% 12%,rgba(255,245,214,.42),transparent 26%)}.contact-form>*{opacity:1;transform:none}}

.cinematic-settling .hero-copy{opacity:1;transform:none}
@media(max-width:720px){main{padding-top:68px}.hero{margin-top:-68px;min-height:100svh}.hero-copy{min-height:100svh}}

/* Hero always reaches the bottom edge of the viewport */
.hero,.hero-copy,.hero-art{min-height:100svh}
@media(max-width:1050px) and (min-width:721px){.topbar{grid-template-columns:285px 1fr auto}.brand strong{font-size:20px}}
@media(max-width:720px){.hero,.hero-copy,.hero-art{min-height:100svh}}

.project-link{display:inline-block;margin-top:24px;padding:11px 16px;color:#f5dfb5;border:1px solid #5f2119;border-radius:3px;background:#67241c;font-size:12px;font-weight:800;transition:transform .2s,background .2s}
.project-link:hover{transform:translateY(-2px);background:#7d2c20}