/* Creative Walnut LLC
   One page. Engineering-drawing language: bone linework and a brass seam on an
   oiled-walnut ground. The wireframe is the only loud thing here. */

:root{
  --ink:      #14100D;   /* ground: very dark warm brown, not black */
  --bone:     #EDE6DA;   /* primary text and drawing linework */
  --graphite: #8A8076;   /* annotation and secondary text */
  --brass:    #D9964A;   /* the single accent */
  --hair:     rgba(237,230,218,.12);

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 56px);

  --f-disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 100;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* A faint drafting grid. Near-invisible on purpose: texture, not a pattern
   you can count. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right,  rgba(237,230,218,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,230,218,.035) 1px, transparent 1px);
  background-size:64px 64px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
  position:relative;
  z-index:1;
}

a{ color:inherit }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 22px;
}

/* ── top rule ─────────────────────────────────────────────── */

.rule{
  border-bottom:1px solid var(--hair);
  position:relative; z-index:1;
  flex:0 0 auto;
}
.rule__in{
  display:flex; align-items:center; gap:20px;
  height:60px;
}
.mark{
  font-variation-settings:"wdth" 118;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
.mark__llc{ color:var(--graphite); font-weight:500 }
.rule__mid{ flex:1; height:1px; background:var(--hair) }
.rule__mail{
  font-family:var(--f-mono);
  font-size:12.5px;
  color:var(--graphite);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s;
}
.rule__mail:hover{ color:var(--brass) }

/* ── hero ─────────────────────────────────────────────────── */

.hero{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  padding:clamp(40px,6vw,72px) 0;
}

.hero__in{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}

h1{
  font-variation-settings:"wdth" 112;
  font-weight:800;
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0 0 24px;
  text-wrap:balance;
}

.lede{
  font-size:clamp(16px,1.25vw,18.5px);
  color:#C9C0B4;
  max-width:34ch;
  margin:0 0 32px;
}

.btn{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:var(--brass);
  padding:14px 26px;
  transition:transform .18s, background .18s;
}
.btn:hover{ background:#E8A957; transform:translateY(-2px) }

.hero__dwg{ display:flex; justify-content:center }

.dwg{
  width:100%;
  max-width:440px;
  height:auto;
}

.dwg .dim{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  fill:var(--graphite);
}

/* Drawn-in sequence. Default state is fully drawn, so the picture is correct
   with no JS and under reduced motion; the animation is purely additive. */
html.js .dwg .ln{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw .85s cubic-bezier(.4,0,.2,1) var(--d,0s) forwards;
}
html.js .dwg .dim{
  opacity:0;
  animation:fade .5s ease var(--d,0s) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes fade{ to{ opacity:1 } }

/* ── title block ──────────────────────────────────────────── */

.tb{
  flex:0 0 auto;
  border-top:1px solid rgba(237,230,218,.18);
  padding-bottom:clamp(24px,4vw,40px);
}

.tb__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--hair);
}

.tb__cell{
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:16px 18px;
  min-height:80px;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.tb__k{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--graphite);
}

.tb__v{
  font-size:14.5px;
  font-variation-settings:"wdth" 106;
  font-weight:500;
}

.tb__v--link{
  color:var(--brass);
  text-decoration:none;
  word-break:break-word;
}
.tb__v--link:hover{ text-decoration:underline }


/* ── responsive ───────────────────────────────────────────── */

@media (max-width:880px){
  .hero{ padding:clamp(32px,7vw,56px) 0 }
  .hero__in{ grid-template-columns:1fr; gap:36px }
  .hero__text{ order:1 }
  .hero__dwg{ order:2 }
  .dwg{ max-width:330px }
  .lede{ max-width:46ch }
}

@media (max-width:560px){
  .rule__in{ height:auto; padding-block:14px; flex-wrap:wrap; gap:4px 14px }
  .rule__mid{ display:none }
  .rule__mail{ flex-basis:100% }
  .dwg{ max-width:270px }
  .tb__grid{ grid-template-columns:1fr }
  .btn{ display:block; text-align:center }
}

@media (prefers-reduced-motion:reduce){
  html.js .dwg .ln{ animation:none; stroke-dasharray:none; stroke-dashoffset:0 }
  html.js .dwg .dim{ animation:none; opacity:1 }
  .btn:hover{ transform:none }
  *{ transition-duration:.001ms !important }
}