/* SylvanSet grain-station stylesheet (sv- system) */
:root {
  --sv-bark: #2B1D12;
  --sv-bark-2: #3C2A1A;
  --sv-bark-3: #503823;
  --sv-paper: #F7F2E8;
  --sv-card: #FCF9F2;
  --sv-oak: #8A5A2B;
  --sv-oak-deep: #6E451F;
  --sv-maple: #C9A06C;
  --sv-rule: #E0D5C2;
  --sv-mute: #6E5D4B;
  --sv-rail-w: 246px;
  --sv-head: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --sv-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sv-mono: "Cascadia Mono", Consolas, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--sv-paper); color: var(--sv-bark); font: 16px/1.65 var(--sv-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sv-oak-deep); text-underline-offset: 3px; }
a:hover { color: var(--sv-bark); }
:focus-visible { outline: 2px solid var(--sv-oak); outline-offset: 2px; }

.sv-skip { position: absolute; top: 8px; left: 8px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); background: var(--sv-bark); color: var(--sv-paper); padding: 8px 12px; z-index: 50; }
.sv-skip:focus { width: auto; height: auto; clip-path: none; }
.sv-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.sv-code { font-family: var(--sv-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--sv-oak-deep); background: var(--sv-card); border: 1px solid var(--sv-rule); padding: 1px 6px; white-space: nowrap; }

/* frame */
.sv-frame { display: grid; grid-template-columns: var(--sv-rail-w) minmax(0, 1fr); min-height: 100vh; }
.sv-rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sv-bark); color: #E9DDCC; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: #6E4E33 transparent; }
.sv-rail a { color: #E9DDCC; text-decoration: none; }
.sv-rail a:hover { color: #fff; text-decoration: underline; }
.sv-brand { display: flex; align-items: center; gap: 10px; font: 600 1.24rem/1 var(--sv-head); }
.sv-brand b { color: var(--sv-maple); font-weight: 700; }
.sv-brand img { background: var(--sv-paper); border-radius: 3px; padding: 2px; }
.sv-index { border-top: 1px solid rgba(233,221,204,.16); padding-top: 8px; }
.sv-index summary { display: none; }
.sv-index__group { padding: 8px 0 2px; }
.sv-index__label { margin: 0 0 3px; font: 600 .68rem/1 var(--sv-mono); letter-spacing: .16em; text-transform: uppercase; color: #B99B72; }
.sv-index ul { list-style: none; margin: 0; padding: 0; }
.sv-index li a { display: block; padding: 3px 0 3px 9px; font-size: .88rem; border-left: 2px solid transparent; }
.sv-index li a[aria-current="page"] { border-left-color: var(--sv-maple); color: #fff; font-weight: 600; }
.sv-rail__foot { margin-top: auto; border-top: 1px solid rgba(233,221,204,.16); padding-top: 10px; }
.sv-rail__cta { display: block; text-align: center; background: var(--sv-oak); color: #fff !important; font: 600 .9rem/1 var(--sv-head); letter-spacing: .04em; padding: 11px 10px; }
.sv-rail__cta:hover { background: var(--sv-maple); color: var(--sv-bark) !important; text-decoration: none !important; }
.sv-rail__cta--top { display: none; }
.sv-rail__mail { font-size: .76rem; margin: 9px 0 0; word-break: break-all; }

.sv-main { min-width: 0; padding: 0 clamp(18px, 4vw, 54px); }

/* page head */
.sv-head, .sv-cover { max-width: 1060px; padding: 42px 0 24px; border-bottom: 1px solid var(--sv-rule); }
.sv-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; font-size: .83rem; color: var(--sv-mute); }
.sv-crumb a { color: var(--sv-mute); }
h1, h2, h3 { font-family: var(--sv-head); font-weight: 600; line-height: 1.14; color: var(--sv-bark); }
h1 { font-size: clamp(1.95rem, 3.4vw, 2.9rem); margin: 0 0 13px; max-width: 23ch; }
.sv-cover h1 { max-width: 19ch; font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: 1.5rem; margin: 2rem 0 .65rem; }
h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.sv-lede { font-size: 1.1rem; max-width: 64ch; margin: 0 0 6px; color: var(--sv-bark-2); }
.sv-plate { margin: 20px 0 0; border: 1px solid var(--sv-rule); background: var(--sv-card); padding: 8px; }
.sv-plate img { width: 100%; aspect-ratio: 3 / 1.25; object-fit: cover; }

/* spec bar (home) */
.sv-specbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; margin: 24px 0 16px; border: 1px solid var(--sv-bark); background: var(--sv-card); }
.sv-specbar label { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-right: 1px solid var(--sv-rule); }
.sv-specbar__k { font: .7rem/1 var(--sv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sv-mute); }
.sv-specbar select { font: 500 1rem var(--sv-body); color: var(--sv-bark); border: 0; background: transparent; padding: 3px 0; }
.sv-specbar .sv-btn { margin: 10px; align-self: center; }
.sv-marks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sv-marks li { border-top: 3px solid var(--sv-oak); padding-top: 7px; font-size: .9rem; display: flex; gap: 9px; align-items: baseline; }

.sv-btn { display: inline-block; background: var(--sv-oak); color: #fff; border: 0; font: 600 .96rem/1 var(--sv-head); letter-spacing: .04em; padding: 13px 19px; text-decoration: none; cursor: pointer; }
.sv-btn:hover { background: var(--sv-bark); color: #fff; }
.sv-small { font-size: .87rem; color: var(--sv-mute); }

/* bands */
.sv-band { max-width: 1060px; padding: 32px 0; border-bottom: 1px solid var(--sv-rule); }
.sv-band__head { display: flex; gap: 13px; align-items: baseline; }
.sv-band__head h2 { margin: 0 0 11px; }
.sv-band__intro { max-width: 66ch; margin: 0 0 16px; }

/* grain station */
.sv-grains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.sv-grain { display: grid; grid-template-rows: 96px auto auto auto; gap: 6px; text-decoration: none; color: var(--sv-bark); background: var(--sv-card); border: 1px solid var(--sv-rule); padding: 8px 8px 11px; height: 100%; }
.sv-grain:hover { border-color: var(--sv-bark); color: var(--sv-bark); }
.sv-grain .sv-code { justify-self: start; }
.sv-grain__stick { display: block; border: 1px solid rgba(43,29,18,.2); clip-path: polygon(0 0, 100% 0, 100% 88%, 95% 100%, 0 100%); }
.sv-grain__name { font: 600 .98rem/1.25 var(--sv-head); }
.sv-grain__use { font-size: .82rem; color: var(--sv-mute); line-height: 1.4; }
.sv-grain--teak .sv-grain__stick { background: repeating-linear-gradient(90deg, #7A4A20 0 9px, #85552A 9px 11px, #7A4A20 11px 21px); }
.sv-grain--beech .sv-grain__stick { background: repeating-linear-gradient(90deg, #D8B98C 0 5px, #DEBf95 5px 6px); }
.sv-grain--oak .sv-grain__stick { background: repeating-linear-gradient(0deg, #9A6B36 0 3px, #A5763F 3px 7px, #8F6230 7px 9px); }
.sv-grain--walnut .sv-grain__stick { background: linear-gradient(93deg, #4A3018 0 30%, #5C3D20 30% 46%, #4A3018 46% 70%, #63421f 70% 82%, #4A3018 82% 100%); }
.sv-grain--acacia .sv-grain__stick { background: repeating-linear-gradient(88deg, #5F3A1E 0 7px, #8A5A2B 7px 9px, #3E2712 9px 15px); }
.sv-grain--olive .sv-grain__stick { background: radial-gradient(circle at 28% 40%, #C9A96B 0 22%, transparent 46%), radial-gradient(circle at 72% 62%, #B08D4F 0 26%, transparent 52%), #D3B57E; }
.sv-grain--rubber .sv-grain__stick { background: repeating-linear-gradient(90deg, #E8DCC2 0 8px, #E2D5B9 8px 9px); }
.sv-grain--bamboo .sv-grain__stick { background: repeating-linear-gradient(90deg, #D3C078 0 12px, transparent 12px 13px, #C4B268 13px 25px, transparent 25px 26px), #DCCB86; }

/* tables */
.sv-ledger { width: 100%; border-collapse: collapse; margin: 1rem 0 1.3rem; font-size: .94rem; background: var(--sv-card); }
.sv-ledger th, .sv-ledger td { text-align: left; vertical-align: top; padding: 9px 11px; border-bottom: 1px solid var(--sv-rule); }
.sv-ledger thead th { font: 600 .72rem/1.3 var(--sv-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--sv-mute); border-bottom: 2px solid var(--sv-bark); }
.sv-ledger--index th { width: 30%; font-family: var(--sv-head); font-size: 1.06rem; }

/* sheet */
.sv-sheet { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 38px; padding: 28px 0 8px; }
.sv-sheet--note { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sv-prose { max-width: 72ch; min-width: 0; }
.sv-prose p, .sv-prose li { margin: 0 0 .9rem; }
.sv-prose .sv-ledger { display: block; overflow-x: auto; }
.sv-prose ul, .sv-prose ol { padding-left: 1.25rem; }
.sv-byline { font: .77rem var(--sv-mono); letter-spacing: .05em; color: var(--sv-mute); text-transform: uppercase; }
.sv-facts { position: sticky; top: 18px; align-self: start; margin: 0; background: var(--sv-card); border: 1px solid var(--sv-rule); border-top: 4px solid var(--sv-oak); padding: 13px 15px; font-size: .89rem; }
.sv-facts dt { font: 600 .68rem/1.3 var(--sv-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--sv-mute); margin-top: 9px; }
.sv-facts dt:first-child { margin-top: 0; }
.sv-facts dd { margin: 2px 0 0; }
.sv-note { border-left: 4px solid var(--sv-oak); background: var(--sv-card); padding: 11px 15px; margin: 1.2rem 0; font-size: .94rem; }
.sv-steps { counter-reset: svn; list-style: none; padding: 0 !important; margin: 0 0 1rem; }
.sv-steps > li { counter-increment: svn; position: relative; padding: 0 0 11px 50px; min-height: 38px; }
.sv-steps > li::before { content: counter(svn, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 600 .8rem/1 var(--sv-mono); border: 1px solid var(--sv-bark); padding: 6px 6px; background: var(--sv-card); }

/* split blocks */
.sv-duo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--sv-bark); }
.sv-duo > article { padding: 17px 19px; background: var(--sv-card); }
.sv-duo > article + article { border-left: 1px solid var(--sv-bark); }
.sv-buyers { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 28px; }
.sv-buyers p { margin: 0; padding: 9px 0; border-top: 1px dashed var(--sv-rule); }

/* notes list */
.sv-notes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.sv-notes a { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--sv-rule); text-decoration: none; color: var(--sv-bark); }
.sv-notes a:hover b { text-decoration: underline; }
.sv-notes b { font: 600 1rem/1.3 var(--sv-head); }
.sv-notes span { font-size: .85rem; color: var(--sv-mute); }
.sv-toc ul { list-style: none; padding: 14px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sv-toc a { display: inline-block; border: 1px solid var(--sv-bark); padding: 6px 10px; font-size: .87rem; text-decoration: none; color: var(--sv-bark); background: var(--sv-card); }

/* faq, next, cue */
.sv-qa-list { max-width: 820px; padding: 8px 0 18px; }
.sv-qa { border-top: 1px solid var(--sv-rule); }
.sv-qa summary { cursor: pointer; padding: 11px 0; font: 600 1.02rem/1.35 var(--sv-head); list-style: none; }
.sv-qa summary::before { content: "+"; font-family: var(--sv-mono); display: inline-block; width: 1.4em; color: var(--sv-oak); }
.sv-qa[open] summary::before { content: "-"; }
.sv-qa p { margin: 0 0 13px 1.4em; }
.sv-next { max-width: 1060px; padding: 8px 0 22px; }
.sv-next ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.sv-next a { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 11px 13px; border: 1px solid var(--sv-rule); background: var(--sv-card); text-decoration: none; color: var(--sv-bark); font: 600 .96rem/1.3 var(--sv-head); }
.sv-next a:hover { border-color: var(--sv-bark); }
.sv-tag { font: 500 .66rem/1 var(--sv-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--sv-mute); }
.sv-cue { max-width: 1060px; display: flex; gap: 22px; align-items: center; justify-content: space-between; margin: 18px 0 38px; padding: 20px 22px; background: var(--sv-bark); color: #EFE6D6; }
.sv-cue p { margin: 0; max-width: 62ch; }
.sv-cue .sv-btn { background: var(--sv-maple); color: var(--sv-bark); flex: none; }
.sv-cue .sv-btn:hover { background: #fff; }

/* RFQ */
.sv-rfq__step { border: 1px solid var(--sv-rule); background: var(--sv-card); margin: 0 0 15px; padding: 13px 17px 17px; }
.sv-rfq__step legend { font: 600 1.05rem var(--sv-head); padding: 0 6px; }
.sv-rfq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 11px 15px; }
.sv-rfq label { display: flex; flex-direction: column; gap: 5px; font-size: .89rem; font-weight: 600; }
.sv-rfq input[type=text], .sv-rfq input[type=email], .sv-rfq select, .sv-rfq textarea { font: 400 .97rem var(--sv-body); color: var(--sv-bark); padding: 9px 10px; border: 1px solid #B9A88C; background: #fff; border-radius: 0; width: 100%; }
.sv-rfq__wide { margin-top: 11px; }
.sv-rfq__checks { display: flex; flex-wrap: wrap; gap: 8px 17px; margin: 13px 0 0; }
.sv-rfq__checks > span { width: 100%; font-weight: 600; font-size: .89rem; }
.sv-rfq__checks label { flex-direction: row; align-items: center; gap: 7px; font-weight: 400; }
.sv-rfq__send { display: grid; gap: 6px; }
.sv-rfq__send .sv-btn { justify-self: start; }
.sv-rfq__status { font-weight: 600; min-height: 1.4em; }
.sv-rfq__status[data-state="ok"] { color: #3A5E2A; }
.sv-rfq__status[data-state="err"] { color: #8E3212; }
.sv-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* colophon */
.sv-colophon { max-width: 1060px; border-top: 4px solid var(--sv-bark); padding: 24px 0 28px; font-size: .89rem; }
.sv-colophon__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.sv-colophon__name { font: 600 1.18rem var(--sv-head); margin-top: 0; }
.sv-colophon__name b { color: var(--sv-oak-deep); }
.sv-colophon__h { font: 600 .7rem var(--sv-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--sv-mute); margin-top: 0; }
.sv-colophon__legal { border-top: 1px solid var(--sv-rule); padding-top: 11px; color: var(--sv-mute); font-size: .81rem; }

/* responsive */
@media (max-width: 1100px) {
  .sv-grains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-sheet { grid-template-columns: minmax(0, 1fr); }
  .sv-facts { position: static; }
  .sv-next ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sv-frame { grid-template-columns: minmax(0, 1fr); }
  .sv-rail { position: sticky; top: 0; z-index: 20; height: auto; max-height: 100vh; padding: 10px 15px; gap: 0; }
  .sv-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .sv-rail__cta--top { display: inline-block; padding: 8px 11px; font-size: .82rem; }
  .sv-rail__foot { display: none; }
  .sv-index summary { display: block; cursor: pointer; font: 600 .74rem var(--sv-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--sv-maple); padding: 9px 0 4px; list-style: none; }
  .sv-index summary::after { content: " +"; }
  .sv-index[open] summary::after { content: " -"; }
  .sv-index:not([open]) .sv-index__body { display: none; }
  .sv-index__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; padding-bottom: 9px; }
  .sv-specbar { grid-template-columns: minmax(0, 1fr); }
  .sv-specbar label { border-right: 0; border-bottom: 1px solid var(--sv-rule); }
  .sv-specbar .sv-btn { justify-self: stretch; text-align: center; }
  .sv-marks, .sv-duo, .sv-buyers, .sv-notes, .sv-colophon__cols { grid-template-columns: minmax(0, 1fr); }
  .sv-duo > article + article { border-left: 0; border-top: 1px solid var(--sv-bark); }
  .sv-cue { flex-direction: column; align-items: flex-start; }
  .sv-next ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .sv-grains { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
  .sv-grain { grid-template-rows: 70px auto auto auto; }
  .sv-grain__use { display: none; }
  .sv-index__body { grid-template-columns: 1fr; }
}