/* Viviane Dias · Contact V5 — editorial correspondence, page-scoped */
body.page-contact::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("../textures/film-grain-1024.png?v=v5-1"); background-size:320px; opacity:.035;
}
body.page-contact > main,body.page-contact > footer{position:relative;z-index:1}

.c-contact{padding:clamp(2.6rem,5vw,5.4rem) 0 clamp(4rem,8vw,7.5rem)}
.c-contact__grid{
  display:grid; grid-template-columns:minmax(17rem,.68fr) minmax(32rem,1.32fr);
  gap:clamp(3rem,7vw,7.5rem); align-items:start;
}
.c-intro{position:sticky;top:9.6rem;padding-top:.45rem}
.c-intro h1{max-width:9.5ch;font-size:clamp(3.15rem,5.6vw,5.7rem);line-height:.94;letter-spacing:-.025em;text-wrap:balance}
.c-intro__lead{max-width:30rem;margin:1.65rem 0 0;color:var(--ink-2);font-size:var(--t-body);line-height:1.72}

/* It was a 120px thumbnail beside a line of text, which is enough for a
   face and not enough for a drawing of an envelope, a print and a
   camera. The picture leads now and the line sits under it. */
.c-portrait{display:block;margin:2.3rem 0 0;padding-top:1.15rem;border-top:1px solid var(--line);max-width:26rem}
.c-portrait__frame{overflow:hidden;background:var(--paper-2)}
.c-portrait img{width:100%;height:auto;display:block}
.c-portrait figcaption{font-family:var(--serif);font-size:1.08rem;font-style:italic;line-height:1.35;color:var(--ink-2);margin-top:.85rem}

.c-direct{margin-top:2.2rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.c-direct a{min-height:58px;display:grid;grid-template-columns:7.3rem 1fr;gap:1rem;align-items:center;text-decoration:none;border-top:1px solid var(--line);padding:.72rem 0;transition:padding-left .3s var(--ease)}
.c-direct a:first-child{border-top:0}
.c-direct a:hover{padding-left:.45rem}
.c-direct span{font-family:var(--serif);font-size:1.25rem}
.c-direct small{font-size:var(--t-micro);line-height:1.45;color:var(--ink-2);letter-spacing:.02em}
.c-start{display:inline-block;min-height:44px;margin-top:.75rem;padding:.65rem 0;font-size:var(--t-micro);font-weight:400;letter-spacing:.14em;text-transform:uppercase;text-underline-offset:5px}
.c-intro__note{margin:1rem 0 0;color:var(--ink-2);font-size:var(--t-micro);line-height:1.55}

.c-letter{position:relative;background:var(--mat);border:1px solid var(--line);box-shadow:0 28px 80px rgba(26,26,26,.09);padding:clamp(1.5rem,4.5vw,4.35rem) clamp(1.2rem,5vw,5rem)}
.c-letter::before{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);pointer-events:none}
.c-letter > *{position:relative;z-index:1}
.c-letter__head{display:grid;grid-template-columns:7.5rem 1fr;column-gap:1.35rem;border-bottom:1px solid var(--ink);padding-bottom:2rem;margin-bottom:1.9rem}
.c-letter__kicker{grid-row:1 / span 2;margin:.42rem 0 0;font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.c-letter__head h2{font-size:clamp(2.1rem,4vw,3.35rem);line-height:1.02;max-width:12ch}
.c-letter__head > p:last-child{grid-column:2;margin:.7rem 0 0;color:var(--ink-2);line-height:1.6;max-width:32rem}

#contact-request{display:grid;gap:1.65rem}
.c-fieldset{border:0;padding:0;margin:0;min-width:0}
.c-fieldset legend,.c-field label{display:block;margin:0 0 .65rem;font-size:var(--t-micro);font-weight:400;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-2)}
.c-field label em{font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--ink-3)}
.c-choice-line{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.c-choice-line button,.c-moments button,.c-suggestions button,.c-secondary-actions button{
  min-height:44px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;font:400 var(--t-micro)/1.3 var(--sans);letter-spacing:.08em;
}
.c-choice-line button{border-left:1px solid var(--line);padding:.7rem .55rem}
.c-choice-line button:first-child{border-left:0}
.c-choice-line button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.c-field input,.c-field textarea{
  display:block;width:100%;border:0;border-bottom:1px solid var(--ink-3);border-radius:0;background:transparent;color:var(--ink);
  font:300 1rem/1.55 var(--sans);padding:.66rem .12rem;min-height:48px;
}
.c-field textarea{min-height:7rem;resize:vertical;padding-top:.75rem;background:repeating-linear-gradient(to bottom,transparent 0,transparent 1.56rem,var(--line) 1.57rem,var(--line) 1.61rem);border-bottom:0;line-height:1.6}
.c-field input:focus,.c-field textarea:focus{outline:2px solid var(--accent);outline-offset:3px;border-color:var(--accent)}
.c-field input[aria-invalid="true"]{border-color:#8b312b}
.c-help,.c-error{margin:.45rem 0 0;font-size:var(--t-micro);line-height:1.45;color:var(--ink-2)}
.c-error{color:#7d211d;min-height:1.2em}
html[data-theme="dark"] .c-error{color:#ffb5ad}
.c-flexible{min-height:44px;margin-top:.45rem;padding:.3rem 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;font:400 var(--t-micro)/1.4 var(--sans);letter-spacing:.04em}
.c-flexible[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}

.c-suggestions{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.75rem;min-height:44px;align-items:center}
.c-suggestions button{min-height:44px;padding:.25rem 0;border-bottom:1px solid transparent}
.c-suggestions button:hover,.c-suggestions button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.c-suggestions button[hidden]{display:none}

.c-moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.c-moments button{min-height:49px;padding:.65rem .8rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;letter-spacing:.03em;position:relative}
.c-moments button::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.42rem;height:1px;background:transparent}
.c-moments button:hover{color:var(--ink)}
.c-moments button[aria-pressed="true"]{color:var(--ink);background:var(--paper-2)}
.c-moments button[aria-pressed="true"]::after{background:var(--accent)}

.c-optional,.c-identity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.c-field--note{padding:1.1rem 0 .4rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.c-summary{padding:1.25rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.c-summary__label{margin:0 0 .55rem;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.c-summary #c-summary{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.38;margin:0;white-space:pre-line}
.c-status{min-height:1.5rem;margin:-.7rem 0 0;font-size:var(--t-micro);color:var(--ink-2)}
.c-copy-fallback{border-left:2px solid var(--accent);padding:.3rem 0 .3rem 1rem}
.c-copy-fallback label{display:block;margin-bottom:.5rem;font-size:var(--t-micro);color:var(--ink-2)}
.c-copy-fallback textarea{width:100%;min-height:9rem;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font:300 1rem/1.5 var(--sans);padding:.7rem;resize:vertical}

.c-handoff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:-.4rem}
.c-primary{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--accent);background:var(--accent);color:#fff;padding:.75rem 1rem;cursor:pointer;font:400 var(--t-micro)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:background .25s var(--ease),color .25s var(--ease)}
.c-primary:hover{background:transparent;color:var(--ink)}
.c-primary--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.c-primary--ink:hover{background:transparent;color:var(--ink)}
html[data-theme="dark"] #c-whatsapp{background:var(--paper);border-color:var(--ink);color:var(--ink)}
html[data-theme="dark"] .c-primary:not(.c-primary--ink):hover{color:var(--ink)}
html[data-theme="dark"] .c-field input{color-scheme:dark}
.c-secondary-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:-.75rem}
.c-secondary-actions button{padding:.25rem 0;text-decoration:underline;text-underline-offset:4px;letter-spacing:.05em}
.c-privacy{margin:-.7rem 0 0;color:var(--ink-2);font-size:var(--t-micro);line-height:1.5}

/* The quote is the block. It used to sit at 64px in a 579px column — a
   100-character sentence in five ragged lines — with a third column holding a
   150px link in 237px of space. Now the sentence gets a display measure of
   about 33 characters, which lands it in three lines, and the link sits under
   it where a reader arrives at it after reading rather than beside it. */
.c-after{border-top:1px solid var(--line);padding:clamp(3rem,6vw,5.5rem) 0}
.c-after .wrap{
  display:grid;
  grid-template-columns:minmax(9rem, .28fr) minmax(0, 1fr);
  gap:clamp(1.2rem,3vw,3rem);
  align-items:start;
}
.c-after .eyebrow{margin:.55rem 0 0}
.c-after blockquote{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,3.4vw,3.5rem);line-height:1.14;
  max-width:34ch;text-wrap:balance;
}
.c-after a{
  grid-column:2;justify-self:start;margin-top:clamp(1.4rem,2.4vw,2.1rem);
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  text-underline-offset:5px;
}

@media(max-width:960px){
  .c-contact__grid{grid-template-columns:1fr;gap:3rem}
  .c-intro{position:static;display:grid;grid-template-columns:1fr 15rem;gap:0 2rem}
  .c-intro > *:not(.c-portrait){grid-column:1}
  .c-intro h1{max-width:12ch}
  .c-portrait{grid-column:2;grid-row:1 / span 6;display:block;margin:0;padding:0;border:0}
  .c-portrait__frame{aspect-ratio:3/4}
  .c-portrait figcaption{margin-top:.7rem}
}

@media(max-width:620px){
  .c-after .wrap{grid-template-columns:1fr}
  .c-after a{grid-column:1}

  .c-contact{padding:2.1rem 0 4rem}
  .c-contact__grid{gap:2.25rem}
  .c-intro{display:flex;flex-direction:column}
  .c-intro .eyebrow{order:1}.c-intro h1{order:2}.c-intro__lead{order:3}.c-direct{order:4}.c-start{order:5}.c-intro__note{order:6}.c-portrait{order:7}
  .c-intro h1{font-size:clamp(3rem,15vw,4.25rem);max-width:9ch}
  .c-intro__lead{margin-top:1.2rem}
  .c-direct{margin-top:1.65rem}
  .c-portrait{display:grid;grid-template-columns:6.2rem 1fr;gap:.9rem;align-items:end;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line)}
  .c-portrait__frame{aspect-ratio:4/3}
  .c-letter{padding:2.2rem 1.15rem 2rem;margin-inline:calc(var(--pad) * -.25)}
  .c-letter::before{inset:7px}
  .c-letter__head{display:block;padding-bottom:1.5rem;margin-bottom:1.5rem}
  .c-letter__kicker{margin-bottom:.65rem}
  .c-letter__head > p:last-child{margin-top:.75rem}
  #contact-request{gap:1.45rem}
  .c-moments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-optional,.c-identity,.c-handoff{grid-template-columns:1fr;gap:1.15rem}
  .c-field input,.c-field textarea{font-size:1rem}
  .c-choice-line button{letter-spacing:.03em}
  .c-after .wrap{display:block}
  .c-after blockquote{margin:1.2rem 0 1.5rem}
  .c-after a{display:inline-block}
}

@media(prefers-reduced-motion:reduce){
  .c-direct a,.c-primary{transition:none}
}