/* A workshop manual: regular lettering, drawing references, pencil notes. */
@font-face{font-family:'IBM Plex Sans';src:url('./IBMPlexSans.ttf') format('truetype');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('./IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:WorkshopNotes;src:url('./Caveat.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --type-display:'IBM Plex Sans',Arial,sans-serif;
  --type-text:'IBM Plex Sans',Arial,sans-serif;
  --type-drawing:'IBM Plex Mono','Courier New',monospace;
  --type-note:WorkshopNotes,'Segoe Print',cursive;
  font-family:var(--type-text);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  font-synthesis:none;
  font-kerning:normal;
}
button{font:inherit}
strong,b{font-weight:600}
address{font-style:normal}
.wordmark{font-family:var(--type-text);font-size:1.375rem;font-weight:500;line-height:1.2;letter-spacing:-.015em}
.brand-symbol{font-size:2.875rem;font-weight:400;line-height:1}
.brand-ltd{font-family:var(--type-text);font-size:.8125rem;font-weight:400;line-height:1.5;letter-spacing:0}
.site-header nav{font-family:var(--type-text);font-size:.9375rem;line-height:1.4}

.hero h1,.chapter h2,.section-heading h2,.contact h2{
  font-family:var(--type-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.16;
}
.hero h1{font-size:clamp(2.875rem,5.1vw,4.5rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 2rem}
.hero h1 span{display:block;font-size:.78em;line-height:1.25;letter-spacing:-.01em;color:var(--fg);margin-top:.35rem}
.hero-heading{position:relative}
.case-study{position:absolute;left:0;bottom:calc(100% + 10px);font-family:var(--type-note);font-size:1.25rem;font-weight:400;line-height:1;letter-spacing:0;color:var(--fg)}
.chapter h2{font-size:clamp(1.875rem,3vw,2.625rem);text-wrap:balance}
.section-heading h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.2}
.contact h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.2;max-width:12ch}
.chapter p:not(.eyebrow){font-size:1rem;line-height:1.65}
.hero p.hero-intro{font-size:1.0625rem;line-height:1.65;max-width:29ch}
.function-context dd{font-size:1rem;line-height:1.6}
.text-link,.scroll-cue{font-family:var(--type-text);font-size:.9375rem;line-height:1.5;letter-spacing:0}
.scroll-cue>span{font-size:1.25rem;line-height:1;border:0;width:auto;height:auto}

.mono,.eyebrow,.stage-caption,.chapter-nav,.drawing-note,.title-block span,
.function-context dt,.annotation-lines text,.drawing-reference summary{
  font-family:var(--type-drawing);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}
.eyebrow,.function-context dt{font-size:.75rem;line-height:1.6;letter-spacing:.035em}
.stage-caption{font-size:.75rem;line-height:1.5;letter-spacing:.035em}
.chapter-nav{font-family:var(--type-text);font-size:.875rem;line-height:1.4;letter-spacing:0}
.chapter-nav a span{font-family:var(--type-drawing);font-size:.75rem;line-height:1.4;letter-spacing:0}
.drawing-note{font-size:.75rem;line-height:1.6;letter-spacing:0}
.title-block span{font-size:.75rem;line-height:1.6;letter-spacing:0;color:#d5e5f0}
.title-block span:first-child{font-size:.8125rem;letter-spacing:.045em}
.title-block b{font-weight:400}
.drawing-note>a{font-family:var(--type-text);font-size:.8125rem;line-height:1.5;letter-spacing:0}
.annotation-lines text{font-size:12px;letter-spacing:.035em}
.scene-tools,.scene-tools button{font-family:var(--type-text);font-size:.875rem;line-height:1.4}
.scene-loading{font-family:var(--type-drawing);font-size:.8125rem;line-height:1.6}
.hand-note{font-family:var(--type-note);font-size:clamp(1.375rem,1.95vw,1.75rem);font-weight:400;line-height:1.1;letter-spacing:0}
.note-two{font-size:clamp(1.375rem,1.8vw,1.625rem)}
.drag-hint{font-family:var(--type-note);font-size:1.375rem;line-height:1.1}

.drawing-reference summary{font-size:.875rem;line-height:1.5;letter-spacing:0}
.drawing-reference summary span{font-family:var(--type-text);font-size:1.375rem;line-height:1}
.reference-content{font-size:1rem;line-height:1.7}
.reference-links a{font-size:.9375rem;line-height:1.6}
.workshop-intro{font-size:1.0625rem;line-height:1.7}
.service-list h3{font-family:var(--type-display);font-size:1.25rem;font-weight:400;line-height:1.35;letter-spacing:-.01em}
.service-list summary .mono{font-size:.8125rem}
.service-list details p{font-size:1rem;line-height:1.65}
.expand{font-size:1.5rem;font-weight:400;line-height:1}
.marques{font-size:.875rem;line-height:1.6;letter-spacing:.045em}
.contact-info>p{font-size:1.125rem;line-height:1.6}
.phone-link{font-family:var(--type-display);font-size:clamp(1.75rem,2.8vw,2.25rem);font-weight:400;line-height:1.3;letter-spacing:0;font-variant-numeric:tabular-nums}
.phone-link span{font-size:.7em}
.sms-link{font-size:.9375rem;line-height:1.5;font-variant-numeric:tabular-nums}
.contact address{font-size:1rem;line-height:1.65}
footer{font-size:.875rem;line-height:1.5}
.no-script{font-size:.9375rem;line-height:1.5}

@media(max-width:1100px){
  .hero h1{font-size:clamp(2.875rem,5.4vw,3.75rem)}
  .chapter h2{font-size:2rem}
  .hand-note,.note-two{font-size:1.375rem}
}
@media(max-width:760px){
  .wordmark{font-size:1.125rem}
  .brand-ltd{font-size:.75rem;letter-spacing:0;max-width:none}
  .brand-symbol{font-size:2.375rem}
  .site-header nav{font-size:.875rem}
  .hero h1{font-size:clamp(2.25rem,10vw,2.75rem);line-height:1.1;margin:0}
  .hero-visible .scene-tools{top:calc(100svh - 309px)}
  .chapter h2,.section-heading h2{font-size:1.875rem;line-height:1.2}
  .contact h2{font-size:2rem}
  .chapter p:not(.eyebrow),.hero p.hero-intro{font-size:1rem;line-height:1.6}
  .hero p.hero-intro{position:absolute;top:calc(100svh - 260px);left:var(--pad);right:var(--pad);margin:0;max-width:36ch}
  .hero .scroll-cue{position:absolute;top:calc(100svh - 152px);left:var(--pad);margin:0}
  .function-context dd{font-size:1rem;line-height:1.6}
  .stage-caption,.stage-caption span:last-child,.eyebrow,.hero .eyebrow,.function-context dt{font-size:.75rem;letter-spacing:.02em}
  .chapter-nav{font-size:.875rem}
  .chapter-nav a span{font-size:.75rem}
  .scene-tools button{font-size:.875rem}
  .hand-note,.note-two{font-size:1.375rem;line-height:1.1}
  .workshop-intro{font-size:1rem}
  .service-list h3{font-size:1.125rem}
  .service-list details p{font-size:1rem}
  .marques{font-size:.75rem;letter-spacing:0}
  .phone-link{font-size:1.875rem}
  footer{font-size:.8125rem}
}
@media(max-width:760px) and (max-height:700px){
  .hero{padding-top:max(18svh,140px)}
  .hero-visible #car-scene{top:38%;height:25%}
}
@media(min-width:761px) and (max-height:740px){
  .hero h1{font-size:clamp(2.75rem,7.1vh,3.5rem)}
  .chapter h2{font-size:2rem}
  .chapter p:not(.eyebrow){font-size:1rem;line-height:1.5}
  .function-context dd{font-size:1rem;line-height:1.55}
}
@media print{
  .hero h1{font-size:2.75rem}
  .chapter h2,.section-heading h2,.contact h2{font-size:2rem}
}