:root {
  --tav-ink: #111831;
  --tav-ink-2: #1b2752;
  --tav-cobalt: #2856c6;
  --tav-vermilion: #ef543d;
  --tav-cream: #f4ead7;
  --tav-paper: #fffaf0;
  --tav-brass: #c99a36;
  --tav-mist: #dce5ef;
  --tav-line: rgba(17, 24, 49, .15);
  --tav-serif: 'DM Serif Display', Georgia, serif;
  --tav-sans: 'Manrope', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tav-paper); color: var(--tav-ink); font: 16px/1.65 var(--tav-sans); overflow-x: hidden; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--tav-vermilion); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, .btn, input, select, textarea { min-height: 44px; }
.btn { --bs-btn-font-size: .9rem; --bs-btn-font-weight: 800; letter-spacing: .025em; border-radius: 0; padding: .72rem 1.1rem; }
.tav-btn-red { --bs-btn-color: #fff; --bs-btn-bg: var(--tav-vermilion); --bs-btn-border-color: var(--tav-vermilion); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ca392b; --bs-btn-hover-border-color: #ca392b; }
.tav-btn-ink { --bs-btn-color: #fff; --bs-btn-bg: var(--tav-ink); --bs-btn-border-color: var(--tav-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tav-cobalt); --bs-btn-hover-border-color: var(--tav-cobalt); }
.tav-btn-outline { --bs-btn-color: var(--tav-ink); --bs-btn-border-color: var(--tav-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tav-ink); --bs-btn-hover-border-color: var(--tav-ink); }
.tav-kicker { color: var(--tav-vermilion); font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.tav-display { font-family: var(--tav-serif); font-weight: 400; line-height: .94; letter-spacing: -.035em; }
.tav-rule { width: 3.25rem; height: 3px; background: var(--tav-brass); margin: 1.25rem 0; }
.tav-section { padding: 6.5rem 0; position: relative; }
.tav-lede { color: #4f5875; font-size: 1.05rem; max-width: 44rem; }

/* header */
.tav-site-header { background: var(--tav-paper); border-bottom: 1px solid var(--tav-line); position: relative; z-index: 20; }
.tav-navbar { min-height: 76px; }
.tav-brand { display: inline-flex; align-items: center; gap: .65rem; font: 400 1.45rem/1 var(--tav-serif); letter-spacing: -.04em; text-decoration: none; }
.tav-brand:hover { color: var(--tav-ink); }
.tav-brand img { width: 39px; height: 39px; }
.tav-brand small { display: block; font: 800 .54rem/1 var(--tav-sans); letter-spacing: .12em; text-transform: uppercase; margin-top: .26rem; }
.tav-nav-link { font-size: .84rem; font-weight: 800; text-decoration: none; padding: .7rem .85rem; display: inline-block; }
.tav-contact-link { border-bottom: 2px solid var(--tav-vermilion); }
.navbar-toggler { border: 1px solid var(--tav-ink); border-radius: 0; min-width: 44px; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(40,86,198,.2); }

/* hero */
.tav-hero { background: var(--tav-ink); color: var(--tav-cream); overflow: hidden; position: relative; }
.tav-hero::before { content: ''; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(90deg, transparent 49.7%, rgba(244,234,215,.42) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.6%, rgba(244,234,215,.24) 50%, transparent 50.4%); background-size: 52px 52px; pointer-events: none; }
.tav-hero .container { position: relative; }
.tav-hero-copy { padding: 5.8rem 0 5rem; position: relative; z-index: 2; }
.tav-hero h1 { font-size: clamp(3.55rem, 7vw, 7.1rem); max-width: 760px; margin: .65rem 0 1.5rem; }
.tav-hero-copy p { max-width: 555px; color: #dbe1ef; font-size: 1.04rem; }
.tav-hero-photo { height: 100%; min-height: 580px; position: relative; clip-path: polygon(13% 0, 100% 0, 100% 89%, 73% 100%, 0 92%, 0 11%); }
.tav-hero-photo img { width: 100%; height: 100%; min-height: 580px; object-fit: cover; object-position: 48% center; filter: saturate(.87) contrast(1.04); }
.tav-hero-stitch { position: absolute; left: -8%; top: 13%; background: var(--tav-vermilion); color: #fff; padding: 1.1rem 1.25rem; width: 220px; border-left: 6px solid var(--tav-brass); transform: rotate(-3deg); font-size: .83rem; font-weight: 800; }
.tav-hero-loom { position: absolute; right: 6%; bottom: 2.5rem; width: 165px; height: 105px; background: var(--tav-cream); color: var(--tav-ink); padding: .85rem; border-bottom: 8px solid var(--tav-brass); font-size: .72rem; font-weight: 800; box-shadow: 9px 9px 0 var(--tav-cobalt); }
.tav-hero-loom span { display: block; margin-top: 5px; height: 4px; background: repeating-linear-gradient(90deg, var(--tav-ink) 0 16px, transparent 16px 25px); }

/* ribbon */
.tav-ribbon { background: var(--tav-cobalt); color: white; border-bottom: 3px solid var(--tav-brass); }
.tav-ribbon .container { min-height: 66px; display: flex; align-items: center; gap: 1.2rem; overflow: hidden; }
.tav-ribbon-label { white-space: nowrap; text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; font-weight: 800; color: #cbd8ff; }
.tav-ribbon-track { display: flex; gap: 1.2rem; min-width: max-content; font-size: .82rem; font-weight: 700; }
.tav-ribbon-dot { color: var(--tav-brass); }

/* curriculum */
.tav-thread-wrap { background: var(--tav-cream); overflow: hidden; }
.tav-thread-picker { display: grid; grid-template-columns: .9fr 1.45fr; min-height: 560px; border: 1px solid var(--tav-ink); }
.tav-thread-list { background: var(--tav-ink); padding: 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
.tav-thread-button { color: #f2e7d3; background: transparent; text-align: left; border: 1px solid rgba(244,234,215,.24); padding: .95rem; min-height: 64px; font-size: 1rem; font-weight: 800; transition: .2s ease; }
.tav-thread-button small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: #aeb8d0; margin-bottom: .2rem; }
.tav-thread-button.is-active, .tav-thread-button:hover { background: var(--tav-vermilion); color: white; border-color: var(--tav-vermilion); transform: translateX(6px); }
.tav-thread-button.is-active small { color: #ffe5dc; }
.tav-thread-detail { padding: clamp(1.5rem, 4vw, 4rem); position: relative; background: #f9f0df; }
.tav-thread-detail::after { content:''; position: absolute; right: 0; top: 0; width: 34%; height: 100%; background: repeating-linear-gradient(0deg, rgba(40,86,198,.12) 0 1px, transparent 1px 18px); pointer-events: none; }
.tav-thread-detail-inner { position: relative; z-index: 1; max-width: 585px; }
.tav-thread-number { color: var(--tav-cobalt); font: 3.8rem/1 var(--tav-serif); }
.tav-thread-detail h3 { font: 2.55rem/1 var(--tav-serif); margin: .2rem 0 .85rem; }
.tav-thread-detail p { max-width: 510px; }
.tav-thread-steps { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .62rem; }
.tav-thread-steps li { border-top: 1px solid var(--tav-line); padding-top: .62rem; font-weight: 700; font-size: .88rem; }
.tav-thread-steps b { color: var(--tav-vermilion); display: inline-block; width: 2.1rem; }

/* materials */
.tav-materials { background: #fffdf8; }
.tav-material-card { min-height: 100%; background: var(--tav-cream); padding: 1.5rem; border-top: 5px solid var(--tav-brass); position: relative; }
.tav-material-card:nth-child(2n) { border-color: var(--tav-cobalt); }
.tav-material-card:nth-child(3n) { border-color: var(--tav-vermilion); }
.tav-material-card i { color: var(--tav-cobalt); font-size: 1.65rem; }
.tav-material-card h3 { font: 1.55rem/1.15 var(--tav-serif); margin: .7rem 0; }
.tav-material-card p { color: #4e5570; font-size: .9rem; margin: 0; }
.tav-material-image { height: 100%; min-height: 315px; object-fit: cover; width: 100%; }

/* studio tables */
.tav-table-section { background: var(--tav-ink); color: #f6eddd; }
.tav-table-section .tav-lede { color: #c7d0e5; }
.tav-studio-card { height: 100%; border: 1px solid rgba(244,234,215,.25); padding: 1.4rem; position: relative; background: rgba(255,255,255,.035); }
.tav-studio-card::before { content:''; width: 2rem; height: 2rem; display: block; border: 2px solid var(--tav-brass); border-radius: 50%; margin-bottom: 1rem; }
.tav-studio-card h3 { font: 1.6rem/1.1 var(--tav-serif); }
.tav-studio-card p { color: #c8d0df; font-size: .9rem; }
.tav-studio-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--tav-brass); font-weight: 800; }
.tav-wide-img { height: 100%; min-height: 330px; object-fit: cover; object-position: center; }

/* checker */
.tav-checker { background: var(--tav-cobalt); color: white; overflow: hidden; }
.tav-checker-board { background: #fbf5e9; color: var(--tav-ink); padding: clamp(1.25rem, 4vw, 3.2rem); position: relative; border: 10px solid var(--tav-brass); box-shadow: 13px 13px 0 var(--tav-ink); }
.tav-checker-board::before { content:''; position: absolute; right: -40px; top: -40px; width: 100px; height: 100px; background: var(--tav-vermilion); clip-path: polygon(0 0,100% 0,100% 100%); }
.tav-checker-step { display: none; }
.tav-checker-step.is-current { display: block; animation: tavRise .32s ease; }
@keyframes tavRise { from { opacity: 0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.tav-checker-prompt { font: 1.95rem/1.08 var(--tav-serif); margin: .65rem 0 1.3rem; max-width: 560px; }
.tav-choice { display: flex; align-items: center; width: 100%; text-align: left; border: 1px solid var(--tav-line); background: white; color: var(--tav-ink); padding: .9rem; margin: .7rem 0; font-weight: 700; font-size: .95rem; transition: .2s; }
.tav-choice:hover, .tav-choice:focus { border-color: var(--tav-cobalt); background: #e9efff; }
.tav-choice.is-good { background: #dce9d6; border-color: #527b3a; }
.tav-choice.is-bad { background: #ffe1d9; border-color: var(--tav-vermilion); }
.tav-choice em { font-style: normal; color: var(--tav-cobalt); min-width: 2rem; }
.tav-checker-note { font-size: .8rem; color: #59617b; }
.tav-checker-side { padding: 3rem 0 0 2.5rem; }
.tav-checker-side h2 { font-size: clamp(2.6rem, 4.5vw, 4.3rem); }
.tav-checker-side p { color: #d8e3ff; max-width: 390px; }

/* swatches */
.tav-swatch-wall { background: var(--tav-paper); padding: 0 0 6.5rem; }
.tav-swatch-title { padding: 6.5rem 0 2.4rem; }
.tav-swatch-scroll { display: flex; gap: 0; overflow-x: auto; padding: 0 1rem 1rem; scroll-snap-type: x mandatory; scrollbar-color: var(--tav-brass) transparent; }
.tav-swatch { min-width: 285px; width: 285px; min-height: 385px; flex: 0 0 auto; scroll-snap-align: start; position: relative; padding: 1.25rem; display: flex; flex-direction: column; justify-content: end; overflow: hidden; color: white; }
.tav-swatch:nth-child(1) { background: var(--tav-ink); }.tav-swatch:nth-child(2) { background: var(--tav-vermilion); }.tav-swatch:nth-child(3) { background: var(--tav-brass); color: var(--tav-ink); }.tav-swatch:nth-child(4) { background: var(--tav-cobalt); }.tav-swatch:nth-child(5) { background: #718067; }.tav-swatch:nth-child(6) { background: #693753; }
.tav-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28; object-fit: cover; mix-blend-mode: multiply; }
.tav-swatch h3, .tav-swatch p, .tav-swatch span { position: relative; }
.tav-swatch h3 { font: 2rem/1 var(--tav-serif); }
.tav-swatch p { font-size: .84rem; margin: 0; }
.tav-swatch span { align-self: flex-start; background: rgba(255,255,255,.22); padding: .23rem .5rem; text-transform: uppercase; font-size: .65rem; letter-spacing: .12em; font-weight: 800; }

/* critique & projects */
.tav-critique { background: var(--tav-cream); }
.tav-critique-photo { height: 100%; min-height: 430px; object-fit: cover; }
.tav-critique-card { background: var(--tav-ink); color: var(--tav-cream); padding: clamp(2rem, 5vw, 4.3rem); height: 100%; display: flex; flex-direction: column; justify-content: center; }
.tav-critique-card p { color: #d9dfed; max-width: 630px; }
.tav-quote-mark { color: var(--tav-brass); font: 5rem/.4 var(--tav-serif); }
.tav-projects { background: #fffdf8; }
.tav-project { padding: 1.35rem; background: var(--tav-cream); border-bottom: 4px solid var(--tav-cobalt); height: 100%; }
.tav-project:nth-child(2) { border-color: var(--tav-vermilion); }.tav-project:nth-child(3) { border-color: var(--tav-brass); }
.tav-project img { aspect-ratio: 1.35/1; object-fit: cover; width: 100%; margin-bottom: 1rem; }
.tav-project h3 { font: 1.6rem/1.1 var(--tav-serif); }
.tav-project p { font-size: .88rem; color: #4f5875; }
.tav-project small { color: var(--tav-cobalt); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }

/* handoff */
.tav-handoff { background: var(--tav-ink); color: var(--tav-cream); }
.tav-handoff-photo { height: 100%; min-height: 355px; object-fit: cover; opacity: .89; }
.tav-handoff-box { padding: clamp(2rem,5vw,4.5rem); }
.tav-handoff-box p { color: #c7d0e5; }
.tav-hour { display: inline-block; color: var(--tav-brass); border: 1px solid rgba(201,154,54,.6); padding: .33rem .55rem; font-size: .74rem; font-weight: 800; margin: .2rem .2rem 0 0; }

/* faq & form */
.tav-faq { background: var(--tav-paper); }
.tav-faq-item { border-top: 1px solid var(--tav-line); }
.tav-faq-button { width: 100%; min-height: 66px; padding: 1rem .2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; background: transparent; text-align: left; color: var(--tav-ink); font: 1.25rem/1.2 var(--tav-serif); }
.tav-faq-button i { color: var(--tav-vermilion); font: 1.2rem/1 sans-serif; transition: .2s; }
.tav-faq-button[aria-expanded='true'] i { transform: rotate(45deg); }
.tav-faq-answer { display: none; max-width: 760px; padding: 0 .2rem 1.4rem; color: #4c5674; }
.tav-faq-answer.is-open { display: block; }
.tav-form-section { background: var(--tav-vermilion); color: white; }
.tav-form-card { background: var(--tav-paper); color: var(--tav-ink); padding: clamp(1.35rem,4vw,3rem); }
.tav-form-card label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.form-control, .form-select { border-radius: 0; border: 1px solid var(--tav-ink); min-height: 48px; font-size: 16px; color: var(--tav-ink); }
.form-control:focus, .form-select:focus { border-color: var(--tav-cobalt); box-shadow: 0 0 0 .2rem rgba(40,86,198,.2); }
textarea.form-control { min-height: 132px; }
.tav-form-side { padding: 2rem 0 0 3rem; }
.tav-form-side h2 { font-size: clamp(2.7rem, 5vw, 4.5rem); }
.tav-form-side p { color: #ffdfd8; max-width: 440px; }
.tav-form-success { display: none; color: #255b32; background: #dcebd7; border-left: 4px solid #255b32; padding: .8rem; font-size: .9rem; font-weight: 700; }

/* footer */
.tav-site-footer { background: #0a0f20; color: #d8deeb; padding: 4rem 0 1.5rem; }
.tav-footer-mark { display: flex; align-items: center; gap: .8rem; font: 1.65rem/1 var(--tav-serif); color: var(--tav-cream); text-decoration: none; }
.tav-footer-mark img { width: 42px; }.tav-footer-mark:hover { color: var(--tav-cream); }
.tav-footer-meta { color: #9ca8c1; font-size: .82rem; max-width: 340px; margin-top: 1rem; }
.tav-footer-heading { color: var(--tav-brass); text-transform: uppercase; letter-spacing: .12em; font-size: .67rem; font-weight: 800; }
.tav-footer-link { display: block; color: #d8deeb; text-decoration: none; padding: .24rem 0; font-size: .88rem; }
.tav-footer-contact { text-decoration: underline; text-decoration-color: var(--tav-vermilion); text-underline-offset: 5px; }
.tav-footer-bottom { border-top: 1px solid rgba(255,255,255,.16); margin-top: 2.5rem; padding-top: 1rem; color: #8390aa; font-size: .73rem; }

/* legal & 404 */
.tav-page-hero { padding: 4.5rem 0 3.4rem; background: var(--tav-ink); color: var(--tav-cream); position: relative; overflow: hidden; }
.tav-page-hero::after { content:''; position:absolute; right:7%; bottom:-90px; width:250px; height:250px; border: 35px solid var(--tav-cobalt); border-radius: 50%; opacity: .8; }
.tav-page-hero .container { position:relative; z-index:1; }.tav-page-hero h1 { font-size: clamp(3.2rem,6vw,5.5rem); margin:.5rem 0; }.tav-page-hero p { color:#ccd5e7; max-width: 680px; }
.tav-legal { max-width: 880px; padding: 4.5rem 1rem 6.5rem; }.tav-legal h2 { font: 2rem/1.2 var(--tav-serif); margin: 2.7rem 0 .75rem; }.tav-legal h3 { font: 1.3rem/1.2 var(--tav-serif); margin: 1.8rem 0 .45rem; }.tav-legal p,.tav-legal li { color: #3f4968; }.tav-legal li { margin-bottom: .5rem; }
.tav-legal-note { background: var(--tav-cream); padding: 1.2rem; border-left: 5px solid var(--tav-brass); margin: 1.3rem 0; }
.tav-404 { min-height: 65vh; display:flex; align-items:center; background: var(--tav-cream); }.tav-404-num { color:var(--tav-cobalt); font: clamp(7rem,20vw,14rem)/.75 var(--tav-serif); }

@media (max-width: 991.98px) {
  .tav-navbar { min-height: 68px; }.tav-nav-link { display:block; padding:.8rem 0; }.tav-contact-link { display:inline-block; }
  .tav-hero-copy { padding: 4rem 0 2rem; }.tav-hero-photo,.tav-hero-photo img { min-height: 430px; }.tav-hero-photo { margin: 0 -12px; }.tav-hero-stitch { left: 5%; }.tav-hero-loom { right: 9%; }
  .tav-thread-picker { grid-template-columns: 1fr; }.tav-thread-list { display:grid; grid-template-columns: 1fr 1fr; }.tav-thread-button.is-active,.tav-thread-button:hover { transform:none; }
  .tav-checker-side, .tav-form-side { padding: 0 0 2rem; }.tav-checker .row { flex-direction:column-reverse; }
  .tav-critique-photo { min-height:340px; }.tav-handoff-photo { min-height: 330px; }
}
@media (max-width: 575.98px) {
  .tav-section { padding: 4.3rem 0; }.tav-hero h1 { font-size: 3.45rem; }.tav-hero-photo,.tav-hero-photo img { min-height: 360px; }.tav-hero-loom { width: 145px; bottom: 1.8rem; }.tav-hero-stitch { width: 190px; font-size: .75rem; }
  .tav-ribbon .container { gap: .75rem; }.tav-ribbon-track { gap: .75rem; font-size: .7rem; }
  .tav-thread-list { grid-template-columns: 1fr; }.tav-thread-detail h3 { font-size:2.15rem; }.tav-thread-number { font-size:3rem; }
  .tav-checker-board { border-width: 6px; box-shadow: 7px 7px 0 var(--tav-ink); }.tav-checker-prompt { font-size:1.7rem; }.tav-choice { font-size:.88rem; }
  .tav-swatch { min-width: 250px; width:250px; min-height:345px; }.tav-critique-card { min-height:410px; }.tav-page-hero { padding: 3.6rem 0 3rem; }
  /* The swatch rail remains scrollable inside itself; decorative corners stay inside the page. */
  .tav-ribbon, .tav-checker, .tav-swatch-wall { overflow: hidden; }
  .tav-checker-board { overflow: hidden; }
  .tav-checker-board::before { right: 0; top: 0; }
  .tav-ribbon .container { overflow: hidden; }
  .tav-checker .row, .tav-swatch-title .row, .tav-form-section .row { --bs-gutter-x: 1.5rem; width: 100%; margin-left: 0; margin-right: 0; }
}
/* Release correction: the pattern wall becomes a visible grid instead of a clipped rail below desktop. */
@media (max-width: 991.98px) {
  .tav-swatch-scroll { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; padding:0; scroll-snap-type:none; }
  .tav-swatch { min-width:0; width:auto; min-height:340px; }
}
@media (max-width: 575.98px) {
  .tav-swatch-scroll { grid-template-columns:1fr; }
  .tav-swatch { min-height:320px; }
}
/* Release correction: status items remain visible and within the mobile canvas. */
@media (max-width: 575.98px) {
  .tav-ribbon .container { display:block; min-height:0; padding-top:.7rem; padding-bottom:.75rem; overflow:visible; }
  .tav-ribbon-label { display:block; margin-bottom:.45rem; }
  .tav-ribbon-track { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; width:100%; gap:.45rem .7rem; font-size:.68rem; }
  .tav-ribbon-track span { min-width:0; overflow-wrap:anywhere; }
}