/* todhirsch.com. Built from design-spec.md (artboards 1b, 2a, 2b, 3a) */

:root{
  /* core */
  --bg:#F7F5F0;
  --surface:#FFFDF9;
  --ink:#16181A;
  --text:#16181A;
  --muted:#55585B;
  --subtle:#6B6E70;
  --label:#7E8183;
  --placeholder:#919496;
  --border:#C7C4BE;
  --hairline:#D8D5CF;
  --accent:#44618C;
  --accent-hover:#35496B;
  --ring:0 0 0 3px rgba(68,97,140,.12);
  --clay:#B0714E;
  --clay-hover:#96593A;
  --on-accent:#fff;
  /* on inverted */
  --d-text:#F7F5F0;
  --d-muted:#A9A8A5;
  --d-label:#84837F;
  --d-tint:#A9BFDD;
  --d-divider:rgba(247,245,240,.14);
  /* graphics */
  --circle:#DCD8CE;
  --wire:rgba(68,97,140,.35);
  --slot:repeating-linear-gradient(135deg,#E4E0D6 0 10px,#EEEBE3 10px 20px);
  /* type */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Work Sans',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* layout */
  --maxw:1080px;
  --pad:22px;
  --gap-section:28px;
}

@media (min-width:900px){
  :root{
    --pad:56px;
    --gap-section:56px;
    --slot:repeating-linear-gradient(135deg,#E4E0D6 0 11px,#EEEBE3 11px 22px);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font:300 15.5px/1.70 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (min-width:900px){body{font-size:16.5px;line-height:1.75}}

img{max-width:100%;display:block}
p{margin:0 0 18px;text-wrap:pretty}
@media (min-width:900px){p{margin-bottom:22px}}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-9999px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 16px;color:var(--text)}
.skip:focus{left:16px;top:16px;z-index:50}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);margin:0;text-wrap:balance}
h1{font-size:36px;line-height:1.06;font-weight:300;letter-spacing:-.025em}
.h1-home{font-size:34px}
.h1-work{font-size:34px;line-height:1.08}
.h1-contact{font-size:34px;line-height:1.08}
h2{font-size:26px;line-height:1.15;font-weight:300;letter-spacing:-.02em}
h3{font-size:24px;line-height:1.15;font-weight:400;letter-spacing:-.02em}
@media (min-width:900px){
  h1{font-size:56px}
  .h1-home{font-size:clamp(38px,4.7vw,50px);line-height:1.08}
  .h1-work{font-size:54px}
  .h1-contact{font-size:46px}
  h2{font-size:34px;line-height:1.10}
  h3{font-size:30px}
}
.accent-phrase{font-style:italic;font-weight:300;color:var(--accent);display:block}

.eyebrow{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin:0 0 14px}
@media (min-width:900px){.eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:18px}}

.lede{font-size:15.5px;line-height:1.70;font-weight:300;color:var(--muted)}
h1 + .lede{margin-top:16px}
@media (min-width:900px){.lede{font-size:18px;line-height:1.65;max-width:520px}h1 + .lede{margin-top:22px}}

.small{font-size:14.5px;line-height:1.60;color:var(--subtle)}
@media (min-width:900px){.small{font-size:15px}}

.pull{font-family:var(--serif);font-size:21px;line-height:1.50;font-weight:300;color:var(--text)}
@media (min-width:900px){.pull{font-size:25px}}

.idx{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--clay)}
@media (min-width:900px){.idx{font-size:10.5px;letter-spacing:.10em}}

.col-body{max-width:none}
.col-prose{max-width:none}
@media (min-width:900px){.col-body{max-width:660px}.col-prose{max-width:720px}}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin-inline:auto;padding:18px var(--pad)}
@media (min-width:900px){.nav{padding:24px var(--pad)}}
.wordmark{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}
.wordmark:hover{text-decoration:none;color:var(--text)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.wordmark span{font:500 11px/1 var(--mono);letter-spacing:.10em;text-transform:uppercase}
@media (min-width:900px){.wordmark span{font-size:12px}}

.nav-links{display:none}
@media (min-width:900px){
  .nav-links{display:flex;gap:8px;list-style:none;margin:0;padding:0}
  .nav-links a{
    display:block;padding:9px 15px;border-radius:100px;
    font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
    color:var(--subtle);text-decoration:none;
  }
  .nav-links a:hover{color:var(--text);text-decoration:none}
  .nav-links a[aria-current="page"]{background:var(--ink);color:var(--bg)}
}

.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;margin-right:-10px;
  background:none;border:0;cursor:pointer;align-items:flex-end;
}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--text)}
@media (min-width:900px){.menu-btn{display:none}}

.mobile-menu{display:none;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) 18px}
.mobile-menu[data-open="true"]{display:block}
@media (min-width:900px){.mobile-menu{display:none!important}}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu a{
  display:block;padding:13px 0;border-top:1px solid var(--hairline);
  font:500 11px/1 var(--mono);letter-spacing:.10em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
}
.mobile-menu a[aria-current="page"]{color:var(--accent)}

/* ---------- sections ---------- */
main{display:block}
section{padding:26px 0 30px}
section:last-of-type{padding-bottom:30px}
@media (min-width:900px){
  section{padding:52px 0 56px}
  section:last-of-type{padding-bottom:64px}
}
.rule{border:0;border-top:1px solid var(--hairline);max-width:calc(var(--maxw) - var(--pad)*2);margin:0 auto}

/* ---------- buttons ---------- */
.btn{
  display:block;width:100%;text-align:center;
  padding:17px 20px;border-radius:8px;border:1px solid transparent;
  font:500 14px/1 var(--sans);cursor:pointer;text-decoration:none;
  min-height:48px;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn-primary:focus-visible{box-shadow:var(--ring)}
.btn-secondary{background:transparent;border-color:var(--border);color:var(--text)}
.btn-secondary:hover{border-color:#B3AFA8;background:#F1EEE7;color:var(--text)}
.btn-clay{background:var(--clay);color:var(--on-accent)}
.btn-clay:hover{background:var(--clay-hover);color:var(--on-accent)}
.btn-ondark{background:var(--accent);color:var(--on-accent)}
.btn-ondark:hover{background:var(--accent-hover);color:var(--on-accent)}
@media (min-width:900px){
  .btn{display:inline-block;width:auto;font-size:13px;padding:15px 26px}
  .btn-primary{padding:17px 32px;font-size:14px}
  .btn-ondark,.btn-clay{padding:16px 28px}
}
.btn-row{display:flex;flex-direction:column;gap:12px;margin:24px 0 0}
@media (min-width:900px){.btn-row{flex-direction:row;gap:14px;align-items:center}}

/* ---------- tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.tags li{
  border:1px solid var(--border);border-radius:100px;padding:8px 12px;
  font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);
}
@media (min-width:900px){.tags li{font-size:10.5px;padding:8px 13px}}

/* ---------- images ---------- */
picture.media{
  display:block;overflow:hidden;border-radius:12px;
  border:1px solid var(--hairline);background:var(--slot);
}
picture.media img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- home ---------- */
.hero{display:grid;gap:26px;grid-template-areas:"lead" "media" "rest"}
.hero-lead{grid-area:lead}
.hero-media{grid-area:media}
.hero-rest{grid-area:rest}
@media (min-width:900px){
  .hero{
    grid-template-columns:1fr 1fr;
    grid-template-areas:". media" "lead media" "rest media" ". media";
    grid-template-rows:1fr auto auto 1fr;
    column-gap:56px;row-gap:0;
  }
  .hero-lead{margin-bottom:26px}
  .hero-media{align-self:stretch;justify-self:end;width:100%;max-width:459px}
}
.hero-portrait{aspect-ratio:4/5;width:100%}
@media (min-width:900px){.hero-portrait{width:100%}}

.principles{display:grid;gap:26px;margin-top:26px}
@media (min-width:900px){.principles{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}}
.principle .idx{display:block;margin-bottom:12px}
.principle h3{font-size:21px;margin-bottom:10px}
@media (min-width:900px){.principle h3{font-size:23px}}
.principle p{margin:0;color:var(--muted);font-size:15px}

/* ---------- work ---------- */
.work-hero{aspect-ratio:3/2;width:100%;margin:22px 0 4px}
@media (min-width:900px){.work-hero{margin:28px 0 6px}}
.services{display:grid;gap:0;margin-top:26px;border:1px solid var(--hairline);border-radius:10px;overflow:hidden}
@media (min-width:900px){.services{grid-template-columns:repeat(2,1fr);margin-top:40px}}
.service{padding:18px 20px;border-bottom:1px solid var(--hairline)}
.service:last-child{border-bottom:0}
@media (min-width:900px){
  .service{padding:22px 26px}
  .service:nth-child(odd){border-right:1px solid var(--hairline)}
  .service:nth-last-child(-n+2){border-bottom:0}
}
.service h3{font-size:19px;margin-bottom:6px}
@media (min-width:900px){.service h3{font-size:21px}}
.service p{margin:0;color:var(--subtle);font-size:14.5px}

.client{display:grid;gap:20px;padding:30px 0;border-top:1px solid var(--hairline)}
@media (min-width:900px){
  .client{grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:44px 0}
  .client:nth-of-type(even) .client-media{order:2}
}
.client-media{aspect-ratio:346/200;width:100%}
@media (min-width:900px){.client-media{aspect-ratio:460/340;width:100%}}
.client .idx{display:block;margin-bottom:10px}
.client h3{margin-bottom:12px}
.client p{color:var(--muted);margin-bottom:0}

.section-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.section-meta .eyebrow{margin:0}

.past{display:grid;gap:22px;margin-top:24px}
@media (min-width:900px){.past{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:34px}}
.past h3{font-size:21px;margin-bottom:8px}
@media (min-width:900px){.past h3{font-size:23px}}
.past p{margin:0;color:var(--subtle);font-size:14.5px}

/* ---------- dark band / CTA ---------- */
.band{background:var(--ink);color:var(--d-text);border-radius:14px;padding:28px 22px;max-width:calc(var(--maxw) - var(--pad)*2);margin:0 auto}
@media (min-width:900px){.band{padding:56px}}
.band h2,.band .band-h{font-family:var(--serif);font-size:21px;line-height:1.40;font-weight:300;color:var(--d-text);margin:0 0 20px;letter-spacing:0}
@media (min-width:900px){.band .band-h,.band h2{font-size:28px;line-height:1.30;max-width:520px;margin-bottom:26px}}
.band p{color:var(--d-muted);font-size:14.5px;line-height:1.65}
@media (min-width:900px){.band p{font-size:15px;line-height:1.70}}
.band-cta{display:flex;flex-direction:column;gap:14px}
@media (min-width:900px){.band-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}}

/* ---------- personal ---------- */
.mosaic{display:grid;gap:18px;margin-top:26px}
.mosaic-right{display:grid;gap:18px}
@media (min-width:900px){
  .mosaic{grid-template-columns:549fr 392fr;gap:26px;margin-top:40px;align-items:start}
  .mosaic-right{gap:26px}
}
.figure{margin:0}
.figure figcaption{margin-top:10px;font-size:13px;line-height:1.50;color:var(--subtle)}
@media (min-width:900px){.figure figcaption{font-size:15px;line-height:1.60}}
.figure .idx{display:block;margin-bottom:6px}
.ph-tall{aspect-ratio:549/631}
.ph-sq{aspect-ratio:392/265}
.ph-wide{aspect-ratio:426/380}

.personal-copy{
  display:grid;gap:22px;margin-top:26px;
  grid-template-areas:"pull" "media" "prose" "facts";
}
.pc-pull{grid-area:pull;margin:0}
.pc-media{grid-area:media}
.pc-prose{grid-area:prose}
.pc-facts{grid-area:facts}
@media (min-width:900px){
  .personal-copy{
    grid-template-columns:426fr 516fr;
    grid-template-areas:"media pull" "media prose" "media facts";
    column-gap:52px;row-gap:22px;margin-top:44px;align-content:start;
  }
}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.facts li{
  border:1px solid var(--border);border-radius:100px;padding:8px 12px;
  font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);
}
@media (min-width:900px){.facts li{font-size:10.5px;padding:8px 13px}}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:26px}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}

.form-card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:14px;
  padding:22px;box-shadow:0 4px 20px rgba(22,24,26,.05);
}
@media (min-width:900px){.form-card{padding:34px}}
.form-card h2{font-size:24px;margin-bottom:20px}
@media (min-width:900px){.form-card h2{font-size:28px;margin-bottom:24px}}

.field{margin-bottom:16px}
@media (min-width:900px){.field{margin-bottom:22px}}
.field-pair{display:grid;gap:16px}
@media (min-width:900px){.field-pair{grid-template-columns:1fr 1fr;gap:18px}}
label{display:block;font:500 12px/1 var(--sans);color:var(--text);margin-bottom:8px}
@media (min-width:900px){label{margin-bottom:9px}}
input[type=text],input[type=tel],input[type=email],textarea{
  width:100%;font:300 15.5px/1.5 var(--sans);color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
}
input[type=text],input[type=tel],input[type=email]{height:48px;padding:0 14px}
textarea{height:104px;padding:14px;resize:vertical}
@media (min-width:900px){textarea{height:124px}input[type=text],input[type=tel],input[type=email],textarea{font-size:16.5px}}
::placeholder{color:var(--placeholder);opacity:1}
input:hover,textarea:hover{border-color:#B3AFA8}
input:focus,textarea:focus{outline:0;background:#fff;border:1.5px solid var(--accent);box-shadow:var(--ring)}

.human{
  border:1px solid var(--border);border-radius:8px;background:var(--bg);
  padding:14px 16px;margin-bottom:16px;
}
@media (min-width:900px){.human{padding:16px 18px;margin-bottom:22px}}
.human-row{display:flex;align-items:center;gap:12px}
.human input[type=checkbox]{
  appearance:none;width:24px;height:24px;flex:none;margin:0;cursor:pointer;
  border:1.5px solid #8C8983;border-radius:6px;background:#fff;
}
.human input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.human input[type=checkbox]:checked::after{
  content:"";display:block;width:6px;height:11px;margin:3px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.human input[type=checkbox]:focus-visible{box-shadow:var(--ring)}
.human label{margin:0;font-size:14px}
.human-help{font:400 10.5px/1.4 var(--mono);color:var(--label);margin:12px 0 0}
.human .g-recaptcha,.human [data-netlify-recaptcha]{max-width:100%;overflow-x:auto;overflow-y:hidden}
.human [data-netlify-recaptcha] iframe{display:block}
@media (min-width:900px){.human-help{font-size:11px}}
.form-note{font-size:13px;color:var(--subtle);margin:14px 0 0;text-align:center}

.contact-meta{margin-top:24px}
.contact-meta a{font-size:16px}
.contact-meta p{margin:0 0 8px}

/* connection graphic */
.wire-graphic{position:relative;aspect-ratio:1/.72;max-width:420px;margin:0 auto}
.wire-graphic .node{position:absolute;border-radius:50%;background:var(--circle)}
.wire-graphic .photo{background:var(--slot);border:1px solid var(--hairline)}
.wire-graphic .hub{
  background:var(--accent);box-shadow:0 6px 20px rgba(68,97,140,.30);
  width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%);
}
.wire-graphic .a{width:73px;height:73px;left:4%;top:8%}
.wire-graphic .b{width:87px;height:87px;right:2%;top:2%}
.wire-graphic .c{width:51px;height:51px;left:10%;bottom:6%}
.wire-graphic .d{width:57px;height:57px;right:12%;bottom:0}
.wire-graphic svg{position:absolute;inset:0;width:100%;height:100%}
@media (min-width:900px){
  .wire-graphic{max-width:none}
  .wire-graphic .hub{width:56px;height:56px}
  .wire-graphic .a{width:92px;height:92px}
  .wire-graphic .b{width:110px;height:110px}
  .wire-graphic .c{width:64px;height:64px}
  .wire-graphic .d{width:72px;height:72px}
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--hairline);margin-top:var(--gap-section);padding:26px var(--pad) 34px}
@media (min-width:900px){.site-foot{padding:32px var(--pad) 48px}}
.foot-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;max-width:calc(var(--maxw) - var(--pad)*2);margin-inline:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0}
.foot-links a{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);text-decoration:none}
.foot-links a:hover{color:var(--text)}
.foot-mail{font-size:14.5px}