/* Personal workshop: paper, ink, and a little orange. No runtime required. */
:root {
  color-scheme:light;
  --paper:#f6f3e9;
  --surface:#fffcf4;
  --ink:#252c27;
  --muted:#62675e;
  --line:#c9c9b9;
  --accent:#bd431e;
  --green:#e5eddf;
  --yellow:#f4df99;
  --font-display:Georgia,'Times New Roman',serif
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.65
}
a {
  color:inherit;
  text-underline-offset:5px;
  text-decoration-thickness:1px
}
a:hover {
  color:var(--accent)
}
a:focus-visible,input:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
img {
  max-width:100%;
  object-fit:cover
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  line-height:1.1
}
h1,h2 {
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.055em
}
h2 {
  font-size:clamp(34px,4vw,48px);
  margin-bottom:22px
}
h3 {
  font-size:29px;
  letter-spacing:-.04em;
  margin-bottom:18px
}
p {
  margin-bottom:20px
}
.wrap {
  max-width:1192px;
  margin-inline:auto;
  padding-inline:36px
}
.orange {
  color:var(--accent)
}
.small {
  font-size:13px;
  color:var(--muted)
}
.eyebrow,.project-index,.bench-top,.section-divider,.tags,.beta {
  font-family:'Courier New',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px
}
.eyebrow {
  margin-bottom:24px
}
.skip-link {
  position:absolute;
  top:-80px;
  left:20px;
  z-index:10;
  background:var(--ink);
  color:var(--paper);
  padding:12px
}
.skip-link:focus {
  top:10px
}
.site-header {
  min-height:106px;
  display:flex;
  align-items:center;
  gap:28px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font-size:34px;
  font-weight:800;
  letter-spacing:-2px;
  text-decoration:none;
  line-height:1
}
.wordmark-note {
  display:block;
  font-family:'Courier New',monospace;
  font-size:10px;
  letter-spacing:0;
  font-weight:400;
  margin-top:9px
}
.site-header nav {
  display:flex;
  gap:30px;
  margin-left:auto;
  font-size:14px;
  font-weight:700
}
.site-header nav a {
  text-decoration:none
}
.theme-control {
  position:relative;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer
}
.theme-control input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
  margin:0
}
.theme-control:has(input:focus-visible) {
  outline:3px solid var(--accent);
  outline-offset:4px
}
.theme-control span {
  font-size:24px;
  pointer-events:none
}
.theme-control input {
  z-index:1
}
.hero {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:46px;
  align-items:center;
  padding:74px 0 64px
}
.hero h1 {
  font-size:clamp(48px,5.7vw,76px);
  line-height:1.04;
  margin-bottom:30px
}
.underlined {
  position:relative;
  z-index:0;
  white-space:nowrap
}
.underlined:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:10px;
  background:#ed966e;
  z-index:-1;
  transform:rotate(-2deg)
}
.intro {
  font-size:17px;
  max-width:510px;
  line-height:1.75
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:30px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  background:var(--accent);
  color:#fffaf0;
  border:1px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  padding:12px 18px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:transform .15s,box-shadow .15s
}
.button:hover {
  color:#fff;
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink)
}
.text-link {
  font-size:12px;
  max-width:130px
}
.availability {
  font-size:12px;
  color:var(--muted);
  margin:25px 0 0
}
.availability span {
  color:#54744b;
  margin-right:7px
}
.workbench {
  position:relative;
  background-color:var(--green);
  background-image:linear-gradient(#74877018 1px,transparent 1px),linear-gradient(90deg,#74877018 1px,transparent 1px);
  background-size:22px 22px;
  border:1px solid var(--ink);
  border-radius:3px;
  transform:rotate(2deg);
  padding:18px 20px 28px;
  box-shadow:6px 6px 0 #252c2710;
  margin-top:26px
}
.bench-top {
  display:flex;
  justify-content:space-between;
  font-size:10px
}
.rover {
  display:block;
  width:100%;
  height:auto;
  margin:22px 0 14px;
  overflow:visible;
  color:#28382e
}
.bench-caption {
  font:11px 'Courier New',monospace;
  border-top:1px dashed #84927d;
  padding-top:16px;
  display:flex;
  justify-content:space-between
}
.note-sticker {
  position:absolute;
  right:-8px;
  bottom:-28px;
  background:var(--yellow);
  color:#302d23;
  padding:12px 19px;
  font:italic 18px Georgia,serif;
  transform:rotate(-7deg);
  box-shadow:2px 3px 0 #252c2720
}
.section-divider {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-block:1px solid var(--line);
  padding:15px 0;
  color:var(--muted);
  font-size:10px
}
.work-section {
  padding-top:62px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:28px
}
.section-heading .eyebrow {
  margin-bottom:14px
}
.section-heading h2 {
  margin-bottom:0
}
.section-heading>p {
  font-size:13px;
  color:var(--muted);
  margin:0
}
.featured-project {
  display:grid;
  grid-template-columns:1.65fr 1fr;
  border:1px solid var(--ink);
  background:var(--surface);
  box-shadow:4px 4px 0 var(--ink)
}
.project-story {
  padding:36px 40px
}
.project-index {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:23px
}
.project-story h3 {
  font-size:37px
}
.project-story p {
  font-size:15px;
  max-width:550px
}
.project-detail {
  color:var(--muted)
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:24px 0;
  font-size:10px;
  letter-spacing:0
}
.tags li {
  border:1px solid var(--line);
  padding:3px 8px
}
.project-links {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  font-size:13px;
  font-weight:700
}
.field-notes {
  background:var(--green);
  border-left:1px solid var(--ink);
  padding:34px;
  text-align:center
}
.field-notes .eyebrow {
  font-size:10px
}
.award {
  font-family:Georgia,serif;
  font-size:47px;
  line-height:1.05;
  margin-top:25px;
  letter-spacing:-2px
}
.award span {
  font-size:25px;
  letter-spacing:-.5px
}
.field-notes>p {
  font-size:12px;
  margin-top:17px
}
.pipeline {
  display:flex;
  flex-direction:column;
  align-items:center;
  font:10px 'Courier New',monospace;
  gap:7px;
  margin:26px 0
}
.pipeline span:nth-child(odd) {
  border:1px solid var(--ink);
  padding:7px 14px;
  background:var(--surface)
}
.project-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-top:26px
}
.project-card {
  padding:31px 35px;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column
}
.card-top {
  display:flex;
  justify-content:space-between;
  align-items:start
}
.project-symbol {
  font-size:32px;
  line-height:1;
  color:var(--accent)
}
.project-card p {
  font-size:15px
}
.project-card .tags {
  margin-top:auto
}
.project-card>a {
  font-size:13px;
  font-weight:700;
  align-self:start
}
.experimental {
  background:transparent;
  border-style:dashed
}
.beta {
  font-size:9px;
  background:var(--yellow);
  color:#302d23;
  padding:3px 8px;
  transform:rotate(5deg);
  white-space:nowrap
}
.site-note {
  display:flex;
  align-items:center;
  gap:23px;
  padding:30px 0;
  border-bottom:1px solid var(--line)
}
.asterisk {
  font-size:44px;
  color:var(--accent)
}
.site-note p {
  font-size:13px;
  margin:0;
  max-width:730px
}
.site-note a {
  font-size:12px;
  margin-left:auto;
  white-space:nowrap
}
.about-section {
  padding:80px 0;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:90px
}
.about-person {
  position:relative
}
.portrait-frame {
  float:right;
  transform:rotate(5deg);
  padding:8px 8px 3px;
  border:1px solid var(--line);
  background:var(--surface);
  margin:0 0 22px 20px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.portrait-frame img {
  width:140px;
  height:140px;
  filter:saturate(.75)
}
.portrait-frame span {
  font:italic 15px Georgia,serif;
  padding:8px 0
}
.about-person .eyebrow {
  max-width:260px;
  font-size:10px
}
.about-person p:not(.eyebrow) {
  font-size:15px
}
.hand-note {
  font:italic 22px Georgia,serif;
  color:var(--accent)
}
.toolbox {
  border-top:3px solid var(--ink);
  padding-top:25px
}
.toolbox h3 {
  font:700 26px Georgia,serif;
  margin-bottom:5px
}
.toolbox dl {
  margin:26px 0
}
.toolbox dl>div {
  border-bottom:1px solid var(--line);
  padding:14px 0
}
.toolbox dt {
  font-size:12px;
  font-weight:700;
  margin-bottom:5px
}
.toolbox dd {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.toolbox-note {
  font:italic 18px/1.5 Georgia,serif
}
.contact-section {
  border-block:1px solid var(--ink);
  padding:45px 0;
  display:flex;
  justify-content:space-between;
  gap:30px
}
.contact-section h2 {
  font-size:42px
}
.contact-section p:not(.eyebrow) {
  font-size:14px
}
.email-link {
  font-size:clamp(17px,2.3vw,27px);
  font-weight:700;
  overflow-wrap:anywhere
}
.email-link span {
  color:var(--accent)
}
.contact-socials {
  display:flex;
  flex-direction:column;
  align-items:start;
  justify-content:center;
  gap:15px;
  font-size:14px
}
.contact-socials span {
  font:italic 14px Georgia,serif;
  color:var(--muted)
}
.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-block:30px;
  font-size:11px
}
.footer-signature {
  display:flex;
  gap:12px;
  align-items:center
}
.footer-signature img {
  border-radius:4px
}
.site-footer nav {
  display:flex;
  gap:18px
}
.footer-signature .small {
  font-size:10px
}

/* Theme switch reverses the system preference, using only CSS. */
html:has(#theme-toggle-check:checked) {
  color-scheme:dark;
  --paper:#232823;
  --surface:#2c332c;
  --ink:#f2efdf;
  --muted:#babeb0;
  --line:#555f51;
  --accent:#ffa17c;
  --green:#354638;
  --yellow:#efd995
}
html:has(#theme-toggle-check:checked) .button {
  background:#bd431e
}
html:has(#theme-toggle-check:checked) .underlined:after {
  background:#8c452e
}
html:has(#theme-toggle-check:checked) .rover {
  color:#edf1dd
}
html:has(#theme-toggle-check:checked) .availability span {
  color:#afcf98
}

@media(prefers-color-scheme:dark) {
  :root {
  color-scheme:dark;
  --paper:#232823;
  --surface:#2c332c;
  --ink:#f2efdf;
  --muted:#babeb0;
  --line:#555f51;
  --accent:#ffa17c;
  --green:#354638;
  --yellow:#efd995
}
.button {
  background:#bd431e
}
.underlined:after {
  background:#8c452e
}
.rover {
  color:#edf1dd
}
.availability span {
  color:#afcf98
}
html:has(#theme-toggle-check:checked) {
  color-scheme:light;
  --paper:#f6f3e9;
  --surface:#fffcf4;
  --ink:#252c27;
  --muted:#62675e;
  --line:#c9c9b9;
  --accent:#bd431e;
  --green:#e5eddf;
  --yellow:#f4df99
}
html:has(#theme-toggle-check:checked) .underlined:after {
  background:#ed966e
}
html:has(#theme-toggle-check:checked) .rover {
  color:#28382e
}
html:has(#theme-toggle-check:checked) .availability span {
  color:#54744b
}

}

@media(max-width:950px) {
  .hero {
  gap:25px
}
.hero-actions {
  align-items:start;
  flex-direction:column;
  gap:18px
}
.text-link {
  max-width:none
}
.hero h1 {
  font-size:58px
}
.about-section {
  gap:40px
}
.project-story {
  padding:28px
}
.field-notes {
  padding:26px
}
.site-footer {
  flex-wrap:wrap
}
.wordmark-note {
  display:none
}

}

@media(max-width:700px) {
  .wrap {
  padding-inline:22px
}
.site-header {
  min-height:82px;
  gap:16px
}
.site-header nav {
  gap:17px;
  font-size:12px
}
.wordmark {
  font-size:29px
}
.theme-control {
  width:32px;
  height:32px;
  flex-shrink:0
}
.hero {
  grid-template-columns:1fr;
  padding:44px 0 55px;
  gap:30px
}
.hero h1 {
  font-size:clamp(49px,10vw,70px)
}
.hero .eyebrow {
  font-size:10px
}
.hero-actions {
  flex-direction:row;
  align-items:center
}
.text-link {
  max-width:115px
}
.workbench {
  max-width:420px;
  width:calc(100% - 16px);
  margin:0 auto
}
.section-divider {
  font-size:8px
}
.section-divider span:last-child {
  display:none
}
.section-heading {
  display:block
}
.section-heading>p {
  margin-top:15px
}
.section-heading>p br {
  display:none
}
.work-section {
  padding-top:40px
}
.featured-project,.project-pair,.about-section {
  grid-template-columns:1fr
}
.field-notes {
  border-left:0;
  border-top:1px solid var(--ink)
}
.pipeline {
  flex-direction:row;
  justify-content:center;
  flex-wrap:wrap;
  font-size:8px
}
.pipeline span:nth-child(even) {
  transform:rotate(-90deg)
}
.pipeline span:nth-child(odd) {
  padding:6px
}
.project-pair {
  gap:20px
}
.project-card {
  padding:28px
}
.site-note {
  flex-wrap:wrap;
  gap:14px
}
.site-note p {
  flex:1
}
.site-note a {
  margin-left:52px
}
.about-section {
  padding:50px 0;
  gap:36px
}
.portrait-frame img {
  width:110px;
  height:110px
}
.portrait-frame {
  margin-left:12px
}
.about-person h2 {
  font-size:35px
}
.contact-section {
  flex-direction:column;
  padding:35px 0
}
.contact-section h2 {
  font-size:36px
}
.contact-socials {
  flex-direction:row;
  flex-wrap:wrap;
  gap:20px
}
.contact-socials span {
  width:100%
}
.site-footer {
  align-items:start;
  gap:20px
}
.site-footer nav {
  flex-wrap:wrap
}
.eyebrow {
  font-size:10px
}

}

@media(max-width:380px) {
  .wrap {
  padding-inline:16px
}
.site-header nav {
  gap:12px
}
.site-header {
  gap:12px
}
.site-header nav a:last-child {
  max-width:50px
}
.hero-actions {
  flex-direction:column;
  align-items:start
}
.text-link {
  max-width:none
}
.project-story,.project-card {
  padding:23px
}
.project-story h3 {
  font-size:31px
}
.portrait-frame {
  float:none;
  width:130px;
  margin-bottom:25px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*:before,*:after {
  transition:none!important
}

}

.error-hero h1 {
  font-size:clamp(40px,5.5vw,68px);
  overflow-wrap:break-word
}
.hero>div {
  min-width:0
}

/* Client paths reuse the workshop palette and native disclosure controls. */
.offers-section,.compact-section { padding-top:56px; }
.offer-list { border-top:1px solid var(--ink); }
.offer { border-bottom:1px solid var(--line); }
summary { cursor:pointer; padding:18px 16px; font-weight:700; }
summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.offer[open] { background:var(--surface); }
.offer[open] summary { color:var(--accent); }
.offer-body { padding:8px 28px 28px; max-width:850px; }
.offer-body h3 { font-family:var(--font-display); font-size:30px; }
.offer-body .project-detail { font-size:14px; }
.section-next { margin:24px 0 0; font-size:14px; }
.process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding-left:22px; }
.process-list li { padding-left:4px; }
.process-list li::marker { color:var(--accent); font-weight:700; }
.process-list h3 { font-size:18px; line-height:1.35; letter-spacing:-.02em; }
.process-list p { font-size:14px; }
#testimonials { border-bottom:1px solid var(--line); padding-bottom:30px; }
#testimonials>p { max-width:800px; font-size:15px; }
.testimonial { margin:20px 0; padding:24px; border:1px solid var(--line); background:var(--surface); }
.testimonial blockquote { margin:0 0 16px; }
.testimonial img { width:48px; height:48px; }
.site-header nav a,.contact-socials a { min-height:44px; display:inline-flex; align-items:center; }
.theme-control { min-width:44px; min-height:44px; }
@media(max-width:950px) { .site-header nav { gap:18px; } .process-list { grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px) {
 .site-header { flex-wrap:wrap; padding-block:16px; gap:10px; }
 .site-header nav { order:3; width:100%; margin:0; justify-content:space-between; gap:10px; flex-wrap:wrap; }
 .site-header nav a:last-child { max-width:none; }
 .theme-control { margin-left:auto; }
 .offers-section,.compact-section { padding-top:38px; }
 .offer-body { padding:8px 16px 24px; }
 .offer-body h3 { font-size:27px; }
}
@media(max-width:450px) { .process-list { grid-template-columns:1fr; gap:10px; } }

/* Offers are readable immediately, side by side where space allows. */
.offer-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; border-top:0; align-items:start; }
.offer { min-width:0; border:1px solid var(--line); background:var(--surface); }
.offer summary { padding:18px 16px; font-size:14px; }
.offer-body { padding:8px 16px 24px; }
.offer-body h3 { font-size:27px; }
.offer-body p { font-size:14px; }
.offer-body .offer-aside { font:italic 16px/1.5 Georgia,serif; color:var(--muted); }
.offer-body .button { gap:10px; }
@media(min-width:1051px) { .offer-body h3 { min-height:150px; } }
@media(max-width:1050px) { .offer-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .offer-list { grid-template-columns:1fr; } }