/* Lana Artusa portfolio. Plain CSS, no build step. */

/* ---------- Fonts ---------- */
/* Playfair Display (SIL Open Font License), self-hosted, Latin subset. Display text only. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../assets/playfair-display-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url(../assets/playfair-display-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Stand-in shown for the moment before Playfair Display arrives: Georgia, matched in width so nothing jumps when the real font loads. */
@font-face{font-family:"Playfair Fallback";font-style:normal;font-weight:400 900;src:local("Georgia")}
@font-face{font-family:"Playfair Fallback";font-style:italic;font-weight:400 900;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:97%}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(../assets/dm-sans-latin-wght-normal.Xz1IZZA0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(../assets/dm-sans-latin-ext-wght-normal.BOFOeGcA.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --blush:#F7DEE6;
  --ivory:#F9F6F2;
  --dusty:#DFA9BC;
  --burgundy:#2A0E19;
  --rose:#A8305A;
  --petal:#F2AFC4;          /* rose for use on burgundy */

  --bg:var(--ivory);
  --fg:var(--burgundy);
  --fg-2:#5B4350;
  --accent:var(--rose);
  --rule:rgba(42,14,25,.16);

  --serif:"Playfair Display","Playfair Fallback",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Type roles
     --serif      Playfair Display: display only (name, titles, short lines at large sizes), weight 500+
     --sans       DM Sans: everything that is read
     --statement  the larger "statement" sentences (assignment lines, About opener) */
  --statement:var(--sans);
  --statement-size:clamp(1.3rem,1.12rem + .8vw,1.6rem);
  --statement-track:-.022em;
  --statement-lh:1.36;

  --step--1:.9375rem;                         /* 15px: labels and meta, never sentences */
  --step-0:1.0625rem;                         /* 17px body on mobile */
  --step-1:1.125rem;                          /* small titles in DM Sans */
  --step-2:clamp(1.5rem,1.2rem + 1.2vw,2rem); /* short display lines only */
  --step-3:clamp(2.5rem,1.4rem + 5vw,5rem);

  --gutter:20px;
  --section:clamp(48px,6vw,84px);
  --display-w:500;        /* display weight */
  --display-w-strong:600; /* the name */
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
@media(min-width:720px){:root{--gutter:32px}}
@media(min-width:900px){:root{--step-0:1.125rem}}   /* 18px body on desktop */
@media(min-width:1100px){:root{--gutter:48px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ivory);color:var(--fg);font-family:var(--sans);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(168,48,90,.16)}
a{color:var(--accent);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
[tabindex="-1"]:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;background:var(--burgundy);color:var(--ivory);padding:12px 18px}
.skip-link:focus{top:12px}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}

.band{background:var(--bg);color:var(--fg)}
.band--blush{--bg:var(--blush)}
.band--ivory{--bg:var(--ivory)}
.band--burgundy{--bg:var(--burgundy);--fg:#F9F6F2;--fg-2:#DCC9D2;--accent:var(--petal);--rule:rgba(249,246,242,.22)}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;border:1px solid var(--fg);font-weight:600;text-decoration:none;cursor:pointer;background:transparent;color:var(--fg);transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn--cherry{background:var(--burgundy);border-color:var(--burgundy);color:var(--ivory)}
.btn--cherry:hover{background:var(--rose);border-color:var(--rose);color:var(--ivory)}
.btn--petal{background:var(--petal);border-color:var(--petal);color:var(--burgundy)}
.btn--petal:hover{background:var(--ivory);border-color:var(--ivory);color:var(--burgundy)}
.link-quiet{display:inline-flex;align-items:center;min-height:44px;color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:.35em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,#F7DEE6 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.monogram{display:inline-flex;align-items:center;min-width:44px;min-height:44px;font-family:var(--serif);font-weight:var(--display-w);font-kerning:normal;font-optical-sizing:auto;font-size:1.2rem;color:var(--fg);text-decoration:none}
.nav{display:flex;gap:clamp(6px,2.6vw,28px)}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:56px;padding-inline:4px;color:var(--fg);text-decoration:none;font-size:.95rem;font-weight:500;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow .2s}
.nav a:hover,.nav a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--rose)}
@media(max-width:359px){.monogram{display:none}.site-header__inner{justify-content:center}}

/* ---------- Hero (Lana's original, kept) ---------- */
.intro{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:calc(100svh - 57px);padding-block:40px 56px;
  /* Static version of the GlassFold colors. Shown before the shader starts, and on its own when WebGL or JS is unavailable. */
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(255,52,123,.42),transparent 62%),
    radial-gradient(90% 80% at 0% 100%,rgba(255,52,123,.26),transparent 60%),
    linear-gradient(150deg,#FFD9DB 0%,#FAB7CC 55%,#F7A3BF 100%)}
.intro__shader{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;pointer-events:none;opacity:0}
.intro__shader.is-ready{opacity:1}
@media(prefers-reduced-motion:no-preference){.intro__shader{transition:opacity .9s ease}}
/* Soft blush veil behind the hero text so every line keeps AA contrast over the moving background. */
.intro__text{position:relative}
.intro__text::before{content:"";position:absolute;z-index:-1;inset:-10px -20px;border-radius:48px;pointer-events:none;background:rgba(247,222,230,.72);box-shadow:0 0 70px 50px rgba(247,222,230,.72)}
.intro__grid{display:grid;gap:28px;justify-items:center;text-align:center}
.intro__photo{position:relative;width:min(58vw,220px)}
.intro__photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:999px 999px 4px 4px}
.intro__photo::after{content:"";position:absolute;inset:-10px -10px 10px 10px;border:1px solid var(--rose);border-radius:999px 999px 4px 4px}
.intro__text{display:flex;flex-direction:column;align-items:center}
.intro__name{font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;font-weight:var(--display-w-strong);font-size:clamp(2.9rem,12.5vw,6.4rem);line-height:.95}
.intro__headline{font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;font-weight:var(--display-w);font-size:clamp(1.55rem,5.6vw,2.6rem);line-height:1.12;margin-top:12px;text-wrap:balance}
.intro__headline em,.intro__headline .amp{font-style:italic;color:var(--rose)}
.rotator{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px}
.rotator__lead{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.rotator__words{display:inline-grid;font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;font-weight:var(--display-w);font-style:italic;font-size:clamp(1.5rem,4.6vw,1.75rem);color:var(--rose);line-height:1.2}   /* 24px minimum keeps rose on the pink glow within AA for large text */
.rotator__word{grid-area:1/1;justify-self:center;white-space:nowrap;border-bottom:1px solid rgba(168,48,90,.35);opacity:0;transform:translateY(.45em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rotator__word.is-on{opacity:1;transform:none}
.intro__lede{margin-top:20px;font-size:var(--step-0);line-height:1.6;color:var(--fg-2);max-width:31em}
.intro__actions{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px}
@media(min-width:900px){
  .intro__grid{grid-template-columns:auto minmax(0,620px);justify-content:center;justify-items:start;text-align:left;gap:88px;align-items:center}
  .intro__photo{width:300px}
  .intro__text{align-items:flex-start}
  .rotator{justify-content:flex-start}
  .rotator__word{justify-self:start}
  .intro__actions{justify-content:flex-start}
}

/* ---------- Skills ribbon (from Lana's original site) ----------
   The movement is one CSS transform animation. The track holds four identical sets and slides
   left by exactly one set, so the picture at the end of the loop is the picture at the start. */
.ribbon{overflow:hidden;background:var(--blush);color:var(--burgundy);border-block:1px solid var(--rule);padding-block:15px}
.ribbon__track{display:flex;width:max-content;will-change:transform;backface-visibility:hidden}
.ribbon__set{display:flex;flex:none}
.ribbon__item{display:inline-flex;align-items:center;flex:none;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;font-kerning:normal;font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem);line-height:1.3}
.ribbon__item::after{content:"";flex:none;width:.26em;height:.26em;margin-inline:.9em;background:var(--rose);transform:rotate(45deg)}   /* small rose diamond */
@keyframes ribbon{to{transform:translate3d(-25%,0,0)}}
@media(prefers-reduced-motion:no-preference){
  /* --ribbon-time is set by site.js from the set's width, so the speed is the same at every size */
  .ribbon.is-running .ribbon__track{animation:ribbon var(--ribbon-time,60s) linear infinite}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
  .ribbon:hover .ribbon__track{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){
  .ribbon__track{width:auto;animation:none}
  .ribbon__set{flex:1;flex-wrap:wrap;justify-content:center;row-gap:4px;padding-inline:var(--gutter)}
  .ribbon__set+.ribbon__set{display:none}
  .ribbon__item:last-child::after{display:none}
}

/* ---------- Section headings ---------- */
.display em,.contact__title em{font-style:italic;color:var(--accent)}
.display{font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;font-weight:var(--display-w);font-size:var(--step-3);line-height:1.02;text-wrap:balance}
.label{font-size:var(--step--1);font-weight:600;color:var(--accent)}

/* ---------- Work index: title and intro on top, then one image-led card per project ---------- */
.work-index{padding-block:clamp(36px,4.5vw,64px) 0}
.work-index__head{display:grid;gap:8px;padding-bottom:clamp(20px,2.4vw,32px)}
.work-index__intro{max-width:30em;color:var(--fg-2)}
.work-cards{display:grid;gap:32px}
.work-card{display:block;color:var(--fg);text-decoration:none}
.work-card__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--blush)}
.work-card__media img,.work-card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--focus,50%);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .35s var(--ease)}
.work-card__media video{opacity:0}
.work-card.is-previewing .work-card__media video{opacity:1}
.work-card__text{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding-top:14px}
.work-card__name{font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;font-weight:var(--display-w);font-size:clamp(1.375rem,1.1rem + 1.1vw,1.9rem);line-height:1.12;justify-self:start;background:linear-gradient(var(--rose),var(--rose)) left 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.work-card__when{font-size:var(--step--1);font-weight:600;color:var(--fg-2);white-space:nowrap}
.work-card__role{grid-column:1/-1;color:var(--fg-2)}
.work-card:focus-visible{outline-offset:6px}
@media(hover:hover){
  .work-card:hover .work-card__media img,.work-card:hover .work-card__media video{transform:scale(1.045)}
  .work-card:hover .work-card__name{background-size:100% 1px}
}
.work-index__also{margin-top:clamp(28px,3vw,40px);padding-top:16px;border-top:1px solid var(--rule);color:var(--fg-2)}
.work-index__also a{color:var(--fg);font-weight:600;text-decoration-color:var(--rose)}
@media(min-width:760px){
  .work-index__head{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:48px}
  .work-index__intro{justify-self:end;text-align:right;padding-bottom:.55em}
  .work-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px}
  .work-card__media{aspect-ratio:5/4}
}

/* ---------- Projects ---------- */
.project{padding-block:var(--section)}
.project__head{display:grid;gap:12px;margin-bottom:clamp(24px,3vw,40px)}
.project__sub{font-family:var(--serif);font-style:italic;font-weight:400;font-kerning:normal;font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);line-height:1.3;color:var(--fg-2);max-width:26em;text-wrap:balance}
.facts{display:grid;gap:8px 24px;margin-top:10px;padding-top:16px;border-top:1px solid var(--fg)}
.facts>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline}
.facts dt{font-size:var(--step--1);color:var(--fg-2)}
.facts dd{font-weight:600;line-height:1.35}
@media(min-width:720px){.facts{grid-template-columns:repeat(3,minmax(0,max-content));gap:14px 64px}.facts>div{display:block}}

.project__body{display:grid;gap:36px}
.brief__text{font-family:var(--statement);font-size:var(--statement-size);line-height:var(--statement-lh);letter-spacing:var(--statement-track);max-width:24em;margin-top:8px;text-wrap:pretty}
.did{display:grid;gap:28px;align-content:start;max-width:34em}
.did__list{margin-top:10px;border-top:1px solid var(--rule)}
.did__list li{padding:11px 0;border-bottom:1px solid var(--rule);line-height:1.5}
.did__note{line-height:1.6;color:var(--fg-2)}

/* stage + playlist */
.reel{display:contents}
.reel__stage{width:min(100%,340px);margin-inline:auto}
.reel__cap{display:grid;gap:4px;padding-top:14px;min-height:5.5em}
.cap__title{font-size:var(--step-1);font-weight:600;line-height:1.3;letter-spacing:-.012em}
.cap__note{line-height:1.55;color:var(--fg-2)}
.reel__list{border-top:1px solid var(--fg);align-self:start}
.reel__item{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:10px 0 10px 14px;min-height:64px;border-bottom:1px solid var(--rule);color:var(--fg);text-decoration:none}
.reel__item::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--accent);transform:scaleY(0);transition:transform .3s var(--ease)}
.reel__item[aria-current="true"]::before{transform:scaleY(1)}
.reel__thumb{grid-row:1/3;width:40px;aspect-ratio:9/16;object-fit:cover;border-radius:3px;opacity:.75;transition:opacity .2s}
.reel__item:hover .reel__thumb,.reel__item[aria-current="true"] .reel__thumb{opacity:1}
.reel__when{grid-column:2;align-self:end;font-size:.875rem;font-weight:600;color:var(--fg-2)}
.reel__item[aria-current="true"] .reel__when{color:var(--accent)}
.reel__name{grid-column:2;align-self:start;font-size:var(--step-0);font-weight:600;line-height:1.25;letter-spacing:-.012em}
.reel__dur{grid-column:3;grid-row:1/3;font-size:.875rem;color:var(--fg-2);font-variant-numeric:tabular-nums}

/* players */
.player{position:relative;aspect-ratio:var(--ar,9/16);width:100%;background:#1c0911;border-radius:10px;overflow:hidden}
.player video{width:100%;height:100%;object-fit:contain;background:#1c0911}
video::-webkit-media-controls-overlay-play-button{display:none}
.player__play{display:none;position:absolute;inset:0;width:100%;place-items:center;border:0;background:transparent;cursor:pointer}
.js .player__play{display:grid}
.player__icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(249,246,242,.94);color:var(--rose);box-shadow:0 10px 30px -10px rgba(0,0,0,.55);transition:transform .2s var(--ease),background-color .2s}
.player__icon svg{width:22px;height:22px;margin-left:3px}
.player__play:hover .player__icon{transform:scale(1.06);background:#fff}
.player__play:focus-visible{outline-offset:-4px;outline-color:#fff}
.player__dur{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(28,9,17,.72);color:#F9F6F2;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.player.is-started .player__play,.player.is-started .player__dur{display:none}
.player--small .player__icon{width:48px;height:48px}
.player--small .player__icon svg{width:18px;height:18px}
.player__error{position:absolute;inset:0;z-index:3;display:grid;place-content:center;gap:6px;padding:20px;text-align:center;background:#2A0E19;color:#F9F6F2;font-size:.9rem;line-height:1.45}
.player__error a{color:var(--petal);font-weight:600;padding-block:12px}
.swap{transition:opacity .18s var(--ease)}
.swap.is-swapping{opacity:0}

.cap{display:grid;gap:4px;padding-top:12px}
.cap__kind{font-size:.875rem;font-weight:600;color:var(--accent)}

/* pair (Shea) and row (Studio) */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.row{display:grid;gap:28px}
.row figure{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:16px;align-items:start}   /* phones: video beside its text, nothing cut off */
.row .cap{padding-top:0}
.studio__lede{max-width:34em;color:var(--fg-2);margin-top:4px}

/* MLE extras */
.extras{display:grid;gap:28px;margin-top:clamp(32px,4vw,52px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--rule)}
.extras__media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.extras__media img{width:100%;aspect-ratio:700/876;object-fit:cover;border-radius:6px}
.extras__notes{display:grid;gap:22px;align-content:start;max-width:32em}
.note__title{font-size:var(--step-1);font-weight:600;line-height:1.3;letter-spacing:-.012em;margin-bottom:6px}
.note p+p{margin-top:8px}
.note{color:var(--fg-2)}
.note .note__title{color:var(--fg)}

@media(min-width:700px){
  .project__body--reel{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:36px 48px}
  .project__body--reel .brief,.project__body--reel .did{grid-column:1/-1}
  .reel__stage{margin:0}
  .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .row figure{display:block}
  .row .cap{padding-top:14px}
  .pair{gap:28px}
  .extras{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px}
}
@media(min-width:1040px){
  .project__body--reel{grid-template-columns:minmax(0,1fr) 340px minmax(240px,300px);grid-template-rows:auto 1fr;grid-template-areas:"brief stage list" "did stage list";gap:36px 56px}
  .project__body--reel .brief{grid-area:brief;grid-column:auto}
  .project__body--reel .did{grid-area:did;grid-column:auto}
  .project__body--reel .reel__stage{grid-area:stage}
  .project__body--reel .reel__list{grid-area:list}
  .project__body--flip{grid-template-columns:minmax(240px,300px) 340px minmax(0,1fr);grid-template-areas:"list stage brief" "list stage did"}
  .project__body--pair{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;grid-template-areas:"brief media" "did media";gap:36px 72px}
  .project__body--pair .brief{grid-area:brief}
  .project__body--pair .did{grid-area:did}
  .project__body--pair .pair{grid-area:media;max-width:560px;justify-self:end;width:100%}
  .row{gap:40px}
}

/* ---------- About ---------- */
.about{padding-block:var(--section)}
.about__grid{display:grid;gap:28px}
.about__side{display:grid;gap:22px;justify-items:start}
.about__photo{position:relative;width:min(78%,320px);margin:0 10px 10px 0}
.about__photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 4px 4px}
.about__photo::after{content:"";position:absolute;inset:-10px -10px auto 10px;aspect-ratio:4/5;border:1px solid var(--rose);border-radius:999px 999px 4px 4px;pointer-events:none}
.about__photo figcaption{margin-top:12px;font-size:var(--step--1);color:var(--fg-2)}
.about__text{display:grid;gap:18px;align-content:start;max-width:36em}
.about__quote{font-family:var(--serif);font-style:italic;font-weight:400;font-kerning:normal;font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem);line-height:1.28;color:var(--fg);max-width:21em;text-wrap:pretty;margin-bottom:6px}
.about__text p+p{color:var(--fg-2);max-width:34em}

/* Skills: one ruled row per group, rose label, items set a little larger than body text */
.skills{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--fg)}
.skills__group{display:grid;gap:6px;padding:18px 0 8px;border-bottom:1px solid var(--rule)}
.skills__group h3{font-size:var(--step--1);font-weight:600;color:var(--accent)}
.skills__group li{font-size:clamp(1.125rem,1.06rem + .25vw,1.2rem);line-height:1.35;padding:10px 0;border-top:1px solid var(--rule)}
.skills__group li:first-child{border-top:0}
@media(min-width:760px){
  .skills__group{grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline;padding:20px 0}
  .skills__group ul{display:flex;flex-wrap:wrap;gap:10px 0}
  .skills__group li{padding:0 18px;border-top:0;border-left:1px solid var(--rule)}
  .skills__group li:first-child{padding-left:0;border-left:0}
}
@media(min-width:900px){
  .about__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:start}
  .about__photo{width:min(100%,360px)}
  .about__text{padding-top:calc(var(--step-3) + 22px)}   /* text starts level with the top of the photo */
  .skills__group{grid-template-columns:200px minmax(0,1fr)}
}

/* ---------- Resume ---------- */
.resume{padding-block:var(--section)}
.resume__grid{display:grid;gap:40px;align-items:center}
.resume__lede{margin-top:18px;color:var(--fg-2);max-width:32em}
.resume__actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.resume__cover{display:block;width:min(100%,340px);justify-self:center;padding:0;border:0;background:#fff;cursor:pointer;border-radius:3px;overflow:hidden;box-shadow:0 1px 2px rgba(42,14,25,.08),0 28px 50px -24px rgba(42,14,25,.45);transition:transform .3s var(--ease)}
.resume__cover:hover{transform:translateY(-4px)}
.resume__cover img{width:100%}
@media(min-width:900px){.resume__grid{grid-template-columns:minmax(0,1fr) 360px;gap:88px}.resume__cover{width:100%}}

.cv-dialog{width:min(100vw,900px);max-width:100vw;height:100dvh;max-height:100dvh;margin:0 auto;padding:0;border:0;background:var(--blush);color:#000;display:none;flex-direction:column}
.cv-dialog[open]{display:flex}
.cv-dialog::backdrop{background:rgba(42,14,25,.62)}
@media(min-width:720px){.cv-dialog{height:calc(100dvh - 48px);margin-top:24px;border-radius:6px;overflow:hidden}}
.cv-dialog__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;padding-top:max(8px,env(safe-area-inset-top,0px));background:var(--burgundy);color:var(--ivory)}
.cv-dialog__title{font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;font-weight:var(--display-w);font-size:1.3rem}
.cv-dialog__tools{display:flex;align-items:center;gap:6px}
.cv-dialog__dl{display:inline-flex;align-items:center;min-height:44px;color:var(--ivory);font-weight:600;font-size:.9rem;padding-inline:12px}
.cv-dialog__close{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(249,246,242,.14);color:var(--ivory);cursor:pointer}
.cv-dialog__close:hover{background:rgba(249,246,242,.26)}
.cv-dialog :focus-visible{outline-color:var(--petal)}
.cv-dialog__scroll{flex:1;overflow-y:auto;padding:16px;overscroll-behavior:contain}
.cv-dialog__scroll :focus-visible{outline-color:var(--rose)}
@media(min-width:720px){.cv-dialog__scroll{padding:32px}}
.cv{background:#fff;color:#000;max-width:8.5in;margin-inline:auto;padding:28px 20px;box-shadow:0 10px 30px -12px rgba(0,0,0,.3);font-family:"Times New Roman",Times,"Liberation Serif",serif;font-size:15px;line-height:1.25}
@media(min-width:720px){.cv{padding:.6in .75in;font-size:11pt}}
.cv .cv__name{text-align:center;font-size:1.55em;font-weight:700;text-decoration:none;margin:0}
.cv__contact{text-align:center;font-size:.95em;margin-top:2px;overflow-wrap:anywhere}
.cv a{color:inherit;text-decoration:none}
.cv h3{font-size:1.23em;font-weight:700;text-decoration:underline;text-underline-offset:2px;margin:14px 0 6px}
.cv__job{margin-bottom:9px}
.cv__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 16px}
.cv ul{margin:2px 0 0 22px;list-style:disc}
.cv li{margin-bottom:1px;padding-left:4px}
.cv__skills{margin-left:22px}

/* ---------- Contact ---------- */
.contact{padding-top:var(--section)}
.contact__title{font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;font-weight:var(--display-w);font-size:clamp(2.8rem,9.5vw,6.6rem);line-height:1;max-width:11em;text-wrap:balance}
.contact__text{margin-top:22px;max-width:32em;color:var(--fg-2)}
.contact__links{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.contact__email{overflow-wrap:anywhere}
.footer{margin-top:clamp(36px,4.5vw,60px);border-top:1px solid var(--rule)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:8px;font-size:var(--step--1);color:var(--fg-2)}
.footer a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;color:var(--fg)}

/* ---------- Motion ---------- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s cubic-bezier(.2,.7,.2,1)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- Phones: nothing is set smaller than 17px ---------- */
@media(max-width:899px){
  :root{--step--1:1.0625rem}
  .nav a,.rotator__lead,.reel__when,.reel__dur,.player__dur,.player__error,.cap__kind,.cv-dialog__dl{font-size:1.0625rem}
  .rotator__lead{letter-spacing:.1em}
  .nav{gap:clamp(2px,1.6vw,20px)}
}