/* Candidate sections. Each block below is independent; delete the ones you don't keep. */

/* section hairline: inset to the content column like the lines inside the sections, not full width */
.cand{position:relative}
.cand::before{content:"";position:absolute;top:0;left:50%;width:min(100% - 2 * var(--gutter),var(--content));height:1px;background:var(--line);transform:translateX(-50%)}
.cand.sweep::after{left:max(var(--gutter),(100% - var(--content)) / 2)}
/* the full-bleed hover-words section gets full-width lines above and below it (the line below is the next section's) */
.c06::before,.c06 + .cand::before{left:0;width:100%;transform:none;--tx:0}
.c06.sweep::after,.c06 + .cand.sweep::after{left:0}
/* no draw on the two full-width lines: they are simply there */
.js .c06.sweep::before,.js .c06 + .cand.sweep::before{transform:none;animation:none}
.c06.sweep::after,.c06 + .cand.sweep::after{display:none}
.cand h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,52px);line-height:1.14;letter-spacing:.06em;text-transform:uppercase;margin:14px 0 18px}
.cand h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.2;letter-spacing:.06em;margin:12px 0 12px}
.cand p:not(.eyebrow):not(.c-note){color:var(--muted);font-weight:500;max-width:34em}
.c-note{margin-top:22px;font-size:11.5px;font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* 03 story rows */
.c03{padding-block:clamp(70px,8vw,120px)}
.c03-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,90px);align-items:center;padding-block:clamp(26px,3vw,46px)}
.c03-row+.c03-row{border-top:1px solid var(--line)}
.c03-row:nth-child(even) figure{order:2}
.c03-row figure img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* 04 sticky chapters */
.c04{padding-block:clamp(70px,8vw,120px)}
.c04-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:start}
.c04-pin{position:sticky;top:calc(var(--nav-h) + 40px)}
.c04-pin .pill{margin-top:30px}
.c04-stack{display:grid;gap:clamp(24px,3vw,48px)}
.c04-stack img{width:100%;aspect-ratio:3/2;object-fit:cover}
.c04-stack figcaption{margin-top:12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}

/* 05 gallery strip */
.c05{padding-block:clamp(70px,8vw,120px)}
.c05-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.c05-head h2{margin-bottom:0}
.c05-strip{list-style:none;margin:0;padding:0 var(--gutter);display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
.c05-strip::-webkit-scrollbar{display:none}
.c05-strip{cursor:grab;user-select:none;touch-action:pan-y}
.c05-strip.dragging{cursor:grabbing;scroll-behavior:auto}
.c05-strip img{-webkit-user-drag:none;pointer-events:none}
.c05-strip li{flex:none;width:min(640px,84vw)}
.c05-strip img{width:100%;aspect-ratio:3/2;object-fit:cover}
.c05-strip span{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}

/* 06 hover words */
.c06{min-height:86svh;display:grid;align-items:center;overflow:hidden}
.c06-bg{position:absolute;inset:0}
.c06-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.c06-bg img.on{opacity:.38}
.c06-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(10,10,11,.9),rgba(10,10,11,.35))}
.c06-list{position:relative;list-style:none;margin:0;padding-block:90px}
.c06-list li{border-top:1px solid var(--line);position:relative}
.c06-list li:last-child{border-bottom:1px solid var(--line)}
.c06-list a{display:flex;align-items:baseline;gap:30px;padding:clamp(14px,2vw,26px) 0;font-family:var(--display);font-size:clamp(40px,8vw,120px);line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);transition:color .5s,padding-left .5s var(--ease)}
.c06-list a small{font-size:14px;letter-spacing:.3em;color:var(--silver)}
.c06-list li.on a{color:var(--paper);padding-left:clamp(10px,2vw,40px)}

/* 07 bento */
.c07{padding-block:clamp(70px,8vw,120px)}
.c07-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,20vw,290px);gap:14px}
.c07-grid figure{overflow:hidden}
.c07-grid figure img{width:100%;height:100%;object-fit:cover}
.c07-text{grid-column:1/3;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(10px,2vw,30px) 10px 0}
.c07-grid .a{grid-column:3/5;grid-row:1/3}
.c07-grid .b{grid-column:1;grid-row:2}
.c07-grid .d{grid-column:2;grid-row:2}
.c07-grid .c{grid-column:1/3;grid-row:3}
.c07-grid .e{grid-column:3/5;grid-row:3}

/* 19 two cards */
.c19{padding-block:clamp(70px,8vw,120px)}
.c19-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.c19-card{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ink-2)}
.c19-card span{position:absolute;inset:auto 0 0;z-index:1;padding:clamp(24px,3vw,44px);display:grid;gap:8px;background:linear-gradient(to top,rgba(10,10,11,.95) 0,rgba(10,10,11,.7) 45%,transparent)}
.c19-card small{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--silver)}
.c19-card strong{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2vw,32px);letter-spacing:.06em;white-space:nowrap}
.c19-card em{font-style:normal;font-size:22px;color:var(--silver);transition:transform .5s var(--ease)}
.c19-card:hover em{transform:translateX(8px)}

@keyframes c01{to{transform:translate3d(-50%,0,0)}}

/* 20 light section */

@media (max-width:900px){
  .c03-row,.c04-grid,.c19-grid{grid-template-columns:1fr}
  .c03-row figure{order:2}   /* on a phone every row reads text first, image second */
  .c04-pin{position:static}
  /* phone collage: text, one wide image, two squares, two tall ones */
  .c07-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .c07-grid .a,.c07-grid .b,.c07-grid .c,.c07-grid .d,.c07-grid .e,.c07-grid .c07-text{grid-column:auto;grid-row:auto}
  .c07-grid .c07-text,.c07-grid .a{grid-column:1/-1}
  .c07-text{padding:0 0 10px}
  .c07-grid img{height:auto}
  .c07-grid .a img{aspect-ratio:16/10}
  .c07-grid .b img,.c07-grid .d img{aspect-ratio:1}
  .c07-grid .c img,.c07-grid .e img{aspect-ratio:4/5}
  .c07-grid .c{order:1}.c07-grid .e{order:2}
  .c06-list a{font-size:clamp(30px,8vw,120px)}
  .c06{min-height:0}
  .c06-list{padding-block:56px}
  .c06-bg img.on{opacity:.55}
  .c06-bg::after{background:linear-gradient(to bottom,rgba(10,10,11,.55),rgba(10,10,11,.25))}
  .c13-tabs{overflow-x:auto;scrollbar-width:none}
  .c13-tabs button{white-space:nowrap}
  .c10-line li{padding-top:18px}
  .c13-pane{align-items:start}
  .c17-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .c01-track{animation:none}
  .c15{--w:1}
  .c12-text span{color:var(--paper)}
}





/* PLATES: every section image gets the hero's look — a cool, slightly desaturated grade with a soft vignette, a thin inset
   hairline frame and the emblem as a watermark. Colour comes back on hover. The images themselves are static. */
.plate{position:relative;display:block;height:100%;overflow:hidden;background:var(--ink-2)}   /* fills its tile, so height:100% images still work */
.plate img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.05) brightness(.9);transition:filter .9s var(--ease)}
.plate::before{content:"";position:absolute;inset:0;background:radial-gradient(115% 95% at 50% 40%,transparent 50%,rgba(8,9,11,.6));pointer-events:none;transition:opacity .9s}
.plate::after{content:"";position:absolute;inset:12px;border:1px solid rgba(240,241,238,.22);pointer-events:none;transition:border-color .9s}
.plate:hover img,.c19-card:hover .plate img{filter:none}
.plate:hover::before,.c19-card:hover .plate::before{opacity:.5}
.plate:hover::after,.c19-card:hover .plate::after{border-color:rgba(240,241,238,.5)}
/* emblem watermark in the lower-right corner of every plate */
/* the emblem's shape, used as a mask over a flat off-white fill, so it reads as a stamp at low opacity on any image */
.plate i{position:absolute;right:26px;bottom:24px;width:clamp(28px,3.4vw,48px);aspect-ratio:1306/1205;background:var(--paper);-webkit-mask:url(media/brand/Ateleta_Emblem.png) center/contain no-repeat;mask:url(media/brand/Ateleta_Emblem.png) center/contain no-repeat;opacity:.32;pointer-events:none;transition:opacity .9s}
.plate:hover i,.c19-card:hover .plate i{opacity:.6}
/* cards: the plate is the card background; it keeps the shared grade and depth shift, dims a little further under the caption,
   and carries the watermark top-right (the caption lives in the bottom corner) */
.c19-card .plate{position:absolute;inset:0}
.c19-card .plate img{opacity:.85;transition:filter .9s var(--ease),opacity .9s}
.c19-card:hover .plate img{opacity:1}
.c19-card .plate i{right:26px;bottom:auto;top:24px}   /* the caption owns the bottom corner, so the cards carry the mark top-right */
@media (max-width:900px){.plate::after{inset:8px}}