/* Gabriel Nion · an editorial portfolio with one deliberate interaction. */
:root{--v-ink:#222924;--v-muted:#59635c;--v-paper:#fff;--v-soft:#f1f4ef;--v-line:#d5ded5;--v-blue:#2347e9;--v-blue-dark:#1834bd;--v-serif:Georgia,'Times New Roman',serif}
html{scroll-padding-top:6rem}
body.portfolio-v37{background:var(--v-paper);color:var(--v-ink)}
.portfolio-v37 main{overflow:clip}
.portfolio-v37 .site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--v-line);backdrop-filter:blur(12px)}
.portfolio-v37 .brand img{object-fit:contain}
.portfolio-v37 a:focus-visible,.portfolio-v37 button:focus-visible{outline:3px solid var(--v-blue);outline-offset:4px}
.portfolio-v37 .site-header a,.portfolio-v37 .site-header summary{touch-action:manipulation}
.v37-wrap{width:min(100% - 3rem,1360px);margin-inline:auto}
.v37-eyebrow{font-size:.77rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--v-blue);margin:0 0 1.4rem}
.v37-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr);gap:clamp(2rem,5vw,6rem);align-items:end;padding-block:clamp(4rem,8vw,8rem) clamp(4.5rem,8vw,8rem);min-height:min(780px,calc(100svh - 86px))}
.v37-hero h1{font-family:var(--v-serif);font-weight:400;font-size:clamp(4rem,7.4vw,8.4rem);line-height:.98;letter-spacing:-.068em;max-width:11ch;margin:0 0 2rem}
.v37-hero h1 em{font-weight:400;color:var(--v-blue)}
.v37-hero .v37-intro{font-size:clamp(1.07rem,1.45vw,1.35rem);line-height:1.62;color:var(--v-muted);max-width:58ch;margin:0 0 2rem}
.v37-hero .v37-intro strong{color:var(--v-ink);font-weight:650}
.v37-actions{display:flex;gap:1rem 1.7rem;flex-wrap:wrap;align-items:center}
.v37-primary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.88rem 1.45rem;border-radius:5px;background:var(--v-blue);color:white!important;font-weight:650;text-decoration:none;transition:background .2s ease,transform .2s ease}
.v37-primary:hover{background:var(--v-blue-dark);transform:translateY(-2px)}
.v37-link{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;color:var(--v-blue);font-weight:650;text-decoration-thickness:1px;text-underline-offset:.36em}
.v37-link::after{content:'↗';font-size:1.2em;line-height:1}
.v37-hero-aside{display:flex;align-items:end;justify-content:center;min-width:0}
.v37-portrait{width:min(100%,490px);height:clamp(370px,45vw,620px);display:grid;place-items:end center;margin:0;position:relative;overflow:hidden;border-radius:240px 240px 4px 4px;background:#e8edff}
.v37-portrait:before{content:'';position:absolute;inset:10% 8% auto;aspect-ratio:1;border:1px solid #ccd4f5;border-radius:50%}
.v37-portrait img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;position:relative;filter:grayscale(100%)}
.v37-section-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;border-top:1px solid var(--v-line);padding-top:1.35rem;margin-bottom:clamp(2rem,4vw,4rem)}
.v37-section-head h2{font-family:var(--v-serif);font-size:clamp(2.8rem,5vw,5.5rem);letter-spacing:-.055em;line-height:1.06;font-weight:400;margin:0;max-width:16ch}
.v37-section-head p{max-width:34ch;color:var(--v-muted);line-height:1.55;margin:0}
.v37-work{padding-block:clamp(3rem,5vw,6rem)}
.v37-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,4.5rem)}
.v37-project{min-width:0}
.v37-project:first-child{grid-column:1/-1;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,3.5vw,5rem);align-items:center;padding:clamp(1.6rem,3vw,3.8rem);background:#f2f5f0}
.v37-project-media{display:flex;align-items:center;justify-content:center;background:#ecf1e8;overflow:hidden;min-height:280px;margin:0}
.v37-project:first-child .v37-project-media{grid-column:2;grid-row:1;min-height:480px;background:#eaf0e5}
.v37-project-media img{width:100%;height:100%;object-fit:contain;display:block}
.v37-project:first-child .v37-project-media img{max-height:650px}
.v37-project:nth-child(2) .v37-project-media{background:#e9eee5}
.v37-project:nth-child(2) .v37-project-media img{max-height:520px}
.v37-project:nth-child(3) .v37-project-media{background:#e9ebf7}
.v37-project:nth-child(3) .v37-project-media img{max-height:520px;width:auto}
.v37-project-copy{padding:1.3rem 0 0}
.v37-project:first-child .v37-project-copy{grid-column:1;grid-row:1;padding:0}
.v37-project h3{font:400 clamp(2.45rem,3.5vw,4.5rem)/1.06 var(--v-serif);letter-spacing:-.055em;margin:0 0 1.3rem}
.v37-project h3 em{color:var(--v-blue)}
.v37-project p:not(.v37-eyebrow){color:var(--v-muted);line-height:1.65;max-width:56ch}
.v37-project .v37-link{margin-top:.8rem}
.v37-project figcaption{font-size:.78rem;color:var(--v-muted);margin-top:.6rem;line-height:1.45}
.v37-other-work{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin-top:clamp(2rem,4vw,4.5rem);padding-top:1.6rem;border-top:1px solid var(--v-line)}
.v37-other-work h3{font-size:1.05rem;margin:0 0 .45rem}.v37-other-work p{color:var(--v-muted);line-height:1.55;margin:0}
.v37-story-band{background:#202924;color:#fff;padding-block:clamp(4rem,7vw,8rem);margin-top:clamp(2rem,6vw,6rem)}
.v37-story-band .v37-eyebrow{color:#a8bbff}
.v37-story-band .v37-section-head{border-color:#506057}
.v37-story-band .v37-section-head p{color:#c9d2cb}
.v37-story-band h2{max-width:18ch}
.v37-story-band em{color:#bdc9ff}
.v37-story-grid{display:grid;grid-template-columns:minmax(250px,.42fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.v37-story-nav{display:grid;gap:0;border-top:1px solid #657168}
.v37-story-nav button{appearance:none;border:0;border-bottom:1px solid #657168;background:transparent;color:#c9d2cb;text-align:left;padding:1rem .5rem;min-height:64px;font:inherit;cursor:pointer;display:flex;gap:1rem;align-items:center;transition:background .2s,color .2s}
.v37-story-nav button:hover{background:#334036;color:#fff}
.v37-story-nav button[aria-current="step"]{color:white;background:#3b4c3f}
.v37-story-nav button span{font-size:.73rem;color:#aebbb0;font-variant-numeric:tabular-nums}
.v37-story-instruction{font-size:.85rem;color:#c9d2cb;line-height:1.55;margin-top:1rem}
.v37-story-panel{min-height:600px;padding:clamp(1.3rem,3vw,3rem);background:#f5f7f3;color:var(--v-ink);position:relative;overflow:hidden}
.v37-story-panel[hidden]{display:none}
.v37-story-panel h3{font:400 clamp(2.2rem,3.2vw,4rem)/1.08 var(--v-serif);letter-spacing:-.05em;margin:.2rem 0 1rem}
.v37-story-panel p{color:var(--v-muted);max-width:55ch;line-height:1.6}
.v37-story-panel .v37-step-label{font-size:.78rem;color:var(--v-blue);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.v37-story-panel figure{margin:1.8rem 0 0;max-height:350px;overflow:hidden;background:white;display:grid;place-items:center}
.v37-story-panel figure img{display:block;width:auto;height:auto;max-width:100%;max-height:350px;object-fit:contain}
.v37-story-panel figcaption{font-size:.75rem;color:var(--v-muted);padding:.7rem;background:#f5f7f3}
.v37-story-panel ul{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;list-style:none;margin:2rem 0 0;padding:0}
.v37-story-panel li{padding:1.2rem;background:white;border-left:3px solid #cad6ef;line-height:1.45}
.v37-story-panel .v37-link{margin-top:1rem}
.v37-story-note{color:#c9d2cb;line-height:1.5;max-width:75ch;font-size:.82rem;margin:2rem 0 0}
.v37-approach{padding-block:clamp(5rem,9vw,10rem);display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,6vw,8rem)}
.v37-approach h2{font:400 clamp(3rem,5vw,6rem)/1.03 var(--v-serif);letter-spacing:-.06em;margin:0;max-width:10ch}
.v37-approach h2 em{color:var(--v-blue)}
.v37-approach-intro{font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.55;margin:0 0 2rem}
.v37-approach dl{margin:0}.v37-approach dl div{border-top:1px solid var(--v-line);padding:1.1rem 0;display:grid;grid-template-columns:8rem 1fr;gap:1rem}.v37-approach dt{font-weight:700}.v37-approach dd{margin:0;color:var(--v-muted);line-height:1.55}
.v37-experience{background:var(--v-soft);padding-block:clamp(4rem,6vw,7rem)}
.v37-experience .v37-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,6vw,8rem)}
.v37-experience h2{font:400 clamp(2.8rem,4vw,4.8rem)/1.07 var(--v-serif);letter-spacing:-.055em;margin:0}
.v37-experience ol{list-style:none;padding:0;margin:0}.v37-experience li{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid #cbd5cb;line-height:1.5}.v37-experience li>span{color:var(--v-muted);font-size:.88rem}.v37-experience strong{display:block}
.v37-contact{background:#2446dc;color:white;padding-block:clamp(5rem,8vw,9rem)}
.v37-contact .v37-eyebrow,.v37-contact p{color:#dbe2ff}
.v37-contact h2{font:400 clamp(3.4rem,7vw,8rem)/1.03 var(--v-serif);letter-spacing:-.06em;max-width:13ch;margin:0 0 1.8rem}
.v37-contact h2 em{color:#dbe2ff}
.v37-contact .v37-email{color:white;font-size:clamp(1.4rem,3vw,3.4rem);overflow-wrap:anywhere;text-underline-offset:.22em}
.v37-contact .v37-actions{margin-top:1.8rem}.v37-contact .v37-link{color:white}
.v37-case-hero{background:#eef2ed;padding-block:clamp(4rem,7vw,8rem)}
.v37-case-hero h1{font:400 clamp(3.5rem,7vw,8rem)/1.04 var(--v-serif);letter-spacing:-.06em;max-width:12ch;margin:0 0 1.7rem}
.v37-case-hero p:not(.v37-eyebrow){max-width:62ch;line-height:1.6;font-size:1.2rem;color:var(--v-muted)}
.v37-case-hero .v37-link{margin-top:1rem}
.v37-case-body{padding-block:clamp(3rem,6vw,7rem);display:grid;grid-template-columns:.34fr .66fr;gap:clamp(2rem,6vw,8rem)}
.v37-case-facts{align-self:start;position:sticky;top:7rem;margin:0}.v37-case-facts div{border-top:1px solid var(--v-line);padding:.9rem 0}.v37-case-facts dt{color:var(--v-muted);font-size:.8rem;margin-bottom:.35rem}.v37-case-facts dd{margin:0;font-weight:650;line-height:1.45}
.v37-case-content section{padding-block:1rem 2.5rem;border-bottom:1px solid var(--v-line)}
.v37-case-content h2{font:400 clamp(2.2rem,3.4vw,4rem)/1.12 var(--v-serif);letter-spacing:-.05em;margin:0 0 1rem}
.v37-case-content h3{font-size:1.2rem;margin:1.6rem 0 .6rem}
.v37-case-content p,.v37-case-content li{line-height:1.75;color:var(--v-muted);max-width:66ch}.v37-case-content ul{padding-left:1.3rem}
.v37-case-content figure{margin:2rem 0;background:#edf2ed;padding:clamp(.7rem,2vw,2rem);text-align:center}.v37-case-content figure img{display:block;max-width:100%;max-height:750px;width:auto;height:auto;margin:auto}.v37-case-content figcaption{text-align:left;font-size:.82rem;color:var(--v-muted);margin-top:1rem;line-height:1.5}
.v37-next{background:#eef2ed;padding-block:3rem}.v37-next .v37-link{font-size:1.2rem}
.v37-playground-intro{padding-block:4rem 2rem}.v37-playground-intro h1{font:400 clamp(3rem,5vw,6rem)/1.05 var(--v-serif);letter-spacing:-.05em;margin:0 0 1rem}.v37-playground-intro p{max-width:65ch;line-height:1.65;color:var(--v-muted)}
.portfolio-v37 .site-footer{padding-block:3rem}
.portfolio-v37 .site-footer .footer-links{gap:1rem 2rem}
@media(max-width:900px){.v37-hero{grid-template-columns:1fr .6fr;align-items:center;min-height:0}.v37-hero h1{font-size:clamp(3.6rem,7vw,6rem)}.v37-portrait{height:400px}.v37-story-grid{grid-template-columns:1fr}.v37-story-nav{grid-template-columns:repeat(4,1fr);border-bottom:1px solid #657168}.v37-story-nav button{justify-content:center;text-align:center;border-bottom:0;min-height:64px;padding:.65rem}.v37-story-nav button span{display:none}.v37-story-panel{min-height:540px}.v37-approach,.v37-experience .v37-wrap{grid-template-columns:1fr}.v37-approach h2{max-width:none}}
@media(max-width:700px){.v37-wrap{width:min(100% - 2rem,1360px)}.v37-hero{display:flex;flex-direction:column;align-items:stretch;padding-block:4rem 4.5rem;gap:2rem}.v37-hero h1{font-size:clamp(3.25rem,12vw,5.2rem)}.v37-hero-aside{justify-content:flex-start}.v37-portrait{width:min(67%,270px);height:250px;border-radius:140px 140px 4px 4px}.v37-section-head{display:block}.v37-section-head p{margin-top:1rem}.v37-work-grid{display:block}.v37-project{margin-bottom:3.5rem}.v37-project:first-child{display:flex;flex-direction:column;padding:1rem;align-items:stretch}.v37-project:first-child .v37-project-media{min-height:300px;order:0}.v37-project:first-child .v37-project-copy{order:1;padding:1rem .4rem}.v37-project .v37-project-media{height:340px}.v37-other-work{grid-template-columns:1fr}.v37-story-band{margin-top:1rem}.v37-story-nav{grid-template-columns:repeat(2,1fr)}.v37-story-nav button{border-bottom:1px solid #657168;min-height:55px}.v37-story-panel{min-height:0;padding:1.4rem}.v37-story-panel ul{grid-template-columns:1fr}.v37-story-panel figure{max-height:260px}.v37-story-panel figure img{max-height:260px}.v37-approach dl div{grid-template-columns:1fr;gap:.25rem}.v37-experience li{grid-template-columns:6rem 1fr}.v37-case-body{display:block}.v37-case-facts{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;margin-bottom:2rem}.v37-case-hero h1{font-size:clamp(3.1rem,11vw,5rem)}}
@media(max-width:380px){.v37-story-nav{grid-template-columns:1fr 1fr}.v37-story-nav button{font-size:.85rem}.v37-case-facts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.portfolio-v37 *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.motion-reduced .portfolio-v37 *, .portfolio-v37.motion-reduced *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
@media(min-width:701px){.v37-hero{min-height:0;padding-block:clamp(3rem,5vw,5rem) clamp(4rem,6vw,6rem)}.v37-hero h1{font-size:clamp(3.8rem,5.7vw,6.6rem)}.v37-portrait{width:min(100%,390px);height:470px}}
.v37-contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.v37-contact-grid h2{font-size:clamp(3.2rem,5vw,6rem)}
#contact-form{background:white;color:var(--v-ink);padding:clamp(1.5rem,3vw,3rem);box-shadow:0 18px 60px #142a8529}
#contact-form[hidden]{display:none}
#contact-form h3{font:400 clamp(1.9rem,2.5vw,2.7rem)/1.15 var(--v-serif);letter-spacing:-.04em;margin:0 0 .5rem}
#contact-form .v37-form-required{font-size:.86rem;color:var(--v-muted);margin:0 0 1.8rem}
.v37-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.v37-field{margin-bottom:1.2rem}.v37-field label{font-size:.88rem;font-weight:700;display:block;margin:0 0 .4rem}.v37-field label small{font-weight:400;color:var(--v-muted)}
.v37-field input,.v37-field textarea{display:block;width:100%;min-height:50px;background:#fff;color:var(--v-ink);border:1px solid #a9b4ad;border-radius:3px;font:400 1rem/1.5 Arial,sans-serif;padding:.7rem .8rem;resize:vertical}
.v37-field textarea{min-height:150px}.v37-field [aria-invalid=true]{border-color:#ab2424}
.v37-field-error{font-size:.8rem;color:#9a2222!important;line-height:1.4;margin:.3rem 0 0}.v37-field-error[hidden]{display:none}
.v37-field-hint,.v37-form-privacy{font-size:.78rem;color:var(--v-muted)!important;line-height:1.5;margin:.4rem 0 0}.v37-form-privacy{margin:1.1rem 0 1.5rem}
.v37-form-privacy a{color:var(--v-blue)}.v37-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#contact-submit{appearance:none;border:0;cursor:pointer;font:650 .98rem/1.4 Arial,sans-serif;width:100%}#contact-submit:disabled{opacity:.7;cursor:wait}
#contact-form-status{font-size:.85rem;line-height:1.5;margin:.85rem 0 0;color:var(--v-ink)!important}#contact-form-status:empty{display:none}#contact-form-status[data-state=error]{color:#9a2222!important}#contact-form-status[data-state=success]{color:#24613b!important}
@media(max-width:900px){.v37-contact-grid{grid-template-columns:1fr}.v37-contact-grid h2{max-width:14ch}.v37-contact-grid #contact-form{max-width:640px}}
@media(max-width:580px){.v37-form-row{grid-template-columns:1fr;gap:0}.v37-contact-grid h2{font-size:clamp(3rem,12vw,5rem)}.v37-hero{padding-top:2.5rem}.v37-case-hero{padding-block:3.5rem}}
@media(min-width:701px){.v37-case-hero{padding-block:clamp(3.5rem,5vw,6rem)}.v37-case-hero h1{font-size:clamp(3.5rem,6vw,6.5rem)}}
.v37-form-privacy a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
@media(prefers-reduced-motion:no-preference){
  .v37-story-panel:not([hidden]){animation:v37-panel-in .36s cubic-bezier(.22,1,.36,1) both}
  .v37-story-panel:not([hidden]) li{animation:v37-card-in .4s cubic-bezier(.22,1,.36,1) both}
  .v37-story-panel:not([hidden]) li:nth-child(2){animation-delay:.05s}.v37-story-panel:not([hidden]) li:nth-child(3){animation-delay:.1s}.v37-story-panel:not([hidden]) li:nth-child(4){animation-delay:.15s}
  .v37-project-media img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.v37-project:hover .v37-project-media img{transform:scale(1.018)}}
@keyframes v37-panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes v37-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
html.motion-reduced .v37-story-panel,html.motion-reduced .v37-story-panel li{animation:none!important}
.v37-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.v37-compare figure{margin:1.5rem 0}.v37-compare figure img{max-height:500px}
@media(max-width:650px){.v37-compare{grid-template-columns:1fr}}