:root{--gold-txt:#6F6222}
/* ═══════════════════════════════════════════════════════════════
   TAUTLE · CONTACT — editorial folio
   Reuses the primitives in about.css (wrap, grain, kick, mast, btn)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 01 · hero ───────────────────────────────────────────────── */
.ct-hero{
  position:relative;
  padding-top:calc(var(--navh) + clamp(16px,2.2vw,32px));
  padding-bottom:clamp(30px,3.6vw,52px);
  overflow:hidden;
}

.ct-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.66fr);
  gap:clamp(24px,3.2vw,62px);
  align-items:center;
  margin-top:clamp(30px,4.4vw,58px);
}
.ct-hero-copy{position:relative;z-index:2;min-width:0}

.ct-h1{
  margin:clamp(14px,1.8vw,22px) 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.45rem,5.1vw,4.85rem);
  line-height:.995;
  letter-spacing:-.028em;
  color:var(--ink);
}
.ct-h1 .ln{display:block}
.ct-h1 em{
  font-style:italic;font-weight:400;color:var(--ink);
  position:relative;
}
.ct-h1 em::after{
  content:"";position:absolute;left:.01em;right:.04em;bottom:.075em;
  height:1px;background:var(--gold);opacity:.9;
}

.ct-lede{
  margin:clamp(24px,3vw,38px) 0 0;
  max-width:40ch;
  font-family:var(--serif);
  font-size:clamp(1.01rem,1.35vw,1.22rem);
  line-height:1.68;
  color:var(--ink-soft);
}
.ct-lede::first-letter{color:var(--gold)}

.ct-art{
  position:relative;
  margin:0 calc(-1 * clamp(20px,5vw,84px)) 0 0;
  padding-left:clamp(16px,2.2vw,34px);
  pointer-events:none;
}
.ct-art::before{
  content:"";position:absolute;left:0;top:clamp(10px,2vw,26px);bottom:clamp(34px,5vw,64px);
  width:1px;background:linear-gradient(to bottom,transparent,var(--gold) 14%,var(--gold) 84%,transparent);
  opacity:.45;
}
.ct-art img{
  display:block;width:100%;height:auto;
  mix-blend-mode:multiply;
  filter:contrast(1.02) saturate(.96);
}
.ct-art figcaption{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  margin-top:clamp(10px,1.4vw,16px);
  padding-right:clamp(20px,5vw,84px);
  font-family:var(--sans);font-size:.575rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);
}
.ct-art figcaption i{display:block;width:24px;height:1px;background:var(--gold);opacity:.8}

/* ─── 02 · direct ─────────────────────────────────────────────── */
.ct-direct{
  position:relative;
  background:var(--cream);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(46px,5.6vw,84px) 0 clamp(48px,5.6vw,82px);
}
.ct-direct-in{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.4vw,34px);
  align-items:start;
}
.ct-dcol{grid-column:1 / span 7;position:relative;z-index:2}

.ct-mail{
  display:inline-block;
  margin:clamp(20px,2.4vw,32px) 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.55rem,3.9vw,3.15rem);
  line-height:1.02;
  letter-spacing:-.018em;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:.14em;
  border-bottom:1px solid var(--gold);
  transition:color .35s var(--ease),border-color .35s var(--ease);
  word-break:break-word;
}
.ct-mail:hover,.ct-mail:focus-visible{color:var(--gold-txt);border-color:var(--gold-txt)}

.ct-rows{margin-top:clamp(26px,3.4vw,44px);max-width:34rem}
.ct-row{
  display:grid;
  grid-template-columns:minmax(88px,auto) 1fr;
  gap:clamp(14px,2.4vw,30px);
  align-items:baseline;
  padding:clamp(14px,1.6vw,18px) 0;
  border-top:1px solid var(--rule);
}
.ct-row .k{
  font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
}
.ct-row .v{display:flex;flex-direction:column;gap:.55em}
.ct-row .v a{
  font-family:var(--serif);
  font-size:clamp(1.02rem,1.3vw,1.16rem);
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease);
  width:fit-content;
}
.ct-row .v a:hover,.ct-row .v a:focus-visible{border-bottom-color:var(--gold)}

.ct-plate{
  grid-column:9 / span 4;
  position:relative;
  justify-self:end;
  width:min(100%,272px);
  margin:calc(-1 * clamp(20px,4.4vw,58px)) 0 0;
  pointer-events:none;
}
.ct-plate img{
  display:block;width:100%;height:auto;
  mix-blend-mode:multiply;
  filter:contrast(1.03) saturate(.94);
}
.ct-plate figcaption{
  margin-top:clamp(8px,1.2vw,13px);text-align:right;
  font-family:var(--sans);font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--steel);
}

/* ─── 03 · begin ──────────────────────────────────────────────── */
.ct-cta-in{
  display:flex;flex-direction:column;align-items:flex-start;
  padding-top:clamp(52px,6vw,88px);
  padding-bottom:clamp(52px,6vw,88px);
  max-width:44rem;
}
.ct-cta-in h2{
  margin:clamp(16px,2vw,26px) 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,4.2vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--ivory);
  max-width:19ch;
}
.ct-cta-sub{
  margin:clamp(14px,1.8vw,22px) 0 0;
  font-family:var(--sans);font-size:.6rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-lt);
}
.ct-cta-lede{
  margin:clamp(10px,1.2vw,14px) 0 clamp(26px,3vw,38px);
  font-size:clamp(.93rem,1.02vw,.995rem);
  line-height:1.74;
  color:rgba(247,245,240,.66);
  max-width:44ch;
}
.ct-sig{
  position:relative;
  margin:clamp(30px,3.6vw,46px) 0 0;
  padding-top:clamp(16px,2vw,22px);
  display:flex;flex-direction:column;gap:.1em;
  font-family:var(--serif);
  font-size:clamp(1.24rem,1.8vw,1.52rem);
  line-height:1.24;
  color:var(--ivory);
}
.ct-sig::before{
  content:"";position:absolute;top:0;left:0;
  width:clamp(46px,6vw,82px);height:1px;
  background:rgba(247,245,240,.5);
}
.ct-sig::after{
  content:"";position:absolute;top:-2px;left:calc(clamp(46px,6vw,82px) + 9px);
  width:5px;height:5px;background:var(--red);
}
.ct-sig span:last-child{font-style:italic;color:var(--gold-lt)}

/* ─── motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .ct-h1,.ct-lede{animation:ct-rise 1.05s var(--ease) both}
  .ct-h1{animation-delay:.05s}
  .ct-lede{animation-delay:.24s}
  .ct-art img{animation:ct-fade 1.5s var(--ease) .12s both}
  @keyframes ct-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
  @keyframes ct-fade{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
}

/* ─── responsive ──────────────────────────────────────────────── */
@media (max-width:1000px){
  .ct-hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.62fr);gap:clamp(20px,3vw,40px)}
  .ct-h1{font-size:clamp(2.3rem,5.4vw,3.9rem)}
}

@media (max-width:880px){
  .ct-hero-grid{grid-template-columns:1fr;gap:clamp(20px,4vw,30px)}
  .ct-h1{font-size:clamp(2.35rem,7vw,3.6rem)}
  .ct-art{
    width:min(70%,340px);
    margin:clamp(14px,4vw,24px) 0 0 auto;
    padding-left:0;
  }
  .ct-art::before{display:none}
  .ct-art figcaption{justify-content:flex-end;padding-right:0}

  .ct-direct-in{grid-template-columns:1fr}
  .ct-dcol{grid-column:1}
  .ct-plate{
    grid-column:1;
    justify-self:end;
    width:min(46%,220px);
    margin:clamp(24px,4vw,34px) 0 0;
  }
  .ct-rows{max-width:none}
}

@media (max-width:620px){
  .ct-h1{font-size:clamp(2.2rem,9.4vw,2.9rem);line-height:1.02;letter-spacing:-.022em}
  .ct-lede{font-size:.985rem;max-width:100%}
  .ct-mail{font-size:clamp(1.32rem,7.4vw,2rem)}
  .ct-row{grid-template-columns:1fr;gap:.5em}
  .ct-plate{width:min(58%,190px)}
  .ct-art{width:min(76%,300px)}
  .ct-sig{font-size:clamp(1.18rem,5.4vw,1.4rem)}
}