/* POLINA LOGUNOVA — Issue Nº 1. Chaptered editorial: the page is a printed
   feature. Hard ground cuts between chapters, folio in the margin, one film.
   Palette: porcelain / blush / ink / lipstick rose / plum / champagne. */

:root{
  /* Mike's ruling 2026-09-01: bright, white, box-orange, metallic gold. Vegas, not Michigan. */
  --porcelain:#FFFFFF; --ivory:#FDFBF7; --blush:#FFF7F2; --blush-deep:#C75014;
  --cream:#FDFAF5; --ink:#1C1612; --ink-soft:#6B5F55; --rose:#C75014;
  --plum:#A13A08; --gold:#C9A153; --gold-hi:#F0D48A;
  --hairline:rgba(28,22,18,.14);
  --ease:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(1.2rem,4vw,4rem);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif; font-weight:300;
  color:var(--ink); background:var(--porcelain); line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--rose); color:#fff}
img{max-width:100%; height:auto}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif; font-weight:420; text-wrap:balance}
p{text-wrap:pretty}

/* entry reveals: fire once, small and fast */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .rv.on{opacity:1; transform:none}
  .kn{display:inline-block; opacity:0; transform:translateY(.35em); transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .kn.on{opacity:1; transform:none}
  .masthead-line--two .kn, .masthead-line--two.kn{transition-delay:.14s}
}

/* ---------- folio ---------- */
.folio{
  position:fixed; left:1.1rem; bottom:1.2rem; z-index:40;
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); mix-blend-mode:multiply; pointer-events:none;
}
.folio-mark{font-family:'Fraunces',serif; font-size:.9rem; letter-spacing:.08em; color:var(--rose)}
.ch-class ~ * .folio{}  /* ground-aware color handled in JS via data attr */
.folio.folio--light{color:rgba(250,246,244,.75); mix-blend-mode:normal}
.folio.folio--light .folio-mark{color:var(--gold)}
@media(max-width:700px){.folio{left:.8rem; bottom:.8rem}}
@media(max-width:820px){
  :root{--gutter:clamp(1.4rem,6vw,2.4rem)}
  .display{font-size:clamp(2rem,9vw,2.8rem)}
  .lede{font-size:1rem}
}

/* ---------- chapters share ---------- */
.chapter{position:relative; padding:clamp(4rem,9vh,7rem) var(--gutter)}
.intertitle{
  display:flex; align-items:baseline; gap:1.2rem; justify-content:flex-start;
  border-top:1px solid var(--hairline); padding-top:1.1rem;
  margin-bottom:clamp(2.4rem,6vh,4.5rem); max-width:1200px; margin-inline:auto;
}
.intertitle-no{font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--rose); white-space:nowrap}
.intertitle-title{font-size:clamp(1.5rem,2.6vw,2.1rem); font-style:italic; font-weight:420}
.display{font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.02; letter-spacing:-.01em; margin-bottom:1.2rem}
.lede{max-width:34rem; font-size:1.05rem; color:var(--ink-soft)}
.aside{margin-top:1.8rem; font-style:italic; font-size:.9rem; color:var(--ink-soft)}

/* running-text CTA: an underlined line of print, never a button island */
.running-line{margin-top:2rem; font-size:1.05rem}
.running-cta{
  color:var(--rose); text-decoration:underline; text-underline-offset:.3em;
  text-decoration-thickness:1.5px; font-weight:500; transition:color .15s var(--ease);
}
.running-cta:hover{color:var(--plum)}
.running-cta:focus-visible{outline:2px solid var(--rose); outline-offset:3px}
.running-cta--gold{color:var(--gold)}
.running-cta--gold:hover{color:var(--gold-hi)}
.ch-line .running-cta{color:var(--gold-hi)}

/* ---------- cover: the title page ---------- */
.cover{
  min-height:96vh; display:flex; flex-direction:column; justify-content:center;
  background:var(--porcelain); padding-top:max(24vh, 240px); position:relative; overflow:hidden;
}
.cover-chandelier{
  position:absolute; top:-4%; left:50%; width:clamp(240px,30vw,430px);
  transform:translateX(-50%); transform-origin:top center; pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(201,161,83,.35));
}
@media (prefers-reduced-motion: no-preference){
  .cover-chandelier{animation:sway 9s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:translateX(-50%) rotate(-.7deg)}50%{transform:translateX(-50%) rotate(.7deg)}}
}
.cover-tag{
  margin-top:1.6rem; font-family:'Fraunces',serif; font-style:italic;
  font-size:clamp(1.05rem,2vw,1.4rem); color:var(--ink-soft);
}
@media(max-width:820px){
  .cover{padding-top:max(30vh,230px); min-height:92vh}
  .cover-chandelier{width:min(62vw,300px); top:-2%}
}
.cover-issue{
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:clamp(1.6rem,4vh,3rem); margin-left:clamp(0rem,6vw,6rem);
}
.masthead{line-height:.88; letter-spacing:-.02em; font-weight:380}
.masthead-line{display:block; font-size:clamp(4.2rem,15.5vw,15rem)}
.masthead-line--two{margin-left:clamp(2.5rem,17vw,17rem)}
.masthead-line--two em{font-style:italic; color:var(--rose)}
.cover-lines{
  margin:clamp(2.2rem,6vh,4rem) 0 0 auto; width:min(30rem,88vw);
  border-top:1px solid var(--hairline);
}
.cover-line{
  display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:.65rem 0; border-bottom:1px solid var(--hairline);
  font-family:'Fraunces',serif; font-size:clamp(.98rem,1.5vw,1.15rem);
}
.cover-pg{font-family:'Archivo',sans-serif; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap}
.cover-cta{margin-top:1.6rem; text-align:right; font-size:1.05rem}

/* ---------- chapter I: the craft ---------- */
.ch-craft{background:var(--ivory); padding-bottom:0}
.craft-track{height:320vh; position:relative}
.craft-stage{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center}
.craft-frame{width:min(46vh,86vw); position:relative}
.muse{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:6px; box-shadow:0 34px 80px -34px rgba(122,37,71,.4);
}
.craft-caption{
  margin-top:.9rem; text-align:center; font-style:italic; font-size:.88rem; color:var(--ink-soft);
}

/* ---------- chapter II: the chair ---------- */
.ch-chair{background:var(--blush)}
.spread{
  display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(2rem,5vw,5rem);
  align-items:start; max-width:1200px; margin-inline:auto;
}
@media(max-width:820px){.spread{grid-template-columns:1fr}}
.spread-photo img{border-radius:4px; display:block}
.spread-photo figcaption, .line-plate figcaption{
  margin-top:.7rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.menu{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.6rem,4vw,3.5rem); max-width:1200px; margin:clamp(2.6rem,6vh,4.5rem) auto 0;
  border-top:1px solid var(--hairline); padding-top:2rem;
}
.menu-col h4{font-size:1.05rem; font-style:italic; color:var(--plum); margin-bottom:.9rem}
.menu-col ul{list-style:none}
.menu-col li{
  display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
  border-bottom:1px solid var(--hairline); font-size:.93rem;
}
.menu-col li:last-child{border-bottom:none}
.menu-col b{font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums}
.ch-chair .aside{max-width:1200px; margin-inline:auto}

/* ---------- chapter III: the classroom (ink ground) ---------- */
.ch-class{background:var(--ivory)}
.ch-class .intertitle-no{color:var(--gold)}
.ch-class .display{color:var(--ink)}
.ch-class ::selection{background:var(--gold); color:#fff}
.class-inner{max-width:1200px; margin-inline:auto; padding:clamp(1rem,4vh,3rem) 0}
.class-inner .display{max-width:16ch}

/* ---------- chapter IV: the line ---------- */
.ch-line{background:var(--blush-deep); color:#fff}
.ch-line .intertitle{border-top-color:rgba(255,255,255,.35)}
.ch-line .intertitle-no{color:var(--gold-hi)}
.ch-line .intertitle-title{color:#fff}
.ch-line .lede{color:rgba(255,255,255,.88)}
.ch-line .aside{color:rgba(255,255,255,.65)}
.ch-line .line-plate figcaption{color:rgba(255,255,255,.75)}
.ch-line ::selection{background:var(--gold-hi); color:var(--ink)}
.line-plate{max-width:1200px; margin-inline:auto}
.line-plate img{border-radius:4px; display:block; width:100%}
@media (prefers-reduced-motion: no-preference){
  .line-plate img{clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--ease)}
  .line-plate.wiped img{clip-path:inset(0 0 0 0)}
}
.line-copy{max-width:1200px; margin:clamp(2rem,5vh,3.5rem) auto 0}

/* ---------- chapter V: press ---------- */
.ch-press{background:var(--cream)}
.quotes{max-width:1200px; margin-inline:auto; display:grid; gap:clamp(2rem,5vh,3.4rem)}
.quotes blockquote{
  font-family:'Fraunces',serif; font-style:italic; font-weight:380;
  font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.12; max-width:22ch;
}
.quotes blockquote:nth-child(2){margin-left:auto; text-align:right}
.quotes cite{
  display:block; font-family:'Archivo',sans-serif; font-style:normal;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.8rem;
}
.press-note{max-width:1200px; margin:2.6rem auto 0; font-size:.85rem; color:var(--ink-soft)}

/* ---------- colophon ---------- */
.colophon{background:var(--porcelain); min-height:92vh}
.colophon-mast{max-width:1200px; margin-inline:auto; border-top:1px solid var(--hairline); padding-top:1.4rem}
.colophon-issue{font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.6rem}
.contact-form{max-width:44rem; margin:2.6rem auto 0; max-width:min(44rem,100%);}
.colophon .contact-form{margin-left:auto; margin-right:auto}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.contact-form label{
  display:flex; flex-direction:column; gap:.4rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:inherit; font-size:1rem; font-weight:300; padding:.7rem .2rem;
  border:none; border-bottom:1px solid var(--hairline); border-radius:0;
  background:transparent; color:var(--ink); transition:border-color .18s var(--ease);
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none; border-bottom:1.5px solid var(--rose);
}
.form-wide{margin-top:1.2rem}
.form-file{margin:1.4rem 0 2rem; flex-direction:row !important; align-items:center; gap:.8rem !important; text-transform:none !important; letter-spacing:0 !important; font-size:.9rem !important}
.file-note{font-size:.78rem; font-style:italic; color:var(--ink-soft)}
.form-send{
  font-family:'Fraunces',serif; font-size:1.15rem; font-style:italic;
  background:none; border:none; color:var(--rose); cursor:pointer;
  text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1.5px;
  padding:.2rem 0; transition:color .15s var(--ease);
}
.form-send:hover{color:var(--plum)}
.form-send:active{transform:translateY(1px)}
.form-send[disabled]{opacity:.5; cursor:not-allowed}
.form-send:focus-visible{outline:2px solid var(--rose); outline-offset:3px}
.form-note{margin-top:.7rem; font-size:.76rem; font-style:italic; color:var(--ink-soft)}
.colophon-foot{
  max-width:1200px; margin:clamp(3rem,8vh,5rem) auto 0;
  border-top:1px solid var(--hairline); padding-top:1.2rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--ink-soft);
}
.foot-fine{font-size:.72rem}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* touch: the film loops instead of scrubbing, so the track needs less runway */
@media(max-width:820px){
  .craft-track{height:150vh}
  .masthead-line--two{margin-left:12vw}
}

/* ===================== THE VEGAS LAYER =====================
   Ambient life: gold dust, depth, tilt, glow. White stays crisp;
   the motion is jewelry, never noise. */

#dust{position:fixed; inset:0; z-index:1; pointer-events:none}
.chapter{z-index:2}
.folio{z-index:40}

/* metallic gold intertitle rules: a thin gradient bar above each chapter */
.intertitle{border-top:none; position:relative; padding-top:1.3rem}
.intertitle::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold-hi), var(--gold) 30%, rgba(201,161,83,.15) 85%);
}
.ch-line .intertitle::before{background:linear-gradient(90deg, #FFE9B8, var(--gold-hi) 30%, rgba(255,233,184,.2) 85%)}

/* tilt targets get depth */
[data-tilt]{transform-style:preserve-3d; will-change:transform; transition:box-shadow .3s var(--ease)}
.spread-photo img, .line-plate img{box-shadow:0 24px 60px -28px rgba(28,22,18,.35)}

/* pointer spotlight on the menu: a warm glow follows the mouse */
.menu{position:relative}
@media (hover:hover) and (pointer:fine){
  .menu::after{
    content:''; position:absolute; inset:-2rem; pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
      rgba(199,80,20,.10), transparent 65%);
    opacity:0; transition:opacity .4s var(--ease);
  }
  .menu:hover::after{opacity:1}
}

/* line-by-line assembly for display headlines */
.asm .asm-line{display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em}
.asm .asm-line > span{display:inline-block; transform:translateY(110%); transition:transform .85s var(--ease)}
.asm.on .asm-line > span{transform:none}
.asm.on .asm-line:nth-child(2) > span{transition-delay:.12s}
.asm.on .asm-line:nth-child(3) > span{transition-delay:.24s}

/* floating accents: tiny gold marks that drift with scroll (parallax via --p) */
.float-mark{
  position:absolute; font-family:'Fraunces',serif; font-style:italic;
  color:var(--gold); opacity:.5; pointer-events:none; font-size:1.1rem;
}

/* menu rows light up */
.menu-col li{transition:background .2s var(--ease), padding-left .2s var(--ease)}
@media (hover:hover){
  .menu-col li:hover{background:rgba(199,80,20,.05); padding-left:.4rem}
}

/* quotes get a gold opening mark that overshoots */
.quotes blockquote{position:relative}
.quotes blockquote::before{
  content:'\201C'; position:absolute; left:-.55em; top:-.28em;
  font-size:2.2em; color:var(--gold-hi); opacity:.85; font-family:'Fraunces',serif;
}

/* the film frame floats: slow breathing shadow */
@media (prefers-reduced-motion: no-preference){
  .craft-frame{animation:breathe 7s ease-in-out infinite}
  @keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}

/* ===================== THE SCENES (the ride) =====================
   Each scene pins full-bleed; scroll drives --sp 0..1:
   swoosh in (scale settles, blur clears), hold, swoosh out (lifts away). */
.scene{height:230vh; position:relative; padding:0}
.scene-pin{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--porcelain)}
.scene-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* the drone: p 0-0.72 flies INTO the photo (scale up), p 0.72-1 flattens
     back to 1 so the plate releases and slides off like an ordinary image */
  transform:scale(calc(1 + min(var(--sp,0), .72) * .58 - max(var(--sp,0) - .72, 0) * 1.49));
  opacity:1;
  filter:none;
  will-change:transform, opacity, filter;
}
.scene-title{
  position:absolute; left:0; right:0; top:12%; display:flex; justify-content:center;
  padding:0 var(--gutter); text-align:center;
}
.scene-title--low{top:auto; bottom:7%}
.scene-title p{
  font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.15rem,2.2vw,1.7rem);
  color:#fff; text-shadow:0 2px 26px rgba(28,22,18,.55);
  background:rgba(28,22,18,.32); backdrop-filter:blur(6px);
  padding:.55rem 1.3rem; border-radius:99px; max-width:44rem;
  opacity:calc(min(max(var(--sp,0) - .22, 0) * 5, 1) - max(var(--sp,0) - .72, 0) * 4);
}
/* the film in the mirror: sized/positioned by JS to the render's mirror */
.mirror-film{
  position:absolute; overflow:hidden; border-radius:8px;
  box-shadow:0 0 0 3px rgba(201,161,83,.65), 0 30px 70px -20px rgba(28,22,18,.5);
  opacity:calc(1 - max(var(--sp,0) - .76, 0) * 4.2);
}
.mirror-film .muse{width:100%; height:100%; object-fit:cover; display:block; border-radius:0; box-shadow:none}
.scene--mirrors{height:340vh}
@media(max-width:820px){.scene{height:170vh}.scene--mirrors{height:220vh}}

/* phones: the film floats center-stage over the salon, gold-framed */
@media(max-width:820px) and (orientation:portrait){
  .mirror-film{
    left:50% !important; top:50% !important;
    width:min(58vw,270px) !important; height:auto !important;
    transform:translate(-50%,-52%);
    aspect-ratio:3/4;
    box-shadow:0 0 0 4px rgba(201,161,83,.9), 0 34px 70px -18px rgba(28,22,18,.55);
    background:#EDE6DA;
  }
  .mirror-film .muse{transform:scale(1.28); transform-origin:50% 42%}
}

/* ===================== THE RIDES =====================
   Scroll drives the camera through the room. Mid-ride the move settles and
   ONE message appears inside the scene, then the ride releases. */
.ride{height:300vh; position:relative; padding:0}
.ride-pin{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--porcelain)}
.ride-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ride-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(34rem,86vw); text-align:center; padding:2rem 2.2rem;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
  border-radius:14px; box-shadow:0 0 0 1.5px rgba(201,161,83,.7), 0 40px 90px -30px rgba(28,22,18,.45);
  opacity:calc(min(max(var(--sp,0) - .34, 0) * 9, 1) - max(var(--sp,0) - .64, 0) * 7);
  pointer-events:none;
}
.ride-card-kicker{font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--rose); margin-bottom:.7rem}
.ride-card-title{font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.12; font-weight:440}
.ride-card-body{margin-top:.9rem; font-size:.98rem; color:var(--ink-soft)}
@media(max-width:820px){.ride{height:210vh}}

/* the chair film sits where the still sat */
.chair-film{position:relative; border-radius:4px; overflow:hidden; box-shadow:0 24px 60px -28px rgba(28,22,18,.35)}
.chair-film .muse{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:0; box-shadow:none}

/* press table figure + facts strip */
.press-table{max-width:1000px; margin:0 auto clamp(2rem,5vh,3.4rem)}
.press-table img{border-radius:8px; box-shadow:0 26px 60px -26px rgba(28,22,18,.35)}
.facts{
  display:flex; gap:clamp(1.5rem,6vw,5rem); justify-content:center;
  max-width:1100px; margin:clamp(2.6rem,6vh,4rem) auto 0;
  border-top:1px solid var(--hairline); padding-top:2rem; flex-wrap:wrap;
}
.fact{text-align:center}
.fact b{display:block; font-family:'Fraunces',serif; font-weight:420; font-size:clamp(2.2rem,5vw,3.6rem); color:var(--rose); font-variant-numeric:tabular-nums}
.fact span{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft)}

/* ===================== THE WALK-IN ===================== */
.wf-name{font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:clamp(3rem,7vw,6.5rem); line-height:.95; letter-spacing:-.01em; color:#fff; text-shadow:0 4px 40px rgba(28,22,18,.5)}
.wf-name em{font-style:italic; color:#F0D48A}
.wf-tag{margin-top:1rem; font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1rem,1.8vw,1.35rem); color:rgba(255,255,255,.92); text-shadow:0 2px 18px rgba(28,22,18,.5)}
.wf-line{font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.3rem,2.6vw,2rem); color:#fff; text-shadow:0 2px 26px rgba(28,22,18,.6); max-width:26ch; line-height:1.25}
.wf-line--finale{font-size:clamp(1.6rem,3vw,2.4rem)}
.sc-world__scrim{--sc-canvas:#1C1612; --sc-scrim-a:52%}

/* the flight runs everywhere; phones get portrait legs via data-sc-src-mobile */
.m-hero{position:relative; min-height:88vh}
.m-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.m-hero-copy{
  position:absolute; left:0; right:0; bottom:0; padding:2rem var(--gutter) 2.6rem;
  background:linear-gradient(0deg, rgba(28,22,18,.62), transparent);
}

/* ===================== EVENTS ===================== */
.event{position:relative; border-radius:6px; overflow:hidden; box-shadow:0 26px 60px -26px rgba(28,22,18,.4)}
.event-clip{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.flick{max-width:520px; margin:clamp(2.6rem,6vh,4rem) auto 0}
.flick figcaption{margin-top:.7rem; text-align:center; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.line-split2{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; max-width:1200px; margin-inline:auto}
@media(max-width:820px){.line-split2{grid-template-columns:1fr}}

/* mobile overflow guard: the attach row wraps, nothing escapes the viewport */
.form-file{flex-wrap:wrap}
.form-file input{max-width:100%}
html{overflow-x:clip}
@media(max-width:820px){
  .form-file{flex-direction:column !important; align-items:flex-start !important; gap:.5rem !important}
}