/* Ana Cippola — portfolio
   Plain HTML/CSS, no build step. Images in assets/img, films in assets/video. */

:root{
  --paper:#fff;
  --ink:#262626;
  --soft:#6f6f6f;
  --line:#dcdcd8;
  --black:#000;
  --cream:#f5f2eb;
  --display:"Bodoni Moda",Didot,"Bodoni MT","Times New Roman",serif;
  --text:"EB Garamond",Garamond,"Times New Roman",serif;
  --gutter:clamp(18px,5.5vw,96px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
h1,h2{font-weight:400;margin:0}
button{font:inherit;color:inherit;cursor:pointer}

/* small letter-spaced labels used everywhere */
.side-index,.c-head p,.hero-foot,.scroll,figcaption,.about-title small,.contact dt,.foot,.site-nav nav a,.sound-btn,.cv-link{
  font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase
}

/* ---------- NAV ---------- */
.site-nav{position:fixed;z-index:50;inset:0 0 auto 0;height:64px;display:flex;align-items:center;padding:0 var(--gutter);
  color:#fff;mix-blend-mode:difference;pointer-events:none}
.site-nav>*{pointer-events:auto}
.brand img{width:118px;height:auto;filter:invert(1)}
.site-nav nav{margin-left:auto;display:flex;gap:28px}
.site-nav nav a{text-decoration:none;font-size:10.5px;padding:6px 0}
.site-nav nav a:hover{text-decoration:underline;text-underline-offset:4px}
.menu{display:none;margin-left:auto;border:0;background:none;width:34px;height:30px;padding:0}
.menu i{display:block;height:1px;background:currentColor;margin:8px 0;transition:transform .3s}
.menu[aria-expanded="true"] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu[aria-expanded="true"] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mobile-nav{position:fixed;z-index:49;inset:0;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav a{font-family:var(--display);font-size:24px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

/* ---------- 01 HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:480px;display:flex;align-items:center;justify-content:center;padding:0 var(--gutter)}
.hero-mark img{width:min(42vw,760px);height:auto}
.hero-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(22px,5vh,48px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero-foot p{margin:0;line-height:1.7;letter-spacing:.12em}

/* ---------- 02 RUNWAY ---------- */
.runway{display:grid;grid-template-columns:minmax(150px,13vw) 1fr;align-items:center}
.side-index{list-style:none;margin:0;padding:0 0 0 var(--gutter);line-height:2.1;font-size:10px}
.side-index a{text-decoration:none}
.side-index a:hover{text-decoration:underline;text-underline-offset:4px}
.side-index::after{content:"Scroll\Ato explore ↓";white-space:pre;display:block;margin-top:22px;padding-top:66px;font-size:9px;line-height:1.6;
  background:linear-gradient(var(--ink),var(--ink)) 3px 0/1px 50px no-repeat}
.runway-img img{width:100%;height:auto}

/* ---------- COLLECTIONS (03–05) ---------- */
.collection{position:relative;padding:clamp(56px,9vh,110px) var(--gutter)}
.c-head h2{line-height:.9;white-space:nowrap}
.c-head .t{font-family:var(--display);font-size:clamp(34px,4vw,72px);letter-spacing:-.03em}
.c-head .s{font-family:var(--display);font-size:clamp(11px,1vw,18px);letter-spacing:.12em;text-transform:uppercase;margin-left:.6em}
.c-head p{margin:1.1em 0 0}

/* the frame IS the video: aspect ratio matches the film, so no letterbox, no grey */
.film{position:relative;overflow:hidden;background:#111}
.film video{width:100%;height:100%;object-fit:cover}
.portrait-film{aspect-ratio:9/16}
.landscape-film{aspect-ratio:16/9}
.film-btn{position:absolute;inset:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center}
.film-btn span{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.85);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;padding-left:3px;background:rgba(0,0,0,.18);backdrop-filter:blur(2px);transition:opacity .35s}
.film.playing .film-btn span{opacity:0}
.film.playing:hover .film-btn span{opacity:.9}
.film.started .film-btn span{opacity:0}
.film.started.paused .film-btn span{opacity:1}

/* control bar: scrubber on top row, buttons below */
.controls{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:26px 12px 9px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.62));opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.film:hover .controls,.film:focus-within .controls,.film.show-ui .controls,.film.started.paused .controls{opacity:1;transform:none}
.c-row{display:flex;align-items:center;gap:8px}
.c-row+.c-row{margin-top:4px}
.c-row .grow{flex:1}
.controls button{border:0;background:none;color:#fff;padding:6px 5px;min-width:30px;min-height:30px;
  font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.controls button:hover{opacity:1}
.controls .c-play{font-size:13px;letter-spacing:0}
.controls .c-full{font-size:15px;letter-spacing:0}
.c-time{font-family:var(--display);font-size:9.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}
.seek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:16px;background:transparent;cursor:pointer;margin:0}
.seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(#fff,#fff) 0/var(--p,0%) 100% no-repeat,rgba(255,255,255,.3)}
.seek::-moz-range-track{height:2px;background:rgba(255,255,255,.3)}
.seek::-moz-range-progress{height:2px;background:#fff}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;margin-top:-4.5px;border:0}
.seek::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:0}
.film:fullscreen{background:#000}
.film:fullscreen video{object-fit:contain}
@media (hover:none){.film.started .controls{opacity:1;transform:none}}

/* desktop composition: heading | photo | film, all one height */
.men,.ophelia{--h:min(80vh,46vw);display:grid;align-items:start;column-gap:clamp(20px,3vw,56px);grid-template-columns:1fr auto 1fr}
.men .film{justify-self:end}
.ophelia .film{justify-self:start}
.men .c-head h2,.ophelia .c-head h2{white-space:normal}
.men .c-photo,.ophelia .c-photo{height:var(--h);aspect-ratio:2/3}
.men .film,.ophelia .film{height:var(--h)}
.men .c-photo img,.ophelia .c-photo img{width:100%;height:100%;object-fit:cover}
.men .c-head{padding-top:6vh}
.men .film{margin-right:calc(var(--gutter) * -0.4)}

/* Ophelia: the whole page fades to black while it is on screen (see script.js) */
body{transition:background-color .9s ease,color .9s ease}
body.is-dark{background:var(--black);color:var(--cream)}
body.is-dark .contact-grid,body.is-dark .foot{border-color:#333}
.ophelia .c-photo img{object-fit:contain}
.ophelia .c-head{padding-top:6vh;justify-self:end}
.ophelia .film{margin-left:calc(var(--gutter) * -0.4)}

/* accessories: wide still, film placed in the empty white field on the left */
.accessories{padding-left:0;padding-right:0}
.accessories .c-head{position:absolute;z-index:2;left:var(--gutter);top:clamp(56px,9vh,110px)}
.accessories .c-photo img{width:100%;height:auto}
.accessories .film{position:absolute;left:var(--gutter);top:calc(clamp(56px,9vh,110px) + 7.8vw);width:35%}

/* ---------- 06 / 07 GALLERIES ---------- */
.gallery{padding:clamp(70px,12vh,140px) var(--gutter)}
.section-title{line-height:.9;margin-bottom:clamp(36px,7vh,80px);white-space:nowrap}
.section-title.right{text-align:right}
.section-title .t{font-family:var(--display);font-size:clamp(36px,4.2vw,78px);letter-spacing:-.035em}
.section-title .s{font-family:var(--display);font-size:clamp(20px,2.3vw,44px);letter-spacing:-.01em;margin-left:.2em}
.zoom{display:block;border:0;padding:0;background:none;cursor:zoom-in;width:100%}
.zoom img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.zoom:hover img{transform:scale(1.015)}
figcaption{text-align:center;margin-top:18px;font-size:10px}

.research .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,5vw,90px);align-items:end}
.research .grid img{width:100%;height:auto}

.works .row{display:flex;gap:clamp(8px,1vw,16px);align-items:flex-start}
.works figure{flex:calc(var(--r));min-width:0}
.works figure img{width:100%;height:auto}

/* ---------- 08 ABOUT ---------- */
.about{display:grid;grid-template-columns:1fr minmax(0,1.05fr) 1.15fr;gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(70px,12vh,140px) var(--gutter)}
.about-title small{display:block;margin-bottom:1.4em}
.about-title h2 span{display:block}
.about-title h2{font-family:var(--display);font-size:clamp(40px,4.4vw,82px);line-height:.92;letter-spacing:-.03em}
.about-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.bio{font-size:clamp(15px,1.05vw,18px);line-height:1.6;max-width:520px}
.bio p{margin:0 0 1.3em}
.cv-link{display:inline-block;margin-top:.6em;text-decoration:none;border-bottom:1px solid;padding-bottom:3px}

/* ---------- 09 CONTACT ---------- */
.contact{padding:clamp(80px,16vh,180px) var(--gutter) 0}
.contact h2{font-family:var(--display);font-size:clamp(64px,11vw,200px);line-height:.95;letter-spacing:-.04em;margin-bottom:clamp(30px,6vh,64px)}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:24px;margin:0;padding-top:22px;border-top:1px solid var(--line)}
.contact dt{color:var(--soft);font-size:10px;margin-bottom:8px}
.contact dd{margin:0;font-size:clamp(17px,1.35vw,22px)}
.contact dd a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s}
.contact dd a:hover{background-size:100% 1px}
.foot{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(80px,16vh,160px);padding:22px 0 28px;border-top:1px solid var(--line);font-size:10px;color:var(--soft)}
.foot a{text-decoration:none}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.97);display:flex;align-items:center;justify-content:center;padding:56px 20px 20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lb-close{position:absolute;top:16px;right:20px;border:0;background:none;font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px}

/* ---------- SCROLL TRANSITIONS (only when JS is running) ----------
   1. images open like a curtain from the bottom while settling from a slight zoom
   2. titles rise out of a mask
   3. small labels and text fade up, in sequence
   4. runway, accessories and portrait drift (parallax) as you scroll
   5. Ophelia turns the page black
   6. thin progress line at the top */
:root{--ease:cubic-bezier(.77,0,.18,1);--ease-out:cubic-bezier(.22,.61,.36,1)}
.progress{position:fixed;z-index:60;top:0;left:0;height:2px;width:100%;background:currentColor;transform-origin:0 50%;transform:scaleX(0);mix-blend-mode:difference;color:#fff;pointer-events:none}

.js .wipe>*{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease);transition-delay:var(--d,0s)}
.js .wipe img,.js .wipe video{scale:1.14;transition:scale 2s var(--ease-out),clip-path 1.4s var(--ease);transition-delay:var(--d,0s)}
.js .wipe.in>*,.js .wipe.in img{clip-path:inset(0 0 0 0)}
.js .film.wipe{background:transparent}
.js .film.wipe.in{background:#111;transition:background 0s 1.4s}
.js .wipe.in img,.js .wipe.in video{scale:1}

.js .rise{overflow:hidden;padding-bottom:.08em}
.js .rise>*{display:inline-block;translate:0 110%;transition:translate 1.2s var(--ease);transition-delay:calc(var(--d,0s) + .15s)}
.js .rise>*+*{transition-delay:calc(var(--d,0s) + .3s)}
.js .in .rise>*,.js .rise.in>*{translate:0 0}

.js .fade{opacity:0;translate:0 18px;transition:opacity 1s var(--ease-out),translate 1s var(--ease-out);transition-delay:calc(var(--d,0s) + .45s)}
.js .in .fade,.js .fade.in{opacity:1;translate:0 0}

.runway-img,.accessories .c-photo,.about-photo{overflow:hidden}


/* ---------- TABLET ---------- */
@media (max-width:1100px) and (min-width:761px){
  .men,.ophelia{--h:min(70vh,58vw);grid-template-columns:auto auto;justify-content:center;row-gap:32px}
  .men .c-head,.ophelia .c-head{grid-column:1/-1;order:-1;padding-top:0;justify-self:start}
  .men .film,.ophelia .film{margin:0}
  .accessories .film{width:38%;top:calc(clamp(56px,9vh,110px) + 12vw)}
}
@media (max-width:1100px){
  .about{grid-template-columns:1fr 1fr}
  .about-title{grid-column:1/-1}
  .contact-grid{grid-template-columns:1fr 1fr;row-gap:28px}
}

/* ---------- PHONE ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .site-nav{height:56px}
  .brand img{width:104px}
  .site-nav nav{display:none}
  .menu{display:block}
  .mobile-nav{mix-blend-mode:normal}

  .hero-mark img{width:84vw}
  .hero-foot p{font-size:9.5px;letter-spacing:.1em}
  .hero-foot .scroll{display:none}

  .runway{grid-template-columns:1fr}
  .side-index{display:none}
  .runway-img{overflow:hidden}

  .collection{padding:64px var(--gutter)}
  .men,.ophelia{display:flex;flex-direction:column;gap:22px}
  .men .c-head,.ophelia .c-head{padding-top:0;order:-1;justify-self:auto;align-self:flex-start}
  .men .c-photo,.ophelia .c-photo{height:auto;width:100%;aspect-ratio:2/3}
  .men .film,.ophelia .film{height:auto;width:100%;margin:0}
  .c-head .t{font-size:clamp(34px,11vw,52px)}

  .accessories{display:flex;flex-direction:column;gap:22px;padding:64px 0}
  .accessories .c-head{position:static;padding:0 var(--gutter)}
  .accessories .c-photo{overflow:hidden}
  .accessories .film{position:relative;top:auto;left:auto;width:auto;margin:0 var(--gutter)}

  .section-title.right{text-align:left}
  .research .grid{grid-template-columns:1fr;gap:56px}
  .research .grid figure{max-width:440px;margin:0 auto;width:100%}
  .works .row{flex-direction:column;gap:40px}
  .works figure{flex:none;width:100%}

  .about{grid-template-columns:1fr;gap:32px}
  .bio{max-width:none}

  .contact h2{font-size:21vw}
  .contact-grid{grid-template-columns:1fr;row-gap:22px}
  .foot{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .wipe>*,.js .wipe img{clip-path:none!important;transition:none}
  .js .wipe img,.js .wipe video{scale:1!important;transition:none}
  .js .drift{translate:none!important}
  .js .rise>*,.js .fade{translate:none!important;opacity:1!important;transition:none}
  body{transition:none}
}

.js .about-title .rise>span{display:block}
.hero-mark{display:block}

/* parallax moves the whole frame, never crops the photo */
.drift{will-change:translate}

/* ---------- TECHNICAL DRAWINGS (inside Selected Works) ---------- */
.drawings{margin-top:clamp(90px,14vh,160px)}
.sub-title{line-height:.9;margin-bottom:clamp(30px,6vh,64px);white-space:nowrap}
.sub-title .t{font-family:var(--display);font-size:clamp(30px,3.2vw,60px);letter-spacing:-.03em}
.sub-title .s{font-family:var(--display);font-size:clamp(18px,1.9vw,36px);margin-left:.2em}
.strip-block{margin-bottom:clamp(56px,9vh,100px)}
.strip-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:6px 28px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.strip-head h4{margin:0;font-weight:400;line-height:1}
.strip-head h4 .t{font-family:var(--display);font-size:clamp(22px,1.9vw,34px);letter-spacing:-.02em}
.strip-head h4 .s{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-left:.7em}
.strip-head p{margin:0;font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.strip-nav{display:flex;gap:6px}
.strip-nav button{width:40px;height:40px;border:1px solid var(--line);background:none;border-radius:50%;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.strip-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.strip-nav button:disabled{opacity:.3;pointer-events:none}
.strip{--sh:clamp(260px,34vw,460px);display:flex;gap:clamp(14px,2vw,32px);overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:4px}.strip::-webkit-scrollbar-thumb{background:var(--line)}
.strip figure{flex:none;scroll-snap-align:start}
.strip .zoom{width:auto;background:#fff}
.strip img{height:var(--sh);width:auto;max-width:none}
.strip figcaption{text-align:left;margin-top:12px;font-size:9.5px;color:var(--soft)}
.strip figure.flat:first-of-type{margin-left:clamp(10px,2vw,40px)}

/* lightbox with caption and arrows */
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%;height:100%;justify-content:center}
.lightbox figure img{max-height:calc(100% - 40px)}
.lb-cap{margin-top:14px;font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);text-align:center}
.lb-prev,.lb-next{position:absolute;top:50%;translate:0 -50%;border:0;background:none;font-size:22px;padding:18px;z-index:2}
.lb-prev{left:6px}.lb-next{right:6px}
.lightbox:not(.has-group) .lb-prev,.lightbox:not(.has-group) .lb-next{display:none}

@media (max-width:760px){
  .strip-head{grid-template-columns:1fr auto}
  .strip-head p{grid-column:1/-1;grid-row:2}
  .strip-nav button{width:34px;height:34px}
  .strip{--sh:min(62vh,420px)}
  .strip figure.look img{height:var(--sh)}
  .strip figure.flat img{height:auto;width:82vw;max-height:var(--sh);object-fit:contain}
  .lb-prev,.lb-next{top:auto;bottom:10px;translate:none}
}
/* blend the off-white paper of the scans into the page */
.strip img,.lightbox img{mix-blend-mode:multiply}
.lightbox{background:#fff}

/* ---------- SELECTED WORKS: collection project cards ---------- */
.works .row+.row{margin-top:clamp(36px,6vh,64px)}
.works .projects figure img{width:100%;height:auto;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.project{position:relative;display:block;overflow:hidden;background:#fff;text-decoration:none}
.project .view{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));
  font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:0;translate:0 8px;transition:opacity .35s,translate .35s}
.project:hover img,.project:focus-visible img{transform:scale(1.03)}
.project:hover .view,.project:focus-visible .view{opacity:1;translate:0 0}
.works figcaption span{display:block;margin-top:6px;color:var(--soft);font-size:9px}
@media (hover:none){.project .view{opacity:1;translate:0 0}}

/* Selected Works drop-down in the main menu */
.site-nav .sw-toggle{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.mobile-nav .subs{display:flex;flex-direction:column;align-items:center;gap:10px;margin:-10px 0 4px}
.mobile-nav .subs a{font-size:13px;letter-spacing:.12em;color:#6f6f6f}
@media (max-width:760px){.mobile-nav{gap:20px;justify-content:flex-start;padding-top:90px;overflow-y:auto}.mobile-nav a{font-size:21px}}
/* project cards: the whole card is the link */
.works .project{cursor:pointer}