/* ============================================================================
   pages.css — layout per page. Shared components live in base.css.
   ========================================================================== */

/* ══ HOME ═════════════════════════════════════════════════════════════ */
.hero{ padding-block:clamp(36px,4.4vw,68px) clamp(28px,3.4vw,52px); position:relative }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
  gap:clamp(26px,4vw,72px); align-items:end;
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:var(--fs-hero); line-height:1.02; letter-spacing:-.024em;
  margin-block:clamp(14px,1.6vw,22px) clamp(18px,2.2vw,30px);
  max-width:16ch;
}
.hero__title em{ font-style:italic; color:var(--olive) }
.hero__facts{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  border-top:1px solid var(--ink-25); padding-top:14px; max-width:62ch;
}
.hero__facts b{ font-weight:400; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase }
.hero__facts span{ color:var(--ink-25) }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,2.6vw,34px) }
.hero__side{
  border-left:1px solid var(--ink-12); padding-left:clamp(20px,2.4vw,34px);
  display:flex; flex-direction:column; gap:clamp(18px,2.2vw,28px); align-self:stretch;
}
/* the photograph sits in the space beside the title, the facts stay at the foot */
.hero__figure{ margin:0 }
.hero__figure .figure__frame{
  aspect-ratio:auto; height:clamp(260px,27vw,400px);
  border:1px dashed var(--ink-25); background:var(--paper-2);
}
.hero__figure .figure__frame.filled{ border:0 }
.hero__figure img{ width:100%; height:100%; object-fit:cover; object-position:center 42% }
.hero__meta{ display:grid; gap:clamp(14px,1.8vw,22px); margin-top:auto }
.hero__side .k{ display:block; margin-bottom:4px }
.hero__side .v{ font-family:var(--serif); font-size:clamp(19px,1.4vw,24px); line-height:1.25 }
.hero__side .code{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-60); line-height:1.6 }
.hero__note{ font-size:14.5px; line-height:1.6; color:var(--ink-60); max-width:38ch }

.contour{ display:block; width:100%; height:clamp(34px,4vw,60px); color:var(--ink-12); margin-top:clamp(14px,2vw,26px) }
.contour path{ fill:none; stroke:currentColor; stroke-width:1 }

/* project at a glance */
.glance{ border-top:1px solid var(--ink-25); border-bottom:var(--line) }
.glance__row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 }
.stat{ padding-block:clamp(22px,2.6vw,36px); display:grid; gap:6px; align-content:start }
.stat + .stat{ border-left:var(--line); padding-left:clamp(14px,1.8vw,28px) }
.stat{ padding-right:clamp(10px,1.4vw,20px) }
.stat__n{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,3.6vw,60px); line-height:1; letter-spacing:-.028em;
}
.stat--place .stat__n,
.stat--dates .stat__n{ font-size:clamp(22px,1.7vw,26px); line-height:1.15; letter-spacing:-.015em }
.stat__l{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-lbl) }
.glance__foot{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(18px,3vw,50px); border-top:var(--line); padding-block:clamp(18px,2.2vw,28px);
}
.glance__foot p{ font-size:var(--fs-small); line-height:1.6; max-width:46ch }
.countries{ display:flex; flex-wrap:wrap; gap:0 18px; align-items:baseline }
.countries li{ font-family:var(--serif); font-size:clamp(17px,1.3vw,21px) }
.countries li .h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--clay-text); margin-left:7px }

/* the idea */
.story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.4vw,80px); align-items:start }
.story__text p + p{ margin-top:1em }
.story__q{
  font-family:var(--serif); font-size:clamp(23px,2.2vw,34px); line-height:1.24; letter-spacing:-.015em;
  border-top:1px solid var(--ink-25); padding-top:clamp(16px,2vw,24px); margin-top:clamp(20px,2.4vw,32px);
  text-wrap:balance;
}
.transforms{ display:grid }
.tr{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(40px,5vw,78px) minmax(0,1fr);
  align-items:center; gap:clamp(8px,1.4vw,18px);
  padding-block:clamp(13px,1.5vw,20px); border-top:var(--line);
}
.tr:last-child{ border-bottom:var(--line) }
.tr b{ font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.5vw,24px); line-height:1.15 }
.tr .a{ color:var(--ink-lbl) }
.tr .b{ text-align:right }
.tr__line{ position:relative; height:1px; background:var(--ink-12) }
.tr__line::after{
  content:""; position:absolute; right:0; top:50%; width:6px; height:6px;
  border-top:1px solid var(--clay); border-right:1px solid var(--clay);
  transform:translateY(-50%) rotate(45deg);
}
.goals{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,3.4vw,60px) }
.goal{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(10px,1.4vw,18px); align-items:baseline;
       padding-block:clamp(14px,1.6vw,20px); border-top:var(--line) }
.goal .n{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--clay-text) }
.goal .t{ font-family:var(--serif); font-size:clamp(18px,1.35vw,22px); line-height:1.2; display:block; margin-bottom:5px }
.goal .d{ font-size:var(--fs-small); line-height:1.55; color:var(--ink-60); max-width:42ch }

/* journey preview */
.sig{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,40px) }
.sig a{ display:grid; gap:8px; align-content:start; border-top:1px solid var(--ink-25); padding-top:14px }
.sig .d{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase; color:var(--clay-text) }
.sig .t{ font-family:var(--serif); font-size:clamp(18px,1.5vw,24px); line-height:1.14; transition:color .25s var(--ease) }
.sig .s{ font-size:var(--fs-small); line-height:1.5; color:var(--ink-60) }
.sig .go{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--clay-text) }
.sig a:hover .t{ color:var(--clay-text) }

/* quick links */
.qlinks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,40px) }
.qlink{ display:grid; gap:7px; align-content:start; border-top:1px solid var(--ink-25); padding-top:16px; padding-bottom:6px }
.qlink .t{ font-family:var(--serif); font-size:clamp(19px,1.5vw,25px); line-height:1.15; transition:color .25s var(--ease) }
.qlink .s{ font-size:var(--fs-small); line-height:1.5; color:var(--ink-60); max-width:34ch }
.qlink .go{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--clay-text); margin-top:4px }
.qlink:hover .t{ color:var(--clay) }

@media (max-width:1000px){
  /* five stats never divide into three columns without leaving a hole,
     and the dates are already in the hero just above */
  .glance__row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 }
  .stat--dates{ display:none }
  .stat:nth-child(odd){ border-left:0; padding-left:0 }
  .stat:nth-child(n+3){ border-top:var(--line) }
}
@media (max-width:900px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,40px) }
  .hero__side{ border-left:0; border-top:1px solid var(--ink-12); padding-left:0; padding-top:22px }
  .hero__figure .figure__frame{ height:auto; aspect-ratio:1/1 }
  .story{ grid-template-columns:minmax(0,1fr) }
  .goals{ grid-template-columns:minmax(0,1fr) }
  .sig{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .qlinks{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .glance__foot{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:720px){
  .qlinks{ grid-template-columns:minmax(0,1fr) }
  .hero__title{ max-width:none }
  /* the dates already sit in the hero, so the glance keeps a clean 2x2 */
  .glance__row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 }
  .stat{ padding:18px 12px 18px 0; border-top:var(--line) }
  .stat + .stat{ border-left:0; padding-left:0 }
  .stat:nth-child(-n+2){ border-top:0 }
  .stat:nth-child(2n){ border-left:var(--line); padding-left:clamp(14px,4vw,20px) }
  .stat--dates{ display:none }
  .stat__n{ font-size:clamp(36px,9.5vw,48px) }
  .stat--place .stat__n{ font-size:clamp(19px,5.2vw,23px) }
  .sig{ grid-template-columns:minmax(0,1fr) }
  .tr{ grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:10px }
  .tr b{ font-size:clamp(16px,4.4vw,20px) }
  .hero__ctas .btn{ flex:1 1 100%; }
}

/* ══ JOURNEY ══════════════════════════════════════════════════════════ */
.trip{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,32px);
  border-top:1px solid var(--ink-25); border-bottom:var(--line);
}
.trip li{ padding-block:clamp(16px,2vw,24px); display:grid; gap:6px }
.trip li + li{ border-left:var(--line); padding-left:clamp(14px,2vw,32px) }
.trip .k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-lbl) }
.trip .v{ font-family:var(--serif); font-size:clamp(20px,1.7vw,27px); line-height:1.1 }
.trip li.is-main .v{ color:var(--olive) }

.days{ display:grid }
.day{
  display:grid; grid-template-columns:minmax(150px,20%) minmax(0,1fr);
  gap:clamp(18px,3.6vw,64px);
  padding-block:clamp(26px,3.4vw,48px); border-top:var(--line);
}
.day:first-child{ border-top:1px solid var(--ink-25) }
.day:last-child{ border-bottom:1px solid var(--ink-25) }
.day__side{ display:grid; gap:5px; align-content:start }
.day__n{ font-family:var(--serif); font-size:clamp(26px,2.6vw,40px); line-height:1; letter-spacing:-.02em }
.day__date{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-lbl);
  display:flex; flex-wrap:wrap; gap:0 6px;
}
.day__date i{ font-style:normal; color:var(--ink-25) }
.day__body{ display:grid; gap:clamp(10px,1.2vw,16px); align-content:start; min-width:0 }
.day__title{ font-family:var(--serif); font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.018em; text-wrap:balance }
.day__text{ font-size:var(--fs-body); line-height:1.62; color:var(--ink-80); max-width:48ch }
.day__points{ display:grid; gap:5px; max-width:48ch }
.day__points li{ display:flex; gap:12px; font-size:var(--fs-small); line-height:1.55; color:var(--ink-80) }
.day__points li::before{ content:""; flex:0 0 auto; width:12px; height:1px; background:var(--clay); margin-top:11px }
.day--quiet{ background:linear-gradient(180deg,rgba(76,85,57,.05),rgba(76,85,57,0)) }
.day--quiet .day__n{ color:var(--olive) }
.day--field .day__n{ color:var(--clay) }

.lbd{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,72px); align-items:start }
.lbd__items{ display:flex; flex-wrap:wrap; gap:8px }
.lbd__items li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-60); border:1px solid var(--ink-12); padding:8px 12px;
}
@media (max-width:860px){
  .day{ grid-template-columns:minmax(0,1fr); gap:12px }
  .day__side{ display:flex; align-items:baseline; gap:14px }
  .day__n{ font-size:clamp(24px,7vw,32px) }
  .lbd{ grid-template-columns:minmax(0,1fr) }
  .trip{ grid-template-columns:minmax(0,1fr) }
  .trip li + li{ border-left:0; border-top:var(--line); padding-left:0 }
}

/* ══ MONEMVASIA ═══════════════════════════════════════════════════════ */
.place-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(26px,4vw,72px); align-items:start }
.place-quote{
  font-family:var(--serif); font-size:clamp(21px,2vw,30px); line-height:1.25;
  border-top:1px solid var(--ink-25); padding-top:18px; margin-top:22px; color:var(--olive);
}
.env{ display:flex; flex-wrap:wrap; gap:7px 0; margin-top:14px }
.env li{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60) }
.env li:not(:last-child)::after{ content:"/"; margin:0 .6em; color:var(--ink-25) }
.stayfood{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,72px) }
.block__title{ display:flex; align-items:baseline; gap:12px; margin-bottom:clamp(14px,1.8vw,22px) }
@media (max-width:860px){
  .place-grid{ grid-template-columns:minmax(0,1fr) }
  .stayfood{ grid-template-columns:minmax(0,1fr) }
}

/* ══ PRACTICAL ════════════════════════════════════════════════════════ */
.tabs{
  display:flex; gap:2px; border-bottom:var(--line); overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  /* a soft right edge says "there is more" when the strip scrolls */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
}
@media (min-width:900px){ .tabs{ -webkit-mask-image:none; mask-image:none } }
.tabs::-webkit-scrollbar{ display:none }
.tab{
  flex:0 0 auto; min-height:50px; padding:14px 18px;
  font-size:14px; font-weight:450; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-60); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.tab:hover{ color:var(--ink) }
.tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--clay) }
.panel{ padding-top:clamp(22px,3vw,40px) }
.panel__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.4vw,60px); align-items:start }
.pblock{ display:grid; gap:12px; align-content:start }
.pblock__title{ display:flex; align-items:baseline; gap:10px }
.pblock p{ font-size:var(--fs-small); line-height:1.62; color:var(--ink-80); max-width:46ch }
.pnote{
  margin-top:clamp(18px,2.4vw,28px); border-top:var(--line); padding-top:14px;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-lbl); max-width:66ch;
}
.common{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,60px) }
@media (max-width:860px){
  .panel__grid,.common{ grid-template-columns:minmax(0,1fr) }
  .tabs{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad) }
  .tab:first-child{ padding-left:0 }
}

/* ══ PARTNERS ═════════════════════════════════════════════════════════ */
.partners{ position:relative }
.partner{
  display:grid; grid-template-columns:minmax(120px,16%) minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(16px,2.6vw,48px); align-items:start;
  padding-block:clamp(24px,3vw,42px); border-top:var(--line);
}
.partner:first-child{ border-top:1px solid var(--ink-25) }
.partner:last-child{ border-bottom:1px solid var(--ink-25) }
.partner__country{ display:grid; gap:6px; align-content:start }
.partner__c{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-lbl) }
.partner__role{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-lbl) }
.partner--host .partner__role{ color:var(--clay-text) }
.partner__name{ font-family:var(--serif); font-size:clamp(21px,1.9vw,30px); line-height:1.1; letter-spacing:-.015em }
.partner__logo{
  margin-top:14px; width:clamp(110px,11vw,150px); min-height:46px; padding:8px;
  border:1px dashed var(--ink-25); display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-25);
}
.partner__logo.filled{ border:0; padding:0; display:block }
.partner__logo img{ filter:grayscale(1); opacity:.85 }
.partner__data{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(12px,1.6vw,26px) }
.partner__data div{ border-top:1px solid var(--ink-06); padding-top:10px }
.partner__data dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-lbl); margin-bottom:4px }
.partner__data dd{ font-size:var(--fs-small); line-height:1.55 }
.partner__data dd.tbc{ color:var(--ink-25); font-family:var(--mono); font-size:11px; letter-spacing:.28em }
.partner__data a{ border-bottom:1px solid var(--ink-25) }
.partner__data a:hover{ border-color:var(--clay); color:var(--clay) }
@media (max-width:860px){
  .partner{ grid-template-columns:minmax(0,1fr); gap:14px }
  .partner__country{ display:flex; align-items:baseline; gap:12px }
  .partner__data{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:480px){ .partner__data{ grid-template-columns:minmax(0,1fr) } }

/* ══ APPLY ════════════════════════════════════════════════════════════ */
.apply-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:clamp(28px,4vw,72px); align-items:start }
.apply-side{ display:grid; gap:18px; border-left:1px solid var(--night-14); padding-left:clamp(20px,2.4vw,34px) }
.apply-side .k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase; color:var(--night-lbl); display:block; margin-bottom:5px }
.apply-side .v{ font-size:var(--fs-small); line-height:1.6 }

.form{ display:grid; gap:clamp(26px,3vw,42px) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
/* without JavaScript the controls are never built, so the form would only
   swallow what someone typed. The noscript notice above says what to do. */
html:not(.js) .form{ display:none }
.fs{ border:0; padding:0; margin:0; display:block; min-width:0 }
.fs > * + *{ margin-top:clamp(16px,2vw,26px) }
.fs legend{
  padding:0 0 12px; margin-bottom:clamp(18px,2vw,26px); width:100%;
  border-bottom:1px solid var(--night-14);
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase; color:var(--night-lbl);
}
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,32px) }
.field{ display:grid; gap:8px; min-width:0 }
/* only the real field labels, not the labels that wrap a choice control */
.field > label{ font-size:15px; font-weight:450; letter-spacing:.01em; color:var(--night-ink); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap }
.field input,.field textarea,.field select{
  width:100%; background:rgba(255,255,255,.03); color:var(--night-ink);
  border:1px solid var(--night-line); border-radius:2px;
  font-family:var(--sans); font-size:16px; line-height:1.5;
  padding:14px 14px; min-height:54px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
  appearance:none;
}
.field textarea{ resize:vertical; min-height:112px }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--night-60) 50%),linear-gradient(135deg,var(--night-60) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:44px; cursor:pointer;
}
.field select option{ background:var(--night-2); color:var(--night-ink) }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--night-60) }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-color:var(--clay); background:rgba(255,255,255,.05) }
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }
.field .hint{ font-size:14.5px; line-height:1.55; color:var(--night-lbl) }
.field.invalid input,.field.invalid textarea,.field.invalid select{ border-color:#C2725F }
.err{ display:none; font-size:14px; color:#E09A85 }
.field.invalid .err,.consent.invalid .err{ display:block }
.routing{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; border-top:1px solid var(--night-14); padding-top:14px }
.routing b{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.5vw,23px); color:var(--clay-night) }
.consent{ display:grid; gap:8px; border-top:1px solid var(--night-14); padding-top:clamp(16px,2vw,24px) }
.check{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; padding:4px 0; min-height:44px }
.check input{ position:absolute; opacity:0; width:1px; height:1px }
.check__box{
  flex:0 0 auto; width:20px; height:20px; margin-top:2px; border:1px solid var(--night-60); border-radius:2px;
  display:grid; place-items:center; transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.check__box::after{
  content:""; width:9px; height:5px; border-left:1.5px solid var(--night); border-bottom:1.5px solid var(--night);
  transform:rotate(-45deg) scale(.5); opacity:0; transition:opacity .18s var(--ease), transform .2s var(--ease);
}
.check input:checked + .check__box{ background:var(--night-ink); border-color:var(--night-ink) }
.check input:checked + .check__box::after{ opacity:1; transform:rotate(-45deg) scale(1) }
.check input:focus-visible + .check__box{ outline:2px solid var(--clay); outline-offset:3px }
.check__txt{ font-size:var(--fs-small); line-height:1.55; color:var(--night-60); max-width:46ch }
.submitrow{ display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center }
.submitrow .btn{ min-width:230px }
.formstate{ font-size:14.5px; line-height:1.55; color:var(--night-lbl); max-width:40ch }
.formstate.error{ color:#E09A85 }

.received{ display:grid; gap:clamp(14px,2vw,22px); max-width:720px }
.received__title{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.2vw,46px); line-height:1.06; letter-spacing:-.02em }
.received__title:focus{ outline:none }
.received__lead{ font-family:var(--serif); font-size:var(--fs-lead); line-height:1.4; max-width:34ch }
.received__dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(14px,2vw,28px); margin-top:6px }
.received__dl div{ border-top:1px solid var(--night-14); padding-top:12px }
.received__dl dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--night-lbl); margin-bottom:5px }
.received__dl dd{ font-size:var(--fs-small); line-height:1.5 }
.received__note{ font-size:14.5px; line-height:1.6; color:var(--night-60); max-width:50ch }
.privacy{ border-top:1px solid var(--night-14); padding-top:clamp(18px,2.4vw,28px) }
.privacy p{ font-size:var(--fs-small); line-height:1.6; color:var(--night-60); max-width:52ch }
.privacy__dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(12px,2vw,26px); margin-top:16px }
.privacy__dl div{ border-top:1px solid var(--night-14); padding-top:10px }
.privacy__dl dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--night-lbl); margin-bottom:4px }
.privacy__dl dd{ font-size:14.5px; line-height:1.5; color:var(--night-60) }
.privacy__dl dd.tbc{ color:var(--night-lbl); font-family:var(--mono); font-size:11px; letter-spacing:.24em }
.privacy__dl dd a{ border-bottom:1px solid var(--night-30) }
@media (max-width:900px){
  .apply-grid{ grid-template-columns:minmax(0,1fr) }
  .apply-side{ border-left:0; border-top:1px solid var(--night-14); padding-left:0; padding-top:20px }
}
@media (max-width:720px){
  .grid2{ grid-template-columns:minmax(0,1fr) }
  .submitrow .btn{ width:100%; min-width:0 }
}

/* value block without a repeated label (documents to keep) */
.vblock{ margin-top:12px; border-top:1px solid var(--ink-06); padding-top:12px; font-size:var(--fs-small); line-height:1.6 }
.vblock li{ padding:2px 0 }
.vblock.tbc{ color:var(--ink-25); font-family:var(--mono); font-size:11px; letter-spacing:.28em }/* on the application page itself the header APPLY is redundant */
/* the header must not shift between pages, so on the apply page the button
   keeps its space on desktop and simply disappears where space is tight */
@media (min-width:1000px){
  body[data-page="apply"] .head-apply{ visibility:hidden; pointer-events:none }
}
@media (max-width:999px){
  body[data-page="apply"] .head-apply{ display:none }
}

/* the home lead: what you will actually do, before any interface */
.hero__lead{
  font-family:var(--serif); font-size:var(--fs-lead); line-height:1.42;
  max-width:38ch; margin-bottom:clamp(18px,2vw,26px); color:var(--ink-80);
}
/* a way out of Practical Info towards the pages that answer the rest */
.crosslink{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px); margin-top:clamp(26px,3.4vw,44px);
}
@media (max-width:720px){ .crosslink{ grid-template-columns:minmax(0,1fr) } }

/* which country the panel is showing */
.panel__for{
  display:flex; flex-wrap:wrap; gap:6px; align-items:baseline;
  font-family:var(--serif); font-size:clamp(19px,1.6vw,25px); line-height:1.2;
  border-bottom:var(--line); padding-bottom:14px; margin-bottom:clamp(18px,2.4vw,30px);
}
.panel__for span{ color:var(--ink-45) }
.panel__for a{ color:var(--clay-text); border-bottom:1px solid var(--ink-25) }
.panel__for a:hover{ border-color:var(--clay-text) }

/* the nine days use the full width on a wide screen */
@media (min-width:1000px){
  .day{ grid-template-columns:minmax(140px,15%) minmax(0,1.15fr) minmax(0,.85fr) }
  .day__date{ flex-direction:column; gap:3px }
  .day__date i{ display:none }
  .day__body{ display:contents }
  .day__prose{ display:grid; gap:clamp(10px,1.2vw,16px); align-content:start; min-width:0 }
  .day__extra{ display:grid; gap:14px; align-content:start; min-width:0; padding-top:6px }
  .day__text{ max-width:46ch }
  .day__points{ max-width:none }
}
@media (max-width:999px){
  .day__body{ display:grid; gap:clamp(12px,1.4vw,18px) }
  .day__prose{ display:grid; gap:clamp(10px,1.2vw,16px) }
  .day__extra{ display:grid; gap:14px }
}
.day__figure .figure__frame{ aspect-ratio:4/3 }
.countries li a{ display:inline-block; padding-block:10px; border-bottom:1px solid var(--ink-12) }
.countries li a:hover{ border-color:var(--clay-text); color:var(--clay-text) }
@media (max-width:560px){
  /* the dot separators would strand at a line end, so the gap does the work */
  .hero__facts{ gap:4px 18px }
  .hero__facts span{ display:none }
}

/* ══ GALLERY ══════════════════════════════════════════════════════════
   Full-bleed horizontal strip: native scrolling (so a phone gets its own
   momentum), pointer drag on desktop, and a slow drift that stops the
   moment anyone touches it. Images keep their own proportions and are
   never cropped: the height is fixed, the width follows the photograph. */
.gallery-wrap{ margin-top:clamp(22px,3vw,36px) }
.gallery{ position:relative; --gh:clamp(230px,30vw,430px) }
.gallery__track{
  display:flex; gap:clamp(10px,1.4vw,18px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.gallery__track::-webkit-scrollbar{ display:none }
.gallery.is-dragging .gallery__track{ cursor:grabbing; scroll-behavior:auto }
.gallery__item{
  flex:0 0 auto; margin:0;
  height:var(--gh);
  width:calc(var(--gh) * 1.5);      /* replaced by the photo's own ratio on load */
  background:var(--paper-2); overflow:hidden;
}
.gallery__item img{
  height:100%; width:100%; display:block;
  object-fit:cover; user-select:none; -webkit-user-drag:none;
}
.gallery__bar{
  display:flex; align-items:center; gap:16px;
  max-width:var(--maxw); margin-inline:auto; padding:14px var(--pad) 0;
}
.gallery__hint{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-lbl); flex:0 0 auto;
}
.gallery__rail{ position:relative; flex:1 1 auto; height:1px; background:var(--ink-12) }
.gallery__rail i{
  position:absolute; left:0; top:-1px; height:3px; width:20%;
  background:var(--clay); transition:left .15s linear, width .2s var(--ease);
}
@media (max-width:720px){
  .gallery{ --gh:clamp(220px,54vw,290px) }
  .gallery__hint{ font-size:11px }
}

/* ══ PRACTICAL: the three things a traveller must not miss ════════════ */
.timecards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin:clamp(16px,2vw,24px) 0 }
.timecard{
  border:1px solid var(--ink-25); padding:clamp(14px,1.8vw,20px);
  display:grid; gap:5px; align-content:start;
}
.timecard .k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-lbl) }
.timecard .v{
  font-family:var(--serif); font-size:clamp(26px,2.6vw,38px); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums;
}
.timecard .v b{ font-weight:400; color:var(--clay-text) }
.timecard .d{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-60) }
@media (max-width:560px){ .timecards{ grid-template-columns:minmax(0,1fr) } }

.calc{ margin:clamp(14px,2vw,22px) 0 0; border-top:1px solid var(--ink-25) }
.calc div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--ink-06);
}
.calc .k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-lbl) }
.calc .v{
  font-family:var(--serif); font-size:clamp(21px,1.8vw,27px); line-height:1;
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap;
}
.calc .is-result{ border-bottom:1px solid var(--ink-25); border-top:1px solid var(--ink-25); margin-top:-1px }
.calc .is-result .k{ color:var(--ink) }
.calc .is-result .v{ font-size:clamp(25px,2.2vw,33px); color:var(--clay-text) }
.calc .is-minus .v{ color:var(--ink-60) }

.factline{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px;
  border-top:1px solid var(--ink-25); border-bottom:1px solid var(--ink-25);
  padding:clamp(13px,1.6vw,18px) 0; margin:clamp(14px,2vw,22px) 0;
}
.factline .k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-lbl) }
.factline .v{ font-family:var(--serif); font-size:clamp(22px,2vw,26px); line-height:1.1; font-variant-numeric:lining-nums }
.factline .s{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-60) }

.warn{
  display:flex; gap:12px; align-items:baseline;
  border-left:2px solid var(--clay); padding:12px 0 12px 16px;
  margin-top:clamp(14px,1.8vw,20px);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--clay-text); max-width:46ch;
}

/* ══ PARTNERS: only the channels that exist ═══════════════════════════ */
.chan{ display:grid; gap:2px }
.chan a{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-top:1px solid var(--ink-06);
  font-size:var(--fs-small); line-height:1.4;
  transition:color .2s var(--ease);
  overflow-wrap:anywhere;
}
.chan a:first-child{ border-top:0 }
.chan a:hover{ color:var(--clay-text) }
.chan svg{ flex:0 0 auto; width:17px; height:17px; color:var(--ink-lbl); transition:color .2s var(--ease) }
.chan a:hover svg{ color:var(--clay-text) }
.chan .lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-lbl); flex:0 0 auto; min-width:76px;
}
/* on a phone the label leaves the screen but stays in the accessible name */
@media (max-width:560px){
  .chan .lbl{ position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
}

/* logos with a white background disappear into the paper */
.partner__logo img,.foot-logos img{ mix-blend-mode:multiply }

/* ══ FOOTER: the funding identity ═════════════════════════════════════ */
.foot-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2vw,28px) }
.foot-logos figure{ margin:0; background:#fff; padding:10px 14px; display:grid; place-items:center }
.foot-logos img{ height:clamp(30px,3.4vw,44px); width:auto; display:block }
body.night .foot-logos img{ mix-blend-mode:normal }

/* the country panel: travel on one side, money and papers on the other */
.panel__cols{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,3.4vw,64px); align-items:start }
.panel__col{ display:grid; gap:clamp(26px,3.2vw,44px); align-content:start }
.pblock__sub{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--clay-text); font-weight:400; margin-top:clamp(14px,1.8vw,22px);
}
.pblock__sub + p{ margin-top:8px }
.calc__note{ margin-top:14px; font-size:14.5px; line-height:1.6; color:var(--ink-60); max-width:44ch }
@media (max-width:860px){ .panel__cols{ grid-template-columns:minmax(0,1fr) } }

/* what Erasmus+ covers */
.covers{ display:grid; gap:2px; margin-top:12px }
.covers li{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 0; border-top:1px solid var(--ink-06);
  font-size:var(--fs-small); line-height:1.5;
}
.covers li::before{ content:""; flex:0 0 auto; width:12px; height:1px; background:var(--clay); margin-top:11px }
.covers__note{
  margin-top:14px; border-top:1px solid var(--ink-25); padding-top:12px;
  font-size:var(--fs-small); line-height:1.6; color:var(--ink-80); max-width:46ch;
}

/* ══ APPLICATION FORM CONTROLS ════════════════════════════════════════
   Everything below lives only on the dark apply page. The controls are
   real inputs with custom marks, so keyboard and screen readers work. */
.fs__intro{ font-size:var(--fs-small); line-height:1.6; color:var(--night-60); max-width:52ch; margin-bottom:clamp(16px,2vw,24px) }
.field__label{
  display:block; font-size:15px; font-weight:450; color:var(--night-ink); margin-bottom:4px;
}

/* single choice: gender, hands-on, Erasmus+ */
.picks{ display:grid; gap:2px; margin-top:10px }
.picks--row{ grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:8px }
.pick{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer;
  padding:14px 16px; min-height:52px;
  border:1px solid var(--night-14); border-radius:2px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.pick:hover{ border-color:var(--night-30) }
.pick input{ position:absolute; opacity:0; width:1px; height:1px }
.pick__dot{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%;
  border:1px solid var(--night-line); display:grid; place-items:center;
  transition:border-color .2s var(--ease);
}
.pick__dot::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--clay);
  transform:scale(0); transition:transform .18s var(--ease);
}
.pick input:checked ~ .pick__dot{ border-color:var(--clay) }
.pick input:checked ~ .pick__dot::after{ transform:scale(1) }
.pick:has(input:checked){ border-color:var(--clay); background:rgba(154,104,66,.10) }
.pick input:focus-visible ~ .pick__dot{ outline:2px solid var(--clay); outline-offset:3px }
.pick__txt{ font-size:15px; line-height:1.45; color:var(--night-ink) }

/* country: flags */
.flags{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:10px }
.flag{
  position:relative; display:grid; gap:9px; justify-items:center; text-align:center;
  cursor:pointer; padding:16px 10px 14px; min-height:96px;
  border:1px solid var(--night-14); border-radius:2px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.flag:hover{ border-color:var(--night-30) }
.flag input{ position:absolute; opacity:0; width:1px; height:1px }
.flag svg{ width:38px; height:26px; display:block; box-shadow:0 0 0 1px rgba(240,233,220,.18) }
.flag__n{ font-size:14px; line-height:1.25; color:var(--night-60); transition:color .2s var(--ease) }
.flag:has(input:checked){ border-color:var(--clay); background:rgba(154,104,66,.12) }
.flag:has(input:checked) .flag__n{ color:var(--night-ink) }
.flag__tick{
  position:absolute; top:8px; right:8px; width:16px; height:16px; border-radius:50%;
  background:var(--clay); display:grid; place-items:center;
  opacity:0; transform:scale(.6); transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.flag__tick::after{
  content:""; width:7px; height:4px; margin-top:-2px;
  border-left:1.5px solid var(--night); border-bottom:1.5px solid var(--night);
  transform:rotate(-45deg);
}
.flag:has(input:checked) .flag__tick{ opacity:1; transform:scale(1) }
.flag:has(input:focus-visible){ outline:2px solid var(--clay); outline-offset:3px }

/* long checkbox list: your situation */
.optlist{ display:grid; margin-top:12px; border-top:1px solid var(--night-14) }
.opt{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:start;
  cursor:pointer; padding:14px 4px; border-bottom:1px solid var(--night-14);
  transition:background-color .2s var(--ease);
}
.opt:hover{ background:rgba(255,255,255,.03) }
.opt input{ position:absolute; opacity:0; width:1px; height:1px }
.opt__box{
  grid-row:1 / span 2; flex:0 0 auto; width:20px; height:20px; margin-top:2px;
  border:1px solid var(--night-line); border-radius:2px; display:grid; place-items:center;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.opt__box::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:1.6px solid var(--night); border-bottom:1.6px solid var(--night);
  transform:rotate(-45deg) scale(.5); opacity:0;
  transition:opacity .16s var(--ease), transform .18s var(--ease);
}
.opt input:checked ~ .opt__box{ background:var(--clay); border-color:var(--clay) }
.opt input:checked ~ .opt__box::after{ opacity:1; transform:rotate(-45deg) scale(1) }
.opt input:focus-visible ~ .opt__box{ outline:2px solid var(--clay); outline-offset:3px }
.opt__t{ font-size:15.5px; line-height:1.35; color:var(--night-ink) }
.opt__d{ grid-column:2; font-size:13.5px; line-height:1.5; color:var(--night-lbl); max-width:56ch }
.opt:has(input:checked) .opt__t{ color:var(--clay-night) }

/* tiles: what interests you */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:8px; margin-top:12px }
.tile{
  position:relative; display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:15px 16px; min-height:56px;
  border:1px solid var(--night-14); border-radius:2px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.tile:hover{ border-color:var(--night-30) }
.tile input{ position:absolute; opacity:0; width:1px; height:1px }
.tile__box{
  flex:0 0 auto; width:18px; height:18px; border:1px solid var(--night-line); border-radius:2px;
  display:grid; place-items:center; transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.tile__box::after{
  content:""; width:8px; height:4px; margin-top:-2px;
  border-left:1.5px solid var(--night); border-bottom:1.5px solid var(--night);
  transform:rotate(-45deg) scale(.5); opacity:0; transition:opacity .16s var(--ease), transform .18s var(--ease);
}
.tile input:checked ~ .tile__box{ background:var(--clay); border-color:var(--clay) }
.tile input:checked ~ .tile__box::after{ opacity:1; transform:rotate(-45deg) scale(1) }
.tile input:focus-visible ~ .tile__box{ outline:2px solid var(--clay); outline-offset:3px }
.tile:has(input:checked){ border-color:var(--clay); background:rgba(154,104,66,.10) }
.tile__txt{ font-size:14.5px; line-height:1.35 }

/* the note under the motivation field */
.ownwords{
  border-left:2px solid var(--clay); padding:2px 0 2px 16px; margin-top:clamp(16px,2vw,22px);
  max-width:56ch;
}
.ownwords__t{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--clay-night) }
.ownwords__d{ font-size:14px; line-height:1.6; color:var(--night-60); margin-top:7px }

/* the three final confirmations */
/* ── privacy on the form ─────────────────────────────────────────────────
   A short note where sensitive answers are offered, and the full explanation
   folded away above the confirmations. Both use the page's own idiom: a
   hairline, a mono label, quiet text. Neither is a warning box.          */
.privnote{
  border-top:1px solid var(--night-14); padding-top:14px;
  margin-bottom:clamp(16px,2vw,24px);
  display:grid; gap:8px; max-width:58ch;
}
.privnote__h{
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.13em; text-transform:uppercase; color:var(--clay-night);
}
.privnote__p{ font-size:14.5px; line-height:1.6; color:var(--night-60) }

/* the accordion borrows the FAQ's shape, on the dark ground */
.privpanel{ margin:2px 0 clamp(18px,2.4vw,26px) }
/* the first confirmation below already draws a hairline; one is enough */
body.night .privqa{ border-top-color:var(--night-14) }
body.night .privqa .qa__q{ color:var(--night-ink) }
.privqa .qa__q{ font-size:clamp(17px,1.2vw,20px) }
body.night .privqa .qa__btn:hover .qa__q{ color:var(--clay-night) }
body.night .privqa .qa__sign{ color:var(--night-60) }
body.night .privqa[data-open="true"] .qa__sign{ color:var(--clay-night) }
body.night .privqa .qa__inner p{ color:var(--night-60) }
body.night .privqa .qa__inner a{ color:var(--night-ink); border-bottom:1px solid var(--night-line) }
body.night .privqa .qa__inner a:hover{ color:var(--clay-night); border-color:var(--clay-night) }
.privqa__h{
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.12em; text-transform:uppercase; color:var(--clay-night);
  margin-top:.55em;
}
.privqa__h:first-child{ margin-top:0 }
/* a long address must never push the panel sideways */
.privqa__mail{ overflow-wrap:anywhere }

/* the data consent is two paragraphs now */
.check__p{ display:block }
.check__p + .check__p{ margin-top:.7em }

@media (max-width:560px){
  .privqa .qa__q{ font-size:16.5px }
  .privqa .qa__btn{ min-height:56px; padding:14px 0 }
  .privnote__p{ font-size:14px }
}

.confirms{ display:grid; gap:4px; margin-top:6px }
.confirms .check{ align-items:flex-start; padding:10px 0 }
.confirms .check__txt{ font-size:var(--fs-small); max-width:60ch }
/* the second half of the data consent: same voice, outside the tap area */
.check__more{
  margin:8px 0 0 34px; max-width:60ch;
  font-size:var(--fs-small); line-height:1.55; color:var(--night-60);
}

/* fieldsets get real separation now that the form is long */
.form .fs{ border-top:1px solid var(--night-14); padding-top:clamp(24px,3vw,38px) }
.form .fs:first-of-type{ border-top:0; padding-top:0 }
.form .fs legend{ border-bottom:0; padding-bottom:0; margin-bottom:clamp(16px,2vw,22px); color:var(--clay-night) }

@media (max-width:720px){
  .flags{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .picks--row{ grid-template-columns:minmax(0,1fr) }
  .tiles{ grid-template-columns:minmax(0,1fr) }
  .opt__d{ font-size:13px }
  .flag{ min-height:88px }
}
.received__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px }
@media (max-width:560px){ .received__actions .btn{ width:100% } }
/* the legend already carries the gap below it */
.form .fs legend + *{ margin-top:0 }

/* ══ FAQ ══════════════════════════════════════════════════════════════
   Same editorial language as the rest: hairlines, mono labels, serif
   questions. No cards, no heavy borders. */
.faq-tools{
  display:grid; gap:clamp(12px,1.6vw,20px);
  border-top:1px solid var(--ink-25); border-bottom:var(--line);
  padding-block:clamp(12px,1.6vw,20px);
}
.faq-search{
  display:flex; align-items:center; gap:11px; max-width:380px;
  border-bottom:1px solid var(--ink-25);
  transition:border-color .2s var(--ease);
}
.faq-search:focus-within{ border-bottom-color:var(--clay) }
.faq-search svg{ width:17px; height:17px; flex:0 0 auto; color:var(--ink-lbl) }
.faq-search input{
  flex:1 1 auto; min-width:0; min-height:46px; padding:10px 0;
  border:0; background:transparent; color:var(--ink);
  font-family:var(--sans); font-size:max(16px, var(--fs-small));
  appearance:none;
}
.faq-search input:focus{ outline:0 }
.faq-search input::-webkit-search-cancel-button{ display:none }
.faq-search input::placeholder{ color:var(--ink-lbl) }
.faq-search__clear{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  color:var(--ink-lbl); font-size:18px; line-height:1;
}
.faq-search__clear:hover{ color:var(--ink) }

.tab:focus-visible,
.chip:focus-visible{ outline-offset:-2px }
.chips{
  display:flex; flex-wrap:wrap; gap:6px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.chips::-webkit-scrollbar{ display:none }
.chip{
  flex:0 0 auto; min-height:44px; padding:12px 14px;
  border:1px solid var(--ink-12); background:transparent;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-lbl); white-space:nowrap;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.chip:hover{ border-color:var(--ink-25); color:var(--ink) }
.chip[aria-pressed="true"]{ border-color:var(--ink); color:var(--ink); background:var(--ink-06) }

.faq-cat + .faq-cat{ margin-top:clamp(34px,4.2vw,62px) }
.faq-cat__h{ margin-bottom:clamp(10px,1.4vw,16px) }
.faq-cat__list{ border-bottom:1px solid var(--ink-12); max-width:78ch }
.qa{ border-top:1px solid var(--ink-12) }
.qa__h{ margin:0 }
.qa__btn{
  width:100%; display:flex; gap:clamp(16px,3vw,44px); align-items:flex-start;
  justify-content:space-between; text-align:left;
  padding:clamp(15px,1.8vw,21px) 0; min-height:62px;
}
.qa__q{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(18px,1.4vw,22px); line-height:1.3; letter-spacing:-.01em;
  transition:color .2s var(--ease);
}
.qa__btn:hover .qa__q{ color:var(--clay-text) }
.qa__sign{
  position:relative; flex:0 0 auto; width:14px; height:14px; margin-top:7px;
  color:var(--ink-45); transition:color .2s var(--ease);
}
.qa__sign::before,.qa__sign::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:currentColor; transition:transform .3s var(--ease);
}
.qa__sign::after{ transform:rotate(90deg) }
.qa[data-open="true"] .qa__sign{ color:var(--clay) }
.qa[data-open="true"] .qa__sign::after{ transform:rotate(0) }
.qa__panel{ overflow:hidden; height:0; visibility:hidden;
  transition:height .3s var(--ease), visibility 0s .3s }
.qa[data-open="true"] .qa__panel{ visibility:visible; transition:height .3s var(--ease), visibility 0s }
.qa__inner{ padding-bottom:clamp(18px,2.2vw,28px); max-width:62ch; display:grid; gap:.85em }
.qa__inner p{ font-size:var(--fs-small); line-height:1.65; color:var(--ink-80) }
.qa__inner a{ border-bottom:1px solid var(--ink-25) }
.qa__inner a:hover{ color:var(--clay-text); border-color:var(--clay-text) }
.qa__list{ display:grid; gap:5px }
.qa__list li{ display:flex; gap:12px; font-size:var(--fs-small); line-height:1.6; color:var(--ink-80) }
.qa__list li::before{ content:""; flex:0 0 auto; width:11px; height:1px; background:var(--clay); margin-top:13px }
.faq-empty{
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-lbl); padding-block:clamp(24px,4vw,48px);
}

@media (max-width:860px){
  .faq-search{ max-width:none }
  .chips{
    flex-wrap:nowrap; overflow-x:auto;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent);
  }
}
@media (max-width:720px){
  .qa__btn{ gap:16px; padding:16px 0 }
  .qa__q{ font-size:17.5px }
  .qa__inner{ max-width:none }
}

/* the FAQ lead can breathe a little wider than a page intro */
body[data-page="faq"] .page-head .lead{ max-width:48ch }


/* ── print: a FAQ saved as PDF has to carry its answers ─────────────── */
@media print{
  .faq-tools{ display:none }
  .qa__panel{ height:auto !important; visibility:visible !important; overflow:visible }
  .qa__sign{ display:none }
  .qa{ break-inside:avoid }
  .gallery__bar{ display:none }
}