/* Appalachian Stone Company, Inc.
   Everything below the first screen, plus the controls on the wall.
   All the colors, fonts, and sizes are custom properties at the top of the style block in index.html. Change them there,
   and the first screen and this file both follow. They live there so the phone number can show before this file arrives. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

/* ---- The wall's own controls. */
#hero.hammer {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(-38 15 15)'%3E%3Crect x='13.4' y='7' width='3.4' height='20' rx='1.2' fill='%238a5a2e' stroke='%2322180e' stroke-width='1'/%3E%3Crect x='5.5' y='2.5' width='19' height='8.5' rx='1.4' fill='%234a4d52' stroke='%23111' stroke-width='1'/%3E%3Crect x='6.8' y='3.6' width='16.4' height='1.8' fill='%2395999e'/%3E%3C/g%3E%3C/svg%3E") 6 7, pointer;
}
#hero.through { cursor: pointer; }

/* The keystone and its tag: a real button with nothing to see, so it works with a tap, a drag, a click, or the keyboard. */
#pull { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 6px; touch-action: none; -webkit-tap-highlight-color: transparent; }

#putBack {
  position: absolute; z-index: 4; transform: translateX(-50%); min-height: 54px; padding: 8px 24px;
  border: 2px solid var(--ink); border-radius: var(--button-radius); background: var(--cream); color: var(--ink);
  font: 700 20px/1.1 var(--slab); white-space: nowrap; box-shadow: 0 3px 0 var(--ink), 0 6px 12px rgba(0, 0, 0, 0.3); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#putBack:hover { background: var(--paper); }
#putBack:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ---- The owner's strip: real stone swatches with plain words on them. */
.owner-strip { display: grid; gap: 8px; margin-top: 6px; }
.owner-label { margin: 0 0 3px; font-size: 16px; line-height: 1.15; font-weight: 700; }
.owner-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.owner-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.look { position: relative; min-height: 56px; margin: 0; padding: 4px 5px; border: 0; background: #B6A88E; color: var(--ink); font: 700 clamp(13px, 3.6vw, 16px)/1.05 var(--slab); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.look canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.look span { position: relative; z-index: 1; }
.look-dark { background: #4A4036; color: var(--cream); }
.look.has-stone { background: transparent; }
/* Which one is on: a thick frame, and its word underlined. */
.look::after { content: ""; position: absolute; inset: -2px; pointer-events: none; border: 3px solid transparent; }
.look[aria-pressed="true"]::after { border-color: var(--ink); box-shadow: 0 0 0 2px var(--gold); }
.look[aria-pressed="true"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.no-js .owner-strip { display: none; }
@media (min-width: 620px) {
  .owner-strip { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 14px; }
}
/* On a wide screen, one neat row: words, stones, words, stones. */
.boards .owner-strip { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 2vw, 56px); margin-top: 4px; }
.boards .owner-group { display: flex; align-items: center; gap: 10px; }
.boards .owner-label { margin: 0; max-width: 9.5em; font-size: clamp(14px, 0.95vw, 22px); text-align: right; }
.boards .owner-row { display: flex; }
.boards .look { min-width: clamp(84px, 6.6vw, 150px); min-height: clamp(50px, 3.3vw, 72px); font-size: clamp(14px, 0.95vw, 22px); }

/* ---- A course of stones between sections. The two page colors meet behind its middle, so its rough edges sit against the right color. */
.course { position: relative; display: block; width: 100%; background: linear-gradient(var(--above) 50%, var(--below) 50%); }
.course canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.no-js .course { background: linear-gradient(var(--above) 44%, #4A4036 44%, #4A4036 56%, var(--below) 56%); }

/* ---- Words shared by every band. One left edge for all of them, at any width. */
.wrap { width: 100%; padding-left: var(--edge); padding-right: var(--edge); }
section { position: relative; scroll-margin-top: 6px; }
h2 { font-size: clamp(32px, max(min(8.6vw, 56px), 3.6vw), 92px); line-height: 1.04; font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: clamp(23px, max(min(5.4vw, 31px), 2vw), 50px); line-height: 1.12; font-weight: 700; }
.lead { margin-top: 6px; font-size: clamp(18px, max(min(4.7vw, 24px), 1.7vw), 40px); line-height: 1.25; }

/* Stand-ins all look the same: a lumber crayon, thick and waxy. On a manila tag, or with a dashed underline in running text. */
.crayon, .standin { font-family: var(--lumber-crayon); font-weight: 700; color: var(--crayon); }
.standin { display: inline-block; line-height: 1.1; border-bottom: 2px dashed currentColor; }
#build .standin { color: var(--crayon-on-dark); }

/* ---- Stone: what's in the yard. One place: his gravel from edge to edge, with his tree line along the top, and the stock standing on it. */
#stone { padding-bottom: 8px; background: var(--gravel); }
.tree-line { position: relative; width: 100%; height: clamp(58px, 11vw, 150px); }
.tree-line canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
#stone .wrap { padding-top: 8px; }
.stock-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 6px 0 0; padding: 0 var(--edge); column-gap: 8px; list-style: none; }
.stock { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.stock:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
.stock-art { position: relative; width: 100%; aspect-ratio: 240 / 178; }
.stock-art canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.no-js .stock-art { display: none; }
.no-js #stone { padding-top: 0; }
@media (min-width: 760px) {
  .stock-row { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(8px, 1.4vw, 40px); }
  .stock:last-child { grid-column: auto; justify-self: stretch; width: auto; }
  /* The middle of the yard sits a little further back, so it doesn't read as a row of products. */
  .stock:nth-child(2) { margin-top: 18px; }
  .stock:nth-child(3) { margin-top: -6px; }
  .stock:nth-child(4) { margin-top: 12px; }
}

/* A manila shipping tag on a twist of wire. Tap it and it turns over. */
.tag {
  position: relative; display: block; width: 100%; margin: -6px 0 12px; padding: 0; border: 0; background: transparent; cursor: pointer;
  perspective: 700px; filter: drop-shadow(0 2px 2px rgba(46, 33, 24, 0.4)); -webkit-tap-highlight-color: transparent;
}
.tag::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -14px; width: 3px; height: 28px; margin-left: -1.5px; background: repeating-linear-gradient(#2A2A2A 0 2px, #8B8B86 2px 3px, #2A2A2A 3px 5px); pointer-events: none; }
.tag-inner { display: grid; transform-style: preserve-3d; transition: transform 0.38s ease; }
.tag[aria-pressed="true"] .tag-inner { transform: rotateY(180deg); }
.tag-face {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; padding: 22px 7px 9px;
  background:
    radial-gradient(circle at 50% 12px, #231A12 0 2.6px, #7E4A24 3px 5.2px, #A5683A 5.6px 6.4px, transparent 6.8px),
    var(--manila);
  color: var(--ink); text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%, 0 13px);
}
.tag-back { transform: rotateY(180deg); }
.tag-print { display: block; font-size: clamp(13px, max(min(3.3vw, 14.5px), 1vw), 24px); line-height: 1.18; font-weight: 400; }
.tag .crayon { display: block; font-size: clamp(16px, max(min(4.3vw, 18px), 1.25vw), 30px); line-height: 1.08; }
.tag-line { display: block; font-size: clamp(12.5px, max(min(3.1vw, 13.5px), 0.95vw), 22px); line-height: 1.14; }
.tag-line + .tag-line { margin-top: 2px; }
.tag-label { font-weight: 400; }
.tag:hover .tag-face { background-color: #E0C286; }
@media (prefers-reduced-motion: reduce) { .tag-inner { transition: none; } }
/* Without scripts the tag can't turn, so both sides show. */
.no-js .tag { cursor: default; margin-top: 4px; }
.no-js .tag::before { display: none; }
.no-js .tag-inner { display: block; }
.no-js .tag-back { transform: none; margin-top: 6px; }

.photos { padding: 2px var(--edge) 18px; text-align: center; font-size: clamp(25px, max(min(6vw, 34px), 2.2vw), 58px); line-height: 1.1; }

/* ---- Build: what are you building? */
#build { padding-top: 26px; padding-bottom: 28px; background: var(--charcoal); color: var(--cream); }
.jobs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: 14px 0 0; padding: 0 var(--edge); }
.job { position: relative; min-height: var(--call-height); margin: 0; padding: 6px 8px; border: 0; background: #C8A96F; color: var(--ink); cursor: pointer; font: 700 clamp(19px, max(min(5vw, 24px), 1.7vw), 40px)/1.08 var(--slab); -webkit-tap-highlight-color: transparent; }
.job canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; transition: filter 0.12s; }
.job span { position: relative; z-index: 1; }
.job.has-stone { background: transparent; }
.job[data-job="chimney"] { grid-column: span 5; }
.job[data-job="patio"] { grid-column: span 7; }
.job[data-job="retaining"] { grid-column: span 7; }
.job[data-job="steps"] { grid-column: span 5; }
.job[data-job="veneer"] { grid-column: span 12; }
/* The one that's chosen looks lit: brighter, lifted a little, with a warm glow around it. */
.job::after { content: ""; position: absolute; inset: -1px; pointer-events: none; transition: box-shadow 0.12s; }
.job[aria-pressed="true"] { z-index: 1; transform: translateY(-2px); }
.job[aria-pressed="true"] canvas { filter: brightness(1.14) saturate(1.1); }
.job[aria-pressed="true"]::after { box-shadow: 0 0 0 3px #E8C47E, 0 0 18px 3px rgba(232, 196, 126, 0.62); }
.no-js .job { cursor: default; }
@media (min-width: 760px) {
  .jobs { grid-template-columns: 2.1fr 1.7fr 3fr 1.7fr 2.1fr; }
  .job[data-job] { grid-column: auto; }
}

.stage { position: relative; width: 100%; height: clamp(300px, min(72vw, max(420px, 30vw)), 800px); margin-top: 10px; }
.stage canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.no-js .stage { display: none; }

.tool { display: grid; gap: 20px; margin-top: 8px; }
.right-stone { font-size: max(20px, var(--t)); line-height: 1.3; }
.tool h3 { margin-top: 12px; }
.fields { display: grid; gap: 12px; margin-top: 10px; }
.field label { display: block; margin-bottom: 4px; font-size: max(18px, var(--t)); font-weight: 700; line-height: 1.15; }
.stepper { display: flex; align-items: stretch; gap: 4px; }
.step-button { flex: 0 0 var(--stepper-size); width: var(--stepper-size); min-height: var(--stepper-size); margin: 0; padding: 0; border: 0; border-radius: var(--button-radius); background: var(--cream); color: var(--ink); font: 700 34px/1 var(--slab); cursor: pointer; box-shadow: 0 3px 0 #8E8368; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.step-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #8E8368; }
.number-box { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 8px; border-radius: var(--button-radius); background: var(--paper); color: var(--ink); cursor: text; }
.number-box input { width: 3.1em; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: 700 32px/1 var(--slab); font-variant-numeric: lining-nums; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.number-box input::-webkit-outer-spin-button, .number-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.number-box input:focus { outline: none; box-shadow: none; }
.number-box:focus-within { outline: 3px solid var(--gold); outline-offset: 1px; }
.unit { font-size: 18px; }
.no-js .fields, .no-js .result { display: none; }
.plain-line { margin-top: 8px; font-size: 20px; }

.result { display: grid; gap: 6px; }
.amount { font-size: clamp(24px, max(min(6.2vw, 34px), 2.4vw), 58px); line-height: 1.12; }
.amount strong { font-weight: 700; }
.coverage { font-size: max(19px, var(--t)); line-height: 1.3; }
.say-lead { margin-top: 8px; font-size: max(18px, var(--t)); line-height: 1.2; }
.slip {
  margin: 2px 2px 6px; padding: 14px 16px 16px; background: var(--paper); color: var(--ink); font-size: clamp(21px, max(min(5.6vw, 27px), 1.9vw), 46px); line-height: 1.18; font-weight: 700;
  transform: rotate(-0.7deg); box-shadow: 0 2px 0 #B9AD90, 2px 5px 10px rgba(0, 0, 0, 0.45);
  background-image: repeating-linear-gradient(transparent 0 1.16em, rgba(90, 120, 150, 0.16) 1.16em calc(1.16em + 1px));
}
.call-with { margin-top: 12px; }
@media (min-width: 760px) {
  .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 110px); align-items: start; }
}

/* ---- Trucks: one painted scene, dead on the section's edges. The sky is the band's own. The ridges, the road, and the truck all slide as the band scrolls through the screen. */
#haul { --hu: min(2.2px, max(min(100vw / 460, 1px), 100vw / 1000)); position: relative; overflow: hidden; background: linear-gradient(var(--evergreen) 0%, var(--evergreen) 30%, #2C5F55 62%, #3D7566 100%); color: var(--cream); }
.haul-scene { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.haul-scene canvas { position: absolute; display: block; }
.haul-near { position: absolute; left: -50%; bottom: 0; width: 200%; height: calc(262 * var(--hu)); }
.haul-near > canvas { left: 0; top: 0; width: 100%; height: 100%; }
.haul-truck { position: absolute; left: 0; bottom: 0; width: 0; height: 0; }
.haul-words { position: relative; padding: 26px var(--edge) calc(262 * var(--hu) + 10px); }
.odometer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.odometer-words { font-size: clamp(19px, max(min(4.8vw, 22px), 1.6vw), 40px); line-height: 1.25; }
.miles { font-weight: 700; }
.haul-still { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* A crayon tag beside the road. It rides along with the road. */
.road-tag { position: absolute; z-index: 2; bottom: calc(150 * var(--hu)); width: clamp(120px, 15vw, 330px); padding: 15px 8px 7px; text-align: center; font-size: clamp(15px, max(min(4vw, 17px), 1.25vw), 30px); line-height: 1.08; transform: translateX(-50%) rotate(-1.6deg);
  background: radial-gradient(circle at 50% 8px, #231A12 0 2px, #7E4A24 2.4px 4px, transparent 4.4px), var(--manila);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
}
.road-tag .crayon { display: block; }
.road-tag-1 { left: 33.5%; }
.road-tag-2 { left: 66%; transform: translateX(-50%) rotate(1.4deg); }
/* Without scripts: a still of the scene, and the tags sit plainly under the words. */
.no-js .haul-scene { position: relative; padding: 0 var(--edge) 16px; }
.no-js .haul-scene canvas, .no-js .haul-truck { display: none; }
.no-js .haul-near { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.no-js .road-tag { position: static; transform: none; }
.no-js #haul { display: flex; flex-direction: column-reverse; }
.no-js .haul-words { padding-bottom: 10px; }
.no-js .haul-scene { min-height: 0; }

/* The odometer: real rolling digits, cream on dark. The number itself is plain text underneath, for screen readers and for no scripts. */
.odometer { --wheel: 1.28em; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; position: relative; display: inline-block; padding: 5px 8px; border-radius: 4px; background: #14110E; color: var(--cream); font-size: clamp(32px, max(min(8.4vw, 44px), 3vw), 76px); line-height: var(--wheel); font-weight: 700; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 0 2px #4B4235, 0 0 0 4px #2A241D; }
.odometer-number { letter-spacing: 0.08em; }
.odometer.rolling .odometer-number { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.odometer-face { display: flex; align-items: center; }
.wheel { position: relative; display: block; width: 0.74em; height: var(--wheel); margin: 0 1px; overflow: hidden; border-radius: 2px; background: linear-gradient(#050403, #2C261E 28%, #2C261E 72%, #050403); text-align: center; }
.wheel-strip { display: block; will-change: transform; }
.wheel-strip b { display: block; height: var(--wheel); font-weight: 700; }
.odometer-comma { width: 0.3em; text-align: center; }

/* ---- Find us. */
#visit { background: var(--cream); }
.big-yard { --yard-s: clamp(min(100vw / 484, 1px), 100vw / 1200, 1.75px); --yard-units: 488; position: relative; width: 100%; height: calc(var(--yard-units) * var(--yard-s)); background: linear-gradient(var(--sky-top), var(--sky-low) 62%, var(--gravel) 62%); }
/* On a very wide screen the drawing brings the yard up in the frame, so it isn't mostly forest. */
@media (min-width: 1400px) { .big-yard { --yard-units: 431; } }
.big-yard canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.big-yard-words { position: absolute; left: 0; right: 0; top: 0; padding: clamp(6px, 1.4vw, 26px) 8px 0; text-align: center; }
.big-yard-words h2 { font-size: clamp(30px, max(min(6vw, 52px), 3vw), 74px); }
.big-yard-words h2:focus { outline: none; box-shadow: none; }
.big-yard-words .lead { margin-top: 2px; font-size: clamp(17px, max(min(3.4vw, 24px), 1.5vw), 36px); text-shadow: 0 0 6px var(--sky-low), 0 0 14px var(--sky-low); }
.back-tag { position: absolute; z-index: 2; left: var(--edge); top: 0; transform: rotate(-1.2deg); }
.back-tag > span { padding-left: 11px; padding-right: 11px; }
.no-js .big-yard { height: auto; background: none; }
.no-js .big-yard canvas { display: none; }
.no-js .big-yard-words { position: static; padding-top: 44px; }

.visit-below { display: grid; gap: 22px; padding-top: 18px; padding-bottom: 28px; }
.board { display: grid; gap: 8px; align-content: start; padding: 18px 16px 18px; background-color: var(--paper); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 0 3px 0 var(--ink); }
.board .address { text-align: left; font-size: clamp(20px, max(min(5.2vw, 25px), 1.8vw), 44px); font-weight: 700; line-height: 1.2; }
.board-line { font-size: max(18px, var(--t)); line-height: 1.3; }
.board-call { font-size: clamp(21px, max(min(5.8vw, 28px), 2vw), 48px); }
.board .plain-button { font-size: clamp(18px, 1.3vw, 30px); }
.board h3 { margin-top: 8px; }
.board h3:focus { outline: none; box-shadow: none; }
#hours { scroll-margin-top: 14px; }
.hours-block { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.hours { margin: 0; padding: 0; list-style: none; font-size: max(19px, var(--t)); line-height: 1.36; }
.hours .today { font-weight: 700; }
.hours-note { flex: 1 1 8em; max-width: 13em; font-size: max(18px, var(--t)); line-height: 1.12; transform: rotate(-1.5deg); }
.said { display: grid; gap: 8px; align-content: start; font-size: max(19px, var(--t)); line-height: 1.32; }
.said-score { font-weight: 700; font-size: max(21px, calc(var(--t) * 1.14)); }
@media (min-width: 760px) {
  .visit-below { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 110px); padding-top: 30px; padding-bottom: 40px; }
}

/* ---- The footing. The page ends on solid ground. */
#footing { background: var(--charcoal); color: var(--cream); }
.foot-words { display: grid; justify-items: center; gap: 10px; padding: 22px var(--edge) 28px; text-align: center; font-size: 17px; line-height: 1.3; }
.foot-name { font-size: 21px; font-weight: 700; }
.credit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 14px 5px 7px; border: 1.5px solid #C8A35A; border-radius: 22px; background: var(--paper); color: #152221; font-size: 15px; font-weight: 700; text-decoration: none; }
.credit:hover { background: #152221; color: #E6C983; }
.credit img { display: block; width: 22px; height: 22px; }

/* ---- The sticky call bar. Phones only, and only after the big Call button has gone by. */
.call-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.7fr 1fr 0.8fr; gap: 3px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--ink); visibility: hidden; opacity: 0; transition: opacity 0.2s; }
.call-bar.show { visibility: visible; opacity: 1; }
.bar-call, .bar-small { display: flex; align-items: center; justify-content: center; min-height: var(--bar-height); margin: 0; padding: 0 4px; border: 0; border-radius: var(--button-radius); text-align: center; text-decoration: none; font-weight: 700; line-height: 1.05; cursor: pointer; }
.bar-call { background: var(--evergreen); color: var(--cream); font-size: 26px; }
.bar-small { background: var(--cream); color: var(--ink); font: 700 16px/1.05 var(--slab); }
/* The page ends on the charcoal, with room under the words so the bar can't cover them. */
.bar-room .foot-words { padding-bottom: calc(var(--bar-height) + 26px + env(safe-area-inset-bottom)); }
.boards .call-bar { display: none; }

/* ---- Walking through the O. */
#top.walking { position: fixed; z-index: 60; left: 0; right: 0; pointer-events: none; will-change: transform, opacity; }