/* Oh hi — landing.
   Loads after styles.css (tokens, links, buttons, the paper grain).
   One 750px sheet with a border. Every block runs the full width of that
   sheet and is divided from the next by a single hairline — no cards,
   no gaps, no stacked borders. */

:root {
  --measure: 46.875rem;     /* 750px at a 16px root */
  --pad-x: clamp(20px, 4.5vw, 40px);
  --sec-y: clamp(34px, 6vw, 56px);
}

/* The ground the sheet sits on. Not another grid — the sections already carry
   graph paper and loose leaf, and a third ruling would fight them. This is a
   sparse diagonal dot lattice at a 26px pitch: two offset grids, so the dots
   read as a texture rather than as squared paper. */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle .8px at 0 0, var(--rule) 99%, transparent 100%),
    radial-gradient(circle .8px at 13px 13px, var(--rule) 99%, transparent 100%);
  background-size: 26px 26px, 26px 26px;
}

.sheet {
  width: min(95%, var(--measure));
  margin: clamp(20px, 5vw, 56px) auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;              /* so a section ground clips to the corners */
}

.block {
  padding: var(--sec-y) var(--pad-x);
  border-bottom: 1px solid var(--rule);
}
.block:last-child { border-bottom: 0; }

/* ── masthead: mark left, three ways in on the right ─────────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding-top: clamp(24px, 4vw, 34px); padding-bottom: clamp(24px, 4vw, 34px);
}
.top .brand { width: clamp(60px, 11vw, 80px); flex: none; line-height: 0; }
.top .brand svg {
  display: block; width: 100%; height: auto;
  transform-origin: 42% 46%;              /* the circle's centre, not the tail's */
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.top .brand:hover svg, .top .brand:focus-visible svg { transform: scale(1.09); }

.ways { display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); }
.ways a, .ways a:link, .ways a:visited {
  font-size: clamp(14px, 1.7vw, 15.5px); font-weight: 600; color: var(--ink);
  text-decoration: none; padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.ways a:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero h1 { margin: 0 0 22px; }
.hero h1 .vel { display: block; width: 100%; height: auto; }
.hero h1 .vel + .vel { margin-top: 4px; }
.hero .lede {
  margin: 0; max-width: 46ch;
  font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; color: var(--slate);
}

/* ── sections ────────────────────────────────────────────────────────── */
.sec { scroll-margin-top: 12px; }
.sec h2 { margin: 0 0 14px; }
.sec h2 .vel { display: block; height: auto; }   /* width set per heading, by cap height */
.sec p { margin: 0 0 16px; max-width: 54ch; font-size: 16.5px; line-height: 1.68; }
.sec p:last-of-type { margin-bottom: 0; }
.sec .eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--clay-deep);
  background: var(--clay-tint); padding: 5px 11px; border-radius: 3px;
  margin-bottom: 18px;
}
.go { margin-top: 22px; }
.sec figure { margin: 26px 0 0; }
.sec figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 4px;
}
.sec figcaption { margin-top: 10px; font-size: 13px; color: var(--quiet); }

/* Junk Drawer — graph paper. A fine grid plus a heavier fifth line, both
   hairline weight so the type stays the loudest thing on the block. */
#junk-drawer {
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px),
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 23px 23px, 23px 23px, 115px 115px, 115px 115px;
  background-position: -1px -1px;
}

/* Hopper — paper */
#hopper { background: var(--paper); }

/* About — loose leaf: ruled lines, a margin rule, three punched holes.
   Layer order matters: holes paint above the margin rule, which paints above
   the ruling, so nothing draws through a hole. */
#about {
  --rule-gap: 28px;
  --margin-x: 68px;
  --hole-x: 30px;
  background-color: #FBFAF6;
  background-image:
    radial-gradient(circle 5.5px at var(--hole-x) 17%, #EAE7E1 99%, transparent 100%),
    radial-gradient(circle 5.5px at var(--hole-x) 50%, #EAE7E1 99%, transparent 100%),
    radial-gradient(circle 5.5px at var(--hole-x) 83%, #EAE7E1 99%, transparent 100%),
    linear-gradient(90deg, transparent calc(var(--margin-x) - 1px),
                    #E9A79C calc(var(--margin-x) - 1px), #E9A79C var(--margin-x),
                    transparent var(--margin-x)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rule-gap) - 1px),
                              #CBDAEC calc(var(--rule-gap) - 1px), #CBDAEC var(--rule-gap));
  padding-left: calc(var(--margin-x) + 22px);
  background-position-y: 9px;
}
#about p { font-size: 16.5px; line-height: var(--rule-gap); }
#about .eyebrow { margin-bottom: 14px; }
#about .eyebrow { background: rgba(255,255,255,.09); color: var(--marigold); }
.pbub { width: clamp(104px, 22vw, 148px); height: auto; flex: none; display: block; }
.pbub .pb-edge { fill: none; stroke: var(--rule); stroke-width: 1.6; }


/* ── the photo ───────────────────────────────────────────────────────
   Floated to the top right of the block, so the heading and the copy run
   down the left and wrap under it. */
#about .me {
  float: right;
  width: clamp(96px, 20vw, 148px);
  margin: 4px 0 18px clamp(20px, 4vw, 32px);
  shape-outside: circle(50%);            /* wrap to the round edge, not the box */
}
#about .me .pbub { width: 100%; transform: rotate(7deg); transform-origin: 50% 55%; }
#about::after { content: ''; display: block; clear: both; }

/* Signature — sits on the ruling like a signed letter. Its box adds up to
   three rule steps so the copy below stays locked to the lines. */
.signoff { margin: 12px 0 26px; color: var(--ink); line-height: 0; }
.signoff .sig { opacity: .9; }

/* ── the contact form ────────────────────────────────────────────────
   Slides open from the About block. The 0fr/1fr grid trick animates to the
   content's real height — max-height would need a magic number and would
   either clip a long message or coast through empty space on the way back. */
.reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1);
}
.reveal > .reveal-in { overflow: hidden; }
.reveal[data-open] { grid-template-rows: 1fr; }

/* Its own boxed panel, sitting a shade darker than the loose leaf around it,
   with a faint speckle standing in for paper fibre. Three dot grids at
   different tile sizes (19/23/13) so the pattern never visibly repeats —
   one grid alone reads as polka dots. */
/* Full width in the sheet like every other section, one shade down from the
   loose leaf above it, with a hairline top edge so the two blocks read as
   separate. .block supplies the padding and the bottom rule. */
.contact {
  display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--rule);
  background-color: #EDEAE2;
  background-image:
    radial-gradient(circle .7px at 3px 5px,  rgba(84,79,68,.22) 99%, transparent 100%),
    radial-gradient(circle .7px at 11px 14px, rgba(84,79,68,.17) 99%, transparent 100%),
    radial-gradient(circle .6px at 8px 2px,  rgba(84,79,68,.13) 99%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 5px);
  background-size: 19px 19px, 23px 23px, 13px 13px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.contact .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate);
}
.field input, .field textarea {
  font: 500 16px/1.5 var(--body);
  color: var(--ink); background: var(--surface);
  border: 1.5px solid #D3CEC4; border-radius: 4px;
  padding: 11px 13px; width: 100%;
  box-shadow: inset 0 1px 2px rgba(33,32,31,.05);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-tint);
}
.contact .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.contact .note { font-size: 13px; color: var(--slate); margin: 0; }
.sent { font-size: 15px; color: var(--clay-deep); font-weight: 600; margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) { .reveal { transition: none; } }

/* ── footer ──────────────────────────────────────────────────────────── */
.foot {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
  justify-content: space-between;
  padding-top: clamp(20px, 3.5vw, 28px); padding-bottom: clamp(20px, 3.5vw, 28px);
  font-size: 14px; color: var(--slate);
}
.colophon { margin: 0; max-width: none; display: inline-flex; align-items: center;
             gap: 6px; flex-wrap: wrap; }
.colophon strong { color: var(--ink); font-weight: 700; }

/* "Oh hi" gives a little shake when you point at it. */
.wig { display: inline-block; transform-origin: 50% 75%; }
.wig:hover { animation: ohhi-wiggle .5s ease-in-out; }
@keyframes ohhi-wiggle {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-4deg); }
  38% { transform: rotate(3.2deg); }
  58% { transform: rotate(-2.2deg); }
  78% { transform: rotate(1.4deg); }
}
@media (prefers-reduced-motion: reduce) { .wig:hover { animation: none; } }

@media (max-width: 560px) {
  .top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ways { gap: 18px; flex-wrap: wrap; }
  .foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  #about { --margin-x: 40px; --hole-x: 17px; }
  .contact .duo { grid-template-columns: 1fr; }
  .sticky { left: -14px; }
}

/* The Tulsa flag, canvas-toned by default and full colour on hover.
   Toning is done by swapping fills, not with a filter — a greyscale filter
   muddies the gold and leaves the roundel darker than the type beside it. */
.tflag { display: block; flex: none; border-radius: 50%; }
.tflag [class^="tf-"] { transition: fill .18s ease; }
.tf-navy  { fill: #8B8884; }
.tf-gold  { fill: #B7B3AE; }
.tf-red   { fill: #9C9995; }
.tf-cream { fill: #EFEDEA; }   /* a shade off the canvas, so the disc still reads */
.tf-star  { fill: var(--surface); }

.tulsa { display: inline-flex; align-items: center; gap: 8px; }
.tulsa:hover .tf-navy  { fill: #12243F; }
.tulsa:hover .tf-gold  { fill: #E0B24A; }
.tulsa:hover .tf-red   { fill: #AE2F32; }
.tulsa:hover .tf-cream { fill: #F8EDD6; }
.tulsa:hover .tf-star  { fill: #F8EDD6; }

@media (prefers-reduced-motion: reduce) {
  .tflag [class^="tf-"] { transition: none; }
}

/* The dogs: canvas-toned, one warming to rust and one to brown on hover.
   Colour rides on `color` so a single property animates and the silhouettes
   inherit it through fill="currentColor". */
.dog { display: block; flex: none; color: #A5A19B; transition: color .18s ease; }
.dog-item { display: inline-flex; align-items: center; gap: 8px; }
.dog-item:hover .dog--a { color: #C4522F; }
.dog-item:hover .dog--b { color: #6B4630; }
@media (prefers-reduced-motion: reduce) { .dog { transition: none; } }