/* ==========================================================================
   Grafico — Contact (/kontakt/). Phase 8, docs/rebuild/37-CONTACT-PHASE8.md.
   Same universe as the homepage and Studio: NIGHT / IVORY / CRIMSON, Satoshi, Newsreader Italic only next to a
   person. One composition: a night column with the invitation and the direct address, and the form as a flat
   ivory plane that bleeds off the right edge. No cards, no glass, no decoration. Tokens, reset, header, footer and
   .btn-primary live in base.css.
   ========================================================================== */
@layer sections {
.ct{background:var(--night);color:var(--ivory);line-height:1.15}
.ct p{line-height:1.55}
.ct-wrap{width:var(--container);margin-inline:auto}

/* ---------- 1. intro + form ---------- */
.ct-intro{position:relative;overflow:clip;background:var(--night);color:var(--ivory)}
.ct-copy{padding:clamp(2.5rem,8vw,4.5rem) 0 clamp(2.5rem,6vw,3.25rem)}
.ct h1{font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2.25rem,9.4vw,3.5rem);text-wrap:balance}
.ct-lead{margin-top:1.25rem;max-width:44ch;font-size:var(--fs-lead);color:rgba(242,239,230,.8);text-wrap:pretty}
.ct-direct{margin-top:2.25rem}
.ct-direct-label{font-size:var(--fs-meta);color:var(--smoke)}
.ct-mail{display:inline-block;margin-top:.5rem;font-weight:700;font-size:clamp(1.25rem,5.8vw,2rem);letter-spacing:-.015em;line-height:1.2;color:var(--ivory);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;overflow-wrap:anywhere;transition:text-decoration-thickness var(--dur-fast) var(--ease)}
.ct-mail:hover{text-decoration-thickness:3px}
.ct-direct-actions{margin-top:.25rem}
.ct-copybtn{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;color:var(--ivory);font:700 var(--fs-meta)/1.2 var(--font-core);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.ct-copybtn:hover,.ct-copybtn:focus-visible{text-decoration-thickness:2px}
.ct-copybtn[hidden]{display:none}
.ct-remote{margin-top:.5rem;font-size:var(--fs-meta);color:var(--smoke)}

.ct-owner{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--scene-line)}
.ct-owner-label{font-size:var(--fs-meta);color:var(--smoke)}
.ct-owner-view{margin-top:.75rem}
.ct-owner-view[hidden],.ct-owner-none[hidden]{display:none}
.ct-signature{display:block;height:2.5rem;width:auto;color:var(--ivory)}
.ct-owner-name{margin-top:.35rem;font-family:var(--font-human);font-style:italic;font-weight:400;font-size:1.25rem;line-height:1.25}
.ct-owner-none{margin-top:.75rem;font-size:var(--fs-small);color:rgba(242,239,230,.8);max-width:36ch}

/* the plane: flat ivory, bleeds to the screen edge on desktop and is full-bleed on mobile */
.ct-plane{position:relative;background:var(--ivory);color:var(--night);margin-inline:calc(var(--gutter) * -1);padding:clamp(2rem,6vw,3rem) var(--gutter) clamp(2.25rem,6vw,3.5rem)}
.ct-plane::after{content:"";position:absolute;top:0;bottom:0;left:calc(100% - 1px);width:100vw;background:var(--ivory)}
.ct-plane p{line-height:1.5}
.ct-plane h2{font-weight:700;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.5rem,5.6vw,2rem)}
.ct-form-note{margin-top:.5rem;font-size:var(--fs-meta);color:var(--ash)}

/* fields */
.ct-fields{margin-top:1.75rem;display:grid;gap:1.25rem 1.5rem}
.ct-field{display:block}
.ct-field label,.ct-topics legend{display:block;font-weight:700;font-size:var(--fs-small);line-height:1.3;color:var(--night)}
.ct-req{color:var(--crimson);font-weight:700}
.ct-opt{margin-left:.4rem;font-weight:400;font-size:.8125rem;color:var(--ash)}
.ct-field input,.ct-field textarea{display:block;width:100%;min-height:52px;margin-top:.5rem;padding:.8rem .9rem;background:transparent;color:var(--night);border:1.5px solid rgba(13,13,12,.45);border-radius:0;font:400 1rem/1.4 var(--font-core);transition:border-color var(--dur-fast) var(--ease)}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--ash)}
.ct-field input:hover,.ct-field textarea:hover{border-color:var(--night)}
.ct-field input:focus-visible,.ct-field textarea:focus-visible{outline:2px solid var(--night);outline-offset:2px;border-color:var(--night)}
.ct-field textarea{min-height:9.5rem;resize:vertical}
.ct-field--message{margin-top:1.5rem}
.ct-hint{margin-top:.25rem;font-size:var(--fs-meta);color:var(--ash)}
.ct-field [aria-invalid="true"],.ct-check input[aria-invalid="true"]{border-color:var(--crimson);border-width:2px}
.ct-error{margin-top:.4rem;font-size:var(--fs-small);font-weight:700;color:var(--crimson)}
.ct-error[hidden]{display:none}

/* topic chips (radio, native) */
.ct-topics{margin-top:1.5rem;border:0;padding:0;min-width:0}
.ct-chips{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.ct-chip{position:relative;display:block}
.ct-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px}
.ct-chip-text{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem;border:1.5px solid rgba(13,13,12,.45);font-size:var(--fs-small);font-weight:500;line-height:1.2;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ct-chip:hover .ct-chip-text{border-color:var(--night)}
.ct-chip input:checked + .ct-chip-text{background:var(--night);border-color:var(--night);color:var(--ivory);font-weight:700}
.ct-chip input:focus-visible + .ct-chip-text{outline:2px solid var(--night);outline-offset:2px}
.ct-swatch{flex:none;width:.7rem;height:.7rem}
.ct-swatch--internet{background:var(--night);box-shadow:inset 0 0 0 1px rgba(242,239,230,.6)}
.ct-swatch--widocznosc{background:var(--crimson)}
.ct-swatch--design{background:var(--ivory);box-shadow:inset 0 0 0 1px rgba(13,13,12,.5)}
.ct-chip input:checked + .ct-chip-text .ct-swatch--design{box-shadow:inset 0 0 0 1px rgba(242,239,230,.6)}
.ct-topic-note{margin-top:.6rem;font-size:var(--fs-meta);color:var(--ash)}

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.ct-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* consents */
.ct-consents{margin-top:1.5rem;display:grid;gap:.25rem}
.ct-check{display:flex;align-items:flex-start;gap:.75rem;min-height:44px;padding:.35rem 0;cursor:pointer}
.ct-check input{flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--crimson);border:1.5px solid rgba(13,13,12,.45);cursor:pointer}
.ct-check input:focus-visible{outline:2px solid var(--night);outline-offset:2px}
.ct-check-text{font-size:var(--fs-small);line-height:1.5;color:var(--night);max-width:56ch}
.ct-check-text a,.ct-notice a,.ct-closed a,.ct-noscript a{text-decoration:underline;text-underline-offset:3px}
.ct-notice{margin-top:1rem;font-size:var(--fs-meta);color:var(--ash);max-width:60ch}
.ct-dev-note{margin-top:.5rem;font-size:var(--fs-meta);color:var(--ash);border-left:3px solid var(--crimson);padding-left:.75rem;max-width:60ch}

/* error summary, status, submit */
.ct-errors{margin-top:1.25rem;padding:1rem 1.1rem;border:2px solid var(--crimson);color:var(--night)}
.ct-errors[hidden]{display:none}
.ct-errors:focus{outline:2px solid var(--night);outline-offset:2px}
.ct-errors-title{font-weight:700}
.ct-errors ul{margin-top:.5rem;display:grid;gap:.35rem;list-style:none}
.ct-errors a{color:var(--crimson);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ct-turnstile{margin-top:1rem}
.ct-turnstile:empty{display:none}
.ct-submit{margin-top:1.5rem}
.ct-send{--btn-fill:var(--crimson);--btn-edge:var(--crimson);--btn-edge-w:0px;--btn-text:var(--ivory);--btn-fill-hover:var(--night);--btn-text-hover:var(--ivory);--cut:14px;width:100%;min-height:58px;padding:0 48px 0 34px;font-size:17px}
.ct-send[aria-disabled="true"]{cursor:progress;opacity:.72}
.ct-status{margin-top:.75rem;min-height:1.5rem;font-size:var(--fs-small);color:var(--ash)}
.ct-status.is-error{color:var(--crimson);font-weight:700}
.ct-noscript{margin-top:1rem;font-size:var(--fs-small)}

/* accepted */
.ct-success:focus{outline:none}
.ct-success h2{font-size:clamp(1.625rem,5.6vw,2.25rem)}
.ct-plane:has(.ct-success:not([hidden])){align-self:start}
.ct-success p{margin-top:1rem;max-width:46ch}
.ct-success-ref{font-size:var(--fs-small);color:var(--ash)}
.ct-success-ref strong{color:var(--night);letter-spacing:.02em}
.ct-success-links{margin-top:1.5rem}
.ct-plane .link-secondary{color:var(--night)}
.ct-closed p{margin-top:1rem;max-width:44ch}

/* ---------- 2. after sending ---------- */
.ct-after{background:var(--night);color:var(--ivory);padding:clamp(3.5rem,9vw,6rem) 0}
.ct-after-grid{display:grid;gap:2rem}
.ct-after h2{font-weight:700;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.75rem,5.6vw,2.75rem);text-wrap:balance;max-width:16ch}
.ct-steps{list-style:none;border-top:1px solid var(--scene-line)}
.ct-steps li{padding:1.25rem 0;border-bottom:1px solid var(--scene-line);max-width:60ch}
.ct-steps strong{display:block;font-weight:700;font-size:1.125rem;letter-spacing:-.01em}
.ct-steps span{display:block;margin-top:.35rem;color:rgba(242,239,230,.78);line-height:1.55}
.ct-quote{margin-top:2.25rem;max-width:46ch}
.ct-quote-title{font-weight:700;font-size:1.125rem}
.ct-quote p + p{margin-top:.5rem;color:rgba(242,239,230,.78)}
.ct-link{display:inline-block;margin-top:1rem;font-weight:700;color:var(--ivory);border-bottom:1px solid currentColor;padding-bottom:.15rem;min-height:24px;transition:border-color var(--dur-fast) var(--ease)}
.ct-link:hover,.ct-link:focus-visible{border-bottom-width:2px}

/* ---------- breakpoints ---------- */
@media (min-width:36rem){
  .ct-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-send{width:auto;min-width:16rem}
}
@media (min-width:64rem){
  .ct-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-24)}
  .ct-copy{grid-column:1 / 6;padding:clamp(4rem,9vh,6.5rem) 0 clamp(3rem,7vh,5rem)}
  .ct-plane{grid-column:7 / 13;margin-inline:0;padding:clamp(3rem,8vh,5rem) clamp(1.5rem,3vw,3rem) clamp(3rem,7vh,4.5rem) clamp(1.75rem,3.2vw,3.5rem)}
  .ct h1{font-size:clamp(2.75rem,4.3vw,4.25rem)}
  .ct-mail{font-size:clamp(1.375rem,2.1vw,2rem)}
  .ct-after-grid{grid-template-columns:5fr 7fr;column-gap:var(--sp-24);align-items:start}
  .ct-after h2{position:sticky;top:calc(var(--header-h) + 2rem)}
  .ct-after-body{grid-column:2}
}
@media (max-width:63.99rem){
  .ct-plane::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ct *,.ct *::before,.ct *::after{transition:none!important}
}
}