:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --paper-deep: #eae5d8;
  --ink: #272b24;
  --muted: #676a60;
  --line: #d4d0c4;
  --olive: #526246;
  --olive-dark: #35452e;
  --clay: #bc6748;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  scrollbar-color: var(--olive) var(--paper-deep);
}

*, *::before, *::after { box-sizing: border-box; }
::selection { background: #c9d0b7; color: var(--ink); }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .22em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--clay); outline-offset: 4px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  height: 84px; max-width: 1440px; margin: auto; padding: 0 6.1%;
  display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line);
}
.wordmark { font: 600 35px/.9 var(--serif); letter-spacing: -.075em; text-decoration: none; }
.wordmark-dot { color: var(--clay); }
.header-nav { display: flex; gap: 38px; margin-left: 55px; }
.header-nav a, .header-cta { text-decoration: none; font-size: 13px; font-weight: 550; }
.header-nav a { color: var(--muted); transition: color .2s ease; }
.header-nav a:hover { color: var(--ink); }
.header-cta { border-bottom: 1px solid var(--olive); padding: 9px 0; color: var(--olive-dark); }
.header-cta span { margin-left: 12px; }

.hero {
  min-height: 574px; max-width: 1440px; margin: auto; padding: 72px 6.1% 66px;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 8%; align-items: center; position: relative;
}
.hero-copy { padding: 0 0 15px 3%; position: relative; z-index: 1; }
h1, h2, h3, p, figure { margin-top: 0; }
.hero h1 { font: 400 clamp(66px, 7.4vw, 106px)/.92 var(--serif); letter-spacing: -.065em; margin: 0 0 27px; }
.hero h1 em { font-weight: 400; color: var(--olive); }
.hero-copy > p { max-width: 390px; font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 30px; }
.hero-link { display: inline-flex; gap: 20px; align-items: center; color: var(--olive-dark); font-size: 13px; font-weight: 650; text-decoration-thickness: 1px; text-decoration-color: #909a83; text-underline-offset: 5px; }
.hero-link span { font-size: 18px; line-height: 1; }
.hero-image { margin: 0; position: relative; height: 405px; }
.hero-image::before { content: ''; position: absolute; width: 105px; height: 105px; border: 1px solid #9eaa8e; border-radius: 50%; top: -31px; left: -31px; }
.hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; position: relative; }
.hero-image figcaption { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-top: 11px; }
.hero-note { position: absolute; left: 2.2%; bottom: 48px; font: italic 16px/1.2 var(--serif); color: var(--clay); transform: rotate(-8deg); }

.workshops { padding: 86px 7.4% 105px; background: #eeece3; }
.section-heading { display: flex; justify-content: space-between; align-items: end; max-width: 1160px; margin: 0 auto 33px; }
.section-heading h2, .about h2 { font: 400 clamp(39px, 4vw, 55px)/1.03 var(--serif); letter-spacing: -.05em; margin: 0 0 13px; }
.section-intro { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.6; }
.results-count { color: var(--muted); font-size: 12px; margin: 0 0 3px; white-space: nowrap; }
.browse-tools { max-width: 1160px; margin: 0 auto 22px; padding: 13px 0; border-top: 1px solid #cbc8bc; border-bottom: 1px solid #cbc8bc; display: flex; align-items: center; gap: 12px; }
.search-field { display: flex; align-items: center; gap: 10px; width: min(390px, 45%); height: 44px; padding: 0 13px; background: var(--paper); border: 1px solid #d7d4c9; }
.search-field svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; flex: none; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.search-field input::placeholder { color: #74766d; opacity: 1; }
.filter-field { margin-left: auto; }
.filter-field select { appearance: none; min-width: 156px; height: 44px; padding: 0 34px 0 13px; border: 1px solid #d7d4c9; border-radius: 0; color: var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23526246' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 13px center; font-size: 12px; cursor: pointer; }
.saved-filter { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 13px; gap: 8px; border: 1px solid #d7d4c9; background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.saved-filter svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.saved-filter[aria-pressed="true"] { background: var(--olive); color: white; border-color: var(--olive); }
.saved-count { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(82,98,70,.12); font-size: 10px; }
.saved-filter[aria-pressed="true"] .saved-count { background: rgba(255,255,255,.2); }
.workshop-list { max-width: 1160px; margin: auto; }
.workshop-row { min-height: 196px; display: grid; grid-template-columns: 226px minmax(180px, 1fr) 170px 98px 38px; gap: 25px; align-items: center; padding: 20px 0; border-bottom: 1px solid #cbc8bc; }
.workshop-row:first-child { border-top: 1px solid #cbc8bc; }
.row-image { height: 154px; display: block; overflow: hidden; background: var(--paper-deep); }
.row-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.workshop-row:hover .row-image img { transform: scale(1.035); }
.row-copy { align-self: center; }
.row-category { color: var(--olive-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; margin: 0 0 9px; }
.row-title { font: 400 30px/1.1 var(--serif); letter-spacing: -.035em; margin: 0 0 9px; }
.row-title button { padding: 0; color: inherit; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; }
.row-title button:hover { color: var(--olive); }
.row-description { color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 430px; margin: 0; }
.row-date { font-size: 12px; line-height: 1.7; color: var(--muted); }
.row-date strong { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
.row-price { align-self: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.row-open { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #b8b7aa; border-radius: 50%; background: transparent; color: var(--olive-dark); cursor: pointer; font-size: 17px; transition: background .2s, color .2s; }
.row-open:hover { background: var(--olive); color: white; border-color: var(--olive); }
.empty-state { max-width: 1160px; margin: 0 auto; padding: 70px 24px 78px; text-align: center; border-top: 1px solid #cbc8bc; }
.empty-state[hidden] { display: none; }
.empty-mark { width: 32px; height: 32px; color: var(--clay); }
.empty-state h3 { font: 400 34px/1.1 var(--serif); margin: 12px 0 9px; }
.empty-state p { color: var(--muted); font-size: 13px; margin: 0 0 19px; }
.text-button { background: none; border: 0; border-bottom: 1px solid #919b84; padding: 4px 0; color: var(--olive-dark); cursor: pointer; font-size: 13px; }

.about { max-width: 1440px; margin: auto; padding: 108px 13% 115px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 12%; }
.about-image { height: 340px; overflow: hidden; }
.about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-copy h2 { margin-bottom: 19px; }
.about-copy p { max-width: 410px; color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 25px; }
.site-footer { min-height: 108px; padding: 22px 6.1%; background: #394630; color: #f5f2e9; display: flex; align-items: center; justify-content: space-between; }
.site-footer .wordmark-dot { color: #e6a083; }
.site-footer p { margin: 0; color: #d5d8cb; font: italic 15px var(--serif); }
.back-top { font-size: 12px; text-decoration-color: #aab49a; text-underline-offset: 5px; }

.detail-dialog { width: min(780px, calc(100vw - 36px)); max-width: none; max-height: min(880px, calc(100dvh - 40px)); padding: 0; border: 0; color: var(--ink); background: var(--paper); box-shadow: 0 24px 90px rgba(25,31,22,.28); overflow: auto; }
.detail-dialog::backdrop { background: rgba(28,34,26,.58); }
.detail-close { position: absolute; z-index: 2; top: 17px; right: 17px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); border: 1px solid rgba(39,43,36,.25); border-radius: 50%; background: rgba(245,242,233,.94); cursor: pointer; }
.detail-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.detail-hero { height: 285px; position: relative; background: var(--paper-deep); }
.detail-hero img { width: 100%; height: 100%; display: block; object-fit: cover; }
.detail-category { position: absolute; left: 28px; bottom: 22px; margin: 0; padding: 9px 12px; background: var(--paper); color: var(--olive-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; }
.detail-body { padding: 28px 42px 38px; }
.detail-body h2 { font: 400 clamp(37px, 5vw, 53px)/1 var(--serif); letter-spacing: -.05em; margin: 0 0 16px; }
.detail-description { color: var(--muted); max-width: 62ch; font-size: 14px; line-height: 1.75; margin: 0 0 25px; }
.detail-facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 24px; }
.detail-fact { padding: 15px 5px 14px 0; }
.detail-fact:nth-child(odd) { border-right: 1px solid var(--line); }
.detail-fact:nth-child(even) { padding-left: 23px; }
.detail-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
.detail-fact dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.detail-fact dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.detail-price { font: 400 28px/1 var(--serif); }
.save-button { min-height: 47px; padding: 0 19px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--olive); color: white; background: var(--olive); cursor: pointer; font-size: 12px; font-weight: 600; transition: background .18s; }
.save-button:hover { background: var(--olive-dark); }
.save-button[aria-pressed="true"] { background: transparent; color: var(--olive-dark); }
.save-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (min-width: 1500px) { .hero { min-height: 630px; } }
@media (max-width: 900px) {
  .site-header { padding: 0 5%; }
  .hero { padding: 60px 5% 65px; gap: 5%; grid-template-columns: 1fr .9fr; }
  .hero h1 { font-size: clamp(62px, 8vw, 83px); }
  .hero-image { height: 345px; }
  .hero-note { display: none; }
  .workshops { padding-left: 5%; padding-right: 5%; }
  .workshop-row { grid-template-columns: 175px minmax(170px,1fr) 128px 76px 35px; gap: 17px; }
  .row-image { height: 135px; }
  .row-title { font-size: 26px; }
  .about { padding-left: 8%; padding-right: 8%; gap: 8%; }
}
@media (max-width: 640px) {
  .site-header { height: 66px; padding: 0 21px; }
  .wordmark { font-size: 31px; }
  .header-nav { display: none; }
  .header-cta { font-size: 11px; padding: 8px 0; }
  .header-cta span { margin-left: 5px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding: 47px 22px 55px; gap: 34px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(68px, 17vw, 84px); margin-bottom: 18px; }
  .hero-copy > p { font-size: 14px; line-height: 1.7; max-width: 340px; margin-bottom: 22px; }
  .hero-image { height: 255px; margin: 0 0 13px 15px; }
  .hero-image::before { width: 68px; height: 68px; top: -17px; left: -17px; }
  .hero-image figcaption { font-size: 10px; }
  .workshops { padding: 58px 21px 68px; }
  .section-heading { display: block; margin-bottom: 21px; }
  .section-heading h2 { font-size: 43px; max-width: 350px; margin-bottom: 10px; }
  .section-intro { font-size: 12px; max-width: 320px; }
  .results-count { margin-top: 14px; }
  .browse-tools { margin-bottom: 12px; gap: 8px; flex-wrap: wrap; padding: 11px 0; }
  .search-field { width: 100%; height: 43px; }
  .filter-field { margin-left: 0; flex: 1; }
  .filter-field select { width: 100%; min-width: 0; }
  .saved-filter { flex: 1; }
  .workshop-row { position: relative; min-height: 0; grid-template-columns: 106px minmax(0,1fr) 33px; grid-template-areas: "image copy action" "image copy ." "image date price"; grid-template-rows: auto auto 1fr; gap: 0 14px; align-items: start; padding: 17px 0; }
  .row-image { width: 106px; height: 113px; grid-area: image; }
  .row-copy { grid-area: copy; min-width: 0; padding-top: 2px; }
  .row-category { font-size: 9px; margin-bottom: 6px; }
  .row-title { font-size: 22px; line-height: 1.04; margin-bottom: 6px; }
  .row-description { font-size: 11px; line-height: 1.45; margin-top: 8px; }
  .row-date { grid-area: date; align-self: end; font-size: 10px; line-height: 1.4; margin-top: 8px; }
  .row-date strong { display: inline; font-size: 10px; margin-right: 4px; }
  .row-price { grid-area: price; justify-self: end; align-self: end; font-size: 11px; }
  .row-open { grid-area: action; width: 32px; height: 32px; font-size: 15px; }
  .about { padding: 68px 22px 74px; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 28px; }
  .about h2 { font-size: 43px; }
  .about-copy p { font-size: 13px; }
  .about-image { height: 230px; margin-left: 19px; }
  .site-footer { padding: 24px 21px; display: grid; grid-template-columns: 1fr auto; gap: 13px; }
  .site-footer .wordmark { grid-column: 1; grid-row: 1; }
  .site-footer p { grid-column: 1 / 3; grid-row: 2; font-size: 13px; }
  .back-top { grid-column: 2; grid-row: 1; }
  .detail-dialog { width: 100%; max-width: none; max-height: calc(100dvh - 14px); margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .detail-dialog::backdrop { background: rgba(28,34,26,.5); }
  .detail-hero { height: 218px; }
  .detail-category { left: 19px; bottom: 15px; }
  .detail-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .detail-body { padding: 24px 22px 29px; }
  .detail-body h2 { font-size: 40px; padding-right: 20px; }
  .detail-description { font-size: 13px; line-height: 1.65; margin-bottom: 19px; }
  .detail-fact { padding-top: 12px; padding-bottom: 12px; }
  .detail-fact:nth-child(even) { padding-left: 14px; }
  .detail-fact dd { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
