/* ============================================================
   Components
   ============================================================ */

/* ---------- Brand ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
}

.brand__mark {
  height: 1.85rem;
  width: auto;
  flex: none;
  /* the carving is warm; a touch of contrast keeps it from muddying
     into the near-black header */
  filter: saturate(1.05) contrast(1.06);
}

.brand--footer { align-items: center; gap: 0.75rem; }
.brand--footer .brand__mark { height: 3.4rem; }

@media (max-width: 34rem) {
  .brand__mark { height: 1.6rem; }
  .brand { gap: 0.45rem; }
}

/* Below this the mark, the wordmark, the language switch and the
   call to action stop fitting on one line. The mark alone is enough
   to say whose site this is, so the words step aside. */
@media (max-width: 32rem) {
  .brand .wordmark { display: none; }
  .brand__mark { height: 2.1rem; }
}

/* ---------- Wordmark ---------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-display);
  font-variation-settings: var(--wonk-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.wordmark__suffix {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent);
  transform: translateY(-0.55em);
}

@media (max-width: 26rem) {
  .wordmark { font-size: 0.9375rem; }
}

/* ---------- Nav ---------- */

.navlink {
  position: relative;
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  transition: color var(--dur-fast) var(--ease-soft);
  padding-block: 0.25rem;
}
.navlink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.navlink:hover { color: var(--ink); }
.navlink:hover::after { transform: scaleX(1); }

/* ---------- Language toggle ---------- */

.lang {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang__btn {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.6rem;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft);
}
.lang__btn + .lang__btn { border-left: 1px solid var(--rule-strong); }
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed='true'] {
  background: var(--ink);
  color: var(--ground);
}
.on-dark .lang__btn[aria-pressed='true'] { background: var(--ink); color: var(--ground); }


/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-mid) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--ember);
  color: var(--on-ember);
  font-weight: 560;
}
.btn--primary:hover:not([disabled]) {
  background: var(--glow);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 40%, transparent),
              0 8px 30px -12px color-mix(in srgb, var(--ember) 70%, transparent);
}

.btn--ghost {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn--ghost:hover:not([disabled]) {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
}

.btn--dark {
  background: var(--ink);
  color: var(--ground);
  font-weight: 560;
}
.btn--dark:hover:not([disabled]) { background: #3A2F23; }

.btn--wide { width: 100%; }

/* The header CTA, which has to survive a 360px viewport
   alongside the wordmark and the language switch. */
.btn--compact { padding: 0.6rem 1rem; font-size: var(--t-tiny); }

@media (max-width: 30rem) {
  .btn--compact { padding: 0.55rem 0.7rem; font-size: var(--t-micro); }
  .masthead__inner { gap: var(--s-3); }
  .masthead__end { gap: var(--s-2); }
}

/* Quiet text action with a rule that draws itself on hover */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--accent);
  padding-block: 0.2rem;
  position: relative;
}
.btn-quiet::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) linear;
}
.btn-quiet:hover::after { transform: scaleX(1); opacity: 0.85; }
.btn-quiet__arrow {
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn-quiet:hover .btn-quiet__arrow { transform: translateX(4px); }



/* ---------- The engraving bed (the signature) ---------- */

.bed { display: grid; gap: var(--s-4); }

/* On a wide screen the whole bed — panel, spec line and note —
   has to finish above the fold, or the visitor never sees the
   "done" status. Constrain the width so the panel keeps its 4:5
   proportion while the column height does the limiting. */
@media (min-width: 64rem) {
  .bed {
    max-width: min(100%, calc((100svh - 20rem) * 0.8));
    margin-inline: auto;
  }
}

.bed__frame {
  position: relative;
  background: var(--ground-deep);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  box-shadow:
    0 40px 90px -50px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.bed__stage {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background: #2A2018;
}

.bed__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
}

/* Work-holding fiducials — the alignment marks a laser bed
   carries. They sit on the machine bed around the workpiece,
   not on the wood itself, which is where a real one has them. */
.fiducial {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid var(--ember);
  opacity: 0.7;
  pointer-events: none;
}
.fiducial--tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.fiducial--tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.fiducial--bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.fiducial--br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* Drop target overlay */
.bed__drop {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--s-2);
  justify-items: center;
  text-align: center;
  padding: var(--s-5);
  background: color-mix(in srgb, var(--ground-deep) 78%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.bed.is-dragging .bed__drop { opacity: 1; }

.bed__drop-ring {
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--ember);
  border-radius: 2px;
}

/* The whole stage is a button. It must look like one on focus. */
.bed__hit {
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: pointer;
  border-radius: 2px;
}

.bed__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.bed__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

/* A dot that pulses only while the beam is running */
.bed__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex: none;
  transition: background-color var(--dur-mid) var(--ease-soft);
}
.bed.is-running .bed__dot {
  background: var(--ember);
  animation: pulse 1.1s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 60%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ember) 0%, transparent); }
}

.bed__note {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  color: var(--ink-soft);
  font-size: var(--t-tiny);
  line-height: 1.5;
}

.bed__error {
  color: var(--accent);
  font-size: var(--t-tiny);
  min-height: 1.2em;
}

/* ---------- Piece card ---------- */

.piece {
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease-soft),
              background-color var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-out);
}
.piece:hover {
  border-color: var(--rule-strong);
  background: var(--raised-hi);
  transform: translateY(-3px);
}

.piece__media {
  position: relative;
  overflow: hidden;
  background: #17130F;
  border-bottom: 1px solid var(--rule);
}
.piece__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.piece:hover .piece__media img { transform: scale(1.03); }

/* The turning example. The still image behind it is what a
   visitor without JavaScript sees; the canvas covers it once the
   renderer is running. */
.piece__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- stepping through the variations ---------- */

.piece__media { position: relative; }

.piece__nav {
  position: absolute;
  inset: 0 0 2.6rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-3);
  pointer-events: none;
}

.piece__arrow {
  pointer-events: auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--ground-deep) 74%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  /* Always visible. They were on hover-reveal at first, but an arrow
     nobody can see is an arrow nobody presses — and there is no hover
     at all on a phone. */
  opacity: 0.62;
  transition: opacity var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.piece:hover .piece__arrow,
.piece__arrow:focus-visible { opacity: 1; }
.piece__arrow:hover { opacity: 1; border-color: var(--ember); color: var(--ember); }

.piece__variant {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ground-deep) 92%, transparent),
    color-mix(in srgb, var(--ground-deep) 62%, transparent) 60%,
    transparent);
}

.piece__dots { display: flex; gap: 0.32rem; flex: none; }

.piece__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  padding: 0;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  transition: background-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.piece__dot.is-on { background: var(--ember); transform: scale(1.25); }
.piece__dot:hover { background: var(--ink); }

.piece__caption {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  line-height: 1.4;
  min-width: 0;
}

.piece__opts {
  display: grid;
  gap: 0.3rem;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

.piece__opts-label { color: var(--ink-soft); }

.piece__opts-list {
  font-size: var(--t-tiny);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 64%, transparent);
}

.piece__media--wide { aspect-ratio: 4 / 3; }
.piece__media--tall { aspect-ratio: 3 / 4; }
.piece__media--pano { aspect-ratio: 16 / 9; }
.piece__media--compact { aspect-ratio: 16 / 10; }
.piece__media--ultra { aspect-ratio: 21 / 9; }

.piece__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  flex: 1;
}

.piece__title { margin-bottom: 0.1rem; }

.piece__text {
  font-size: var(--t-small);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.piece__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.piece__price {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.piece__price em {
  font-style: normal;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--t-micro);
  margin-right: 0.5em;
}

/* ---------- Process steps ---------- */

.step {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-strong);
}

.step__n {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.step__text {
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  line-height: 1.6;
}

/* ---------- Process films ---------- */

.film__tab {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0 var(--s-4);
  transition: color var(--dur-fast) var(--ease-soft);
}
.film__tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.film__tab:hover { color: var(--ink); }
.film__tab[aria-selected='true'] { color: var(--ink); }
.film__tab[aria-selected='true']::after { transform: scaleX(1); }

.film__screen {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #0C0A08;
  overflow: hidden;
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, 0.9);
}

.film__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
}

.film__replay {
  position: absolute;
  right: var(--s-4);
  top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--ground-deep) 82%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.film__replay:hover { border-color: var(--ember); color: var(--ember); }

.film__note {
  font-size: var(--t-small);
  line-height: 1.62;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}

/* Stages tick along as the film plays */
.film__stages {
  display: grid;
  gap: 0;
  margin-top: var(--s-2);
  counter-reset: none;
}

.film__stage {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: color var(--dur-mid) var(--ease-soft);
}
.film__stage:last-child { border-bottom: 1px solid var(--rule); }

.film__stage-n {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  transition: color var(--dur-mid) var(--ease-soft);
}

.film__stage-label { font-size: var(--t-small); line-height: 1.45; }

.film__stage.is-on { color: var(--ink); }
.film__stage.is-on .film__stage-n { color: var(--ember); }

/* ---------- Reviews ---------- */

.stars { display: block; flex: none; }
.stars__empty path { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.stars__full path  { fill: var(--accent); }

.reviews__score {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}

.reviews__avg {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk-quiet);
  font-size: var(--t-h4);
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.reviews__count {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.review {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-out),
              visibility 0s linear var(--dur-mid);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-mid) var(--ease-soft),
              background-color var(--dur-mid) var(--ease-soft);
}
.review.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.review:hover { border-color: var(--rule-strong); background: var(--raised-hi); }

/* ---------- turning the reviews over ---------- */

.reviews__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: var(--raised);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.reviews__arrow:hover,
.reviews__arrow:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent); }
.reviews__arrow--prev { left: 0; }
.reviews__arrow--next { right: 0; }

/* Below this the arrows would sit on top of the words, so they drop
   down beside the dots instead. */
@media (max-width: 62rem) {
  .reviews__arrow { display: none; }
}

.reviews__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.reviews__dots { display: flex; gap: 0.45rem; }

.reviews__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 24%, transparent);
  transition: background-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.reviews__dot.is-on { background: var(--accent); transform: scale(1.3); }
.reviews__dot:hover { background: var(--ink); }

.reviews__pause {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: 0.42rem 0.55rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.reviews__pause:hover { color: var(--ink); border-color: var(--rule-strong); }

@media (max-width: 62rem) {
  .reviews__bar { gap: var(--s-5); }
}

.review__text {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--wonk-quiet);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  max-width: 46ch;
  position: relative;
}
/* An opening quote mark set in the margin, not in the text flow */
.review__text::before {
  content: '\201C';
  position: absolute;
  left: -0.52em;
  top: -0.18em;
  font-size: 2.2em;
  line-height: 1;
  color: var(--ember);
  opacity: 0.32;
  pointer-events: none;
}

/* An example review has to be unmistakable, or it is just a fake one */
.review--example {
  position: relative;
  overflow: hidden;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--raised));
}
/* the quote sits under the stamp, dimmed a little so the stamp reads */
.review--example .review__text,
.review--example .review__by { opacity: 0.55; }

.review__stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 122%;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-15deg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
  /* Strong enough to read on its own — this is the most important
     thing on the card, so it has to clear contrast rather than the
     filler quote behind it, which is dimmed instead. */
  color: var(--accent);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--raised) 80%, transparent);
  pointer-events: none;
  z-index: 2;
}

.review__translate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

/* Sits above the quote rather than under it, so it is read before the
   words are and nobody takes a machine translation for what the
   customer actually wrote. */
.review__machine {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.review__machine::before {
  content: '';
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--ember);
}

.review__translate-btn { font-size: var(--t-tiny); }
.review__translate-btn[disabled] { opacity: 0.6; cursor: default; }

.review__by { display: grid; gap: 0.2rem; }

.review__name {
  font-size: var(--t-small);
  font-weight: 560;
  color: var(--ink);
}

.review__meta {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- For business ---------- */

.biz-item {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-strong);
}

.biz-item__text {
  font-size: var(--t-small);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* ---------- Wood swatches ----------
   Drawn in CSS rather than photographed: no stock imagery, and
   the grain reads honestly as an illustration, not a fake photo. */

.wood {
  aspect-ratio: 5 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  margin-bottom: var(--s-4);
  position: relative;
  overflow: hidden;
}
.wood::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent 45%,
              rgba(0,0,0,0.22));
}

.wood--birch {
  background:
    repeating-linear-gradient(92deg,
      rgba(120, 92, 58, 0.16) 0 1px,
      transparent 1px 7px),
    repeating-linear-gradient(88deg,
      rgba(120, 92, 58, 0.08) 0 2px,
      transparent 2px 17px),
    linear-gradient(100deg, #E3CFAC, #D6BE95 55%, #E0CBA6);
}

.wood--oak {
  background:
    repeating-linear-gradient(93deg,
      rgba(84, 56, 26, 0.22) 0 1px,
      transparent 1px 6px),
    repeating-linear-gradient(87deg,
      rgba(84, 56, 26, 0.12) 0 3px,
      transparent 3px 23px),
    linear-gradient(100deg, #C79A5F, #B0834A 50%, #C1935A);
}

.wood--walnut {
  background:
    repeating-linear-gradient(94deg,
      rgba(28, 15, 6, 0.32) 0 1px,
      transparent 1px 5px),
    repeating-linear-gradient(86deg,
      rgba(28, 15, 6, 0.18) 0 2px,
      transparent 2px 19px),
    linear-gradient(100deg, #6B4527, #513118 55%, #64401F);
}

.material__name { margin-bottom: var(--s-2); }
.material__text {
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  line-height: 1.6;
}

.assurance { display: grid; gap: var(--s-2); }
.assurance__text {
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  line-height: 1.6;
}

/* ---------- Form ---------- */

.field { display: grid; gap: 0.45rem; }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field__optional { text-transform: none; letter-spacing: 0.02em; opacity: 0.75; }

.input,
.textarea,
.select {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  font-size: var(--t-small);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 72%, transparent); }

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: #A3341C;
  box-shadow: 0 0 0 3px rgba(163, 52, 28, 0.14);
}

.field__error {
  font-size: var(--t-tiny);
  color: #8E2C16;
  min-height: 1.1em;
}

/* File attachment */

.attach {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--raised) 55%, transparent);
  transition: border-color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft);
}
.attach.is-dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.attach__thumb {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--raised);
}

.attach__info { display: grid; gap: 0.2rem; min-width: 0; flex: 1 1 12rem; }

.attach__name {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach__meta { font-size: var(--t-tiny); color: var(--ink-soft); }

.attach__actions { display: flex; gap: var(--s-3); flex: none; }

.link-action {
  font-size: var(--t-tiny);
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link-action--quiet { color: var(--ink-soft); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Consent */

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
}
.consent input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.28rem;
  accent-color: var(--accent);
  flex: none;
}
.consent label { font-size: var(--t-tiny); line-height: 1.55; color: var(--ink-soft); }
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Submission feedback */

.form-status {
  font-size: var(--t-small);
  line-height: 1.55;
  padding: var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--raised);
}
.form-status[hidden] { display: none; }
.form-status--ok { border-color: rgba(58, 94, 45, 0.4); background: rgba(96, 138, 78, 0.14); color: #274A1B; }
.form-status--bad { border-color: rgba(163, 52, 28, 0.4); background: rgba(163, 52, 28, 0.1); color: #7C2712; }

/* Trust list beside the form */

.trust { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.trust__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: baseline; }
.trust__mark { color: var(--accent); font-family: var(--font-mono); font-size: var(--t-tiny); }
.trust__text { font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }

.direct {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-2);
}
.direct a {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.direct a:hover { text-decoration-color: var(--accent); }

/* ---------- Footer ---------- */

.footer { padding-block: var(--s-8) var(--s-6); }
.footer__col { display: grid; gap: var(--s-3); align-content: start; }
.footer__text { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.6; max-width: 34ch; }
.footer__link { font-size: var(--t-small); color: color-mix(in srgb, var(--ink) 72%, transparent); }
.footer__link:hover { color: var(--ember); }