/* ==========================================================================
   NJ PRETTY FACE LTD - 29 Clarendon Road, Aylesham
   One stylesheet for both halves of the business. Front of house carries the
   rose rule, the back office carries the green one; the --half token is the
   only thing that changes between them.

   Reset is deliberately two rules. Type is set per component, never globally,
   so a panel can be re-measured without fighting an inherited cascade.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
:where(img, svg, video) { display: block; max-inline-size: 100%; }

:root {
  --bg: #faf4ee;
  --ink: #2e2724;
  --accent: #a24a62;
  --accent2: #4b6b5e;
  --surface: #ffffff;

  --half: var(--accent);
  --measure: 33rem;
  --step: 0.75rem;
  --rule: 1px;
  --hair: rgba(46, 39, 36, 0.16);
  --hair-soft: rgba(46, 39, 36, 0.09);
  --wash: rgba(46, 39, 36, 0.045);
  --dot: rgba(46, 39, 36, 0.13);
  --ease: cubic-bezier(0.2, 0.74, 0.3, 1);
}

/* --------------------------------------------------------------------------
   1. Page shell. The dotted field is the page itself; panels float on it as
   white surfaces, which is what keeps a long stack of them legible.
   -------------------------------------------------------------------------- */

.salon-page {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.15px);
  background-size: 15px 15px;
  background-position: -6px -6px;
  color: var(--ink);
  font-family: "Wix Madefor Text", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  text-underline-offset: 0.18em;
}

.page-shell {
  inline-size: 100%;
  max-inline-size: calc(var(--measure) + 3rem);
  margin-inline: auto;
  padding-inline: 1.1rem;
}

.page-wide {
  inline-size: 100%;
  max-inline-size: 54rem;
  margin-inline: auto;
  padding-inline: 1.1rem;
}

.skip-link {
  position: absolute;
  inset-inline-start: -200vw;
  inset-block-start: 0.4rem;
  z-index: 40;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: inset-inline-start 140ms var(--ease);
}

.skip-link:focus {
  inset-inline-start: 0.6rem;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Masthead. Name, trade line, address line. No strapline, no logo lockup.
   -------------------------------------------------------------------------- */

.page-head {
  border-block-end: var(--rule) solid var(--hair);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.4));
  padding-block: 1.05rem 0.9rem;
}

.site-name {
  margin: 0;
  font-family: Italiana, "Times New Roman", serif;
  font-size: clamp(1.45rem, 5.2vw, 2.05rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-name a {
  color: inherit;
  text-decoration: none;
  border-block-end: var(--rule) solid transparent;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}

.site-name a:hover,
.site-name a:focus-visible {
  color: var(--accent);
  border-block-end-color: var(--accent);
}

.head-trade {
  margin: 0.42rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(46, 39, 36, 0.66);
}

.head-trade b {
  font-weight: 400;
  color: var(--accent);
}

.head-trade i {
  font-style: normal;
  color: var(--accent2);
}

/* --------------------------------------------------------------------------
   3. Navigation: a stack of native <details>. One mechanism at every width.
   No media query reshapes it, no script opens it, no duplicate desktop bar.
   The group holding the current page carries the open attribute in the HTML.
   -------------------------------------------------------------------------- */

.page-nav {
  border-block-end: var(--rule) solid var(--hair);
  background: rgba(255, 255, 255, 0.55);
}

.nav-stack {
  margin: 0;
  padding-block: 0.35rem 0.55rem;
}

.nav-group {
  border-block-start: var(--rule) solid var(--hair-soft);
}

.nav-group:first-child {
  border-block-start: 0;
}

.group-name {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.62rem 0.1rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(46, 39, 36, 0.78);
  list-style: none;
  transition: color 170ms var(--ease), background-color 170ms var(--ease);
}

.group-name::-webkit-details-marker { display: none; }

.group-name::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.52rem;
  block-size: 0.52rem;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: rotate(-45deg) translateY(-0.08rem);
  transition: transform 220ms var(--ease);
}

.nav-group[open] > .group-name::before {
  transform: rotate(45deg) translateY(-0.12rem);
}

.nav-group[open] > .group-name {
  color: var(--ink);
}

.group-name:hover { color: var(--accent); }
.nav-group.back-group > .group-name:hover { color: var(--accent2); }

.group-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.group-count {
  margin-inline-start: auto;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(46, 39, 36, 0.5);
  text-transform: none;
}

.group-list {
  margin: 0 0 0.5rem;
  padding: 0 0 0 0.1rem;
  list-style: none;
}

.group-list li { margin: 0; }

.nav-link {
  display: block;
  padding: 0.4rem 0.6rem 0.4rem 0.75rem;
  border-inline-start: 2px solid var(--hair-soft);
  color: var(--ink);
  font-size: 0.93rem;
  text-decoration: none;
  transition: border-color 170ms var(--ease), background-color 170ms var(--ease),
              padding-inline-start 170ms var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  border-inline-start-color: var(--half);
  background: rgba(255, 255, 255, 0.8);
  padding-inline-start: 0.95rem;
}

.nav-link:focus-visible {
  outline: 2px solid var(--half);
  outline-offset: -2px;
}

.nav-link[aria-current="page"] {
  border-inline-start-color: var(--half);
  background: var(--surface);
  font-weight: 500;
}

.nav-link[aria-current="page"]::after {
  content: " - you are here";
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: rgba(46, 39, 36, 0.55);
  font-weight: 400;
}

.back-group { --half: var(--accent2); }

/* --------------------------------------------------------------------------
   4. The opener. A diagonal seam splits the page into the two halves of the
   company: above and left of it the salon, dotted and rose; below and right
   of it the desk that holds other salons' diaries, flat green. Each half
   arrives from its own corner along the seam vector, the seam draws after
   them, and the registered name settles on the diagonal.

   The boundary is a masked linear-gradient at 24.5deg. The bands of a
   gradient run AT the stated angle, not across it, so this is the seam angle
   itself and it holds at every viewport - a clip-path in percentages would
   swing with the aspect ratio, and a scaled SVG multiplies the hairline and
   the dot pattern along with everything else. Above the seam is the salon,
   below it the desk, which is the side each corner card sits on.
   -------------------------------------------------------------------------- */

.seam-opener {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-block-size: 20rem;
  border-block-end: var(--rule) solid var(--hair);
}

.seam-front,
.seam-back,
.seam-rule {
  position: absolute;
  inset: -4.5rem;
  z-index: 0;
  pointer-events: none;
}

.seam-front {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(162, 74, 98, 0.36) 1.1px, transparent 1.35px);
  background-size: 15px 15px;
  background-position: -6px -6px;
  -webkit-mask-image: linear-gradient(24.5deg, transparent 0 calc(50% + 0.7px), #000 calc(50% + 0.7px));
  mask-image: linear-gradient(24.5deg, transparent 0 calc(50% + 0.7px), #000 calc(50% + 0.7px));
  animation: seam-front 940ms var(--ease) both;
}

.seam-back {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(75, 107, 94, 0.17), rgba(75, 107, 94, 0.17));
  -webkit-mask-image: linear-gradient(24.5deg, #000 0 calc(50% - 0.7px), transparent calc(50% - 0.7px));
  mask-image: linear-gradient(24.5deg, #000 0 calc(50% - 0.7px), transparent calc(50% - 0.7px));
  animation: seam-back 940ms var(--ease) 90ms both;
}

.seam-rule {
  background-image: linear-gradient(24.5deg,
    transparent 0 calc(50% - 0.7px),
    rgba(46, 39, 36, 0.52) calc(50% - 0.7px) calc(50% + 0.7px),
    transparent calc(50% + 0.7px));
  animation: rule-draw 1180ms var(--ease) 200ms both;
}

@keyframes seam-front {
  from { opacity: 0; transform: translate(-48px, -22px); }
}

@keyframes seam-back {
  from { opacity: 0; transform: translate(48px, 22px); }
}

@keyframes rule-draw {
  from { clip-path: inset(0 100% 0 0); }
}

.seam-stage {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.9rem;
  padding-block: 1.6rem 1.8rem;
  min-block-size: 20rem;
  align-content: space-between;
}

.seam-badge {
  position: absolute;
  inset-block-start: 1.1rem;
  inset-inline-end: 1.1rem;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  opacity: 0.8;
}

.badge-line {
  stroke: var(--ink);
  stroke-width: 1.6;
  fill: none;
  animation: badge-draw 1400ms var(--ease) 420ms both;
}

@keyframes badge-draw {
  from { stroke-dashoffset: 1; }
}

.seam-mark {
  margin: 0;
  justify-self: center;
  align-self: center;
  rotate: 24.5deg;
  font-family: Italiana, "Times New Roman", serif;
  font-size: clamp(1.18rem, 5.2vw, 2.45rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 0 0.7rem var(--bg), 0 0 1.5rem var(--bg), 0 0 2.4rem var(--bg);
  animation: name-resolve 1250ms var(--ease) 240ms both;

  /* rotate: is a transform and reserves no space, so the row it sits in has
     to be told how tall the turned text really is or it lands on the cards */
  display: grid;
  place-content: center;
  min-block-size: 8.5rem;
}

@keyframes name-resolve {
  from { opacity: 0; letter-spacing: 0.7em; }
  55%  { opacity: 1; }
}

.front-corner,
.back-corner {
  display: block;
  max-inline-size: 15.5rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.9);
  border: var(--rule) solid var(--hair-soft);
  color: var(--ink);
  text-decoration: none;
  animation: corner-settle 700ms var(--ease) both;
  transition: background-color 190ms var(--ease), border-color 190ms var(--ease),
              box-shadow 190ms var(--ease);
}

.front-corner {
  justify-self: start;
  border-block-start: 3px solid var(--accent);
  animation-delay: 520ms;
}

.back-corner {
  justify-self: end;
  text-align: end;
  border-block-start: 3px solid var(--accent2);
  animation-delay: 660ms;
}

@keyframes corner-settle {
  from { opacity: 0; transform: translateY(-0.7rem); }
}

.front-corner:hover,
.front-corner:focus-visible {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(162, 74, 98, 0.12);
}

.back-corner:hover,
.back-corner:focus-visible {
  background: var(--surface);
  border-color: var(--accent2);
  box-shadow: 0 0 0 4px rgba(75, 107, 94, 0.12);
}

.corner-role {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.front-corner .corner-role { color: var(--accent); }
.back-corner .corner-role { color: var(--accent2); }

.corner-line {
  display: block;
  margin-block-start: 0.28rem;
  font-size: 0.93rem;
  line-height: 1.45;
}

.page-kicker {
  margin: 0;
  padding-block: 1rem 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(46, 39, 36, 0.86);
}

.page-kicker em {
  font-style: normal;
  border-block-end: var(--rule) solid var(--accent);
}

/* --------------------------------------------------------------------------
   5. The switch. Two real anchors and :target. With scripting off it still
   reorders the columns, because the ordering is CSS order on a flex column
   and not a class that a script toggles.
   -------------------------------------------------------------------------- */

.desk-switch {
  display: flex;
  flex-wrap: wrap;
  margin-block: 1.1rem 0.4rem;
  border: var(--rule) solid var(--hair);
  background: var(--surface);
}

.switch-note {
  flex: 1 0 100%;
  margin: 0;
  padding: 0.5rem 0.7rem 0.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(46, 39, 36, 0.55);
}

.switch-link {
  flex: 1 1 10rem;
  padding: 0.62rem 0.7rem 0.68rem;
  border-block-start: 3px solid transparent;
  color: var(--ink);
  font-size: 0.88rem;
  text-align: start;
  text-decoration: none;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease);
}

.switch-link span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(46, 39, 36, 0.58);
}

.switch-link:hover { background: var(--wash); }

.switch-link:focus-visible {
  outline: 2px solid var(--half);
  outline-offset: -2px;
}

.switch-front { border-block-start-color: var(--accent); background: rgba(162, 74, 98, 0.07); }
.switch-back  { border-block-start-color: transparent; }

.salon-page:has(#back-desk:target) .switch-front {
  border-block-start-color: transparent;
  background: transparent;
}

.salon-page:has(#back-desk:target) .switch-back {
  border-block-start-color: var(--accent2);
  background: rgba(75, 107, 94, 0.07);
}

.desk-pair {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 0.4rem 1.6rem;
}

.desk-half {
  --half: var(--accent);
  scroll-margin-block-start: 0.8rem;
  padding: 1rem 1rem 1.15rem;
  border: var(--rule) solid var(--hair-soft);
  border-block-start: 2px solid var(--half);
  background: rgba(255, 255, 255, 0.56);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
}

.back-half { --half: var(--accent2); }

.front-half { background: var(--surface); border-block-start-width: 5px; }

#back-desk:target { order: -1; }

.desk-pair:has(#back-desk:target) .back-half {
  background: var(--surface);
  border-block-start-width: 5px;
}

.desk-pair:has(#back-desk:target) .front-half {
  background: rgba(255, 255, 255, 0.56);
  border-block-start-width: 2px;
}

.half-head {
  margin: 0 0 0.2rem;
  font-family: Italiana, "Times New Roman", serif;
  font-size: clamp(1.3rem, 4.4vw, 1.72rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.half-head::before {
  content: "";
  display: block;
  inline-size: 2.6rem;
  block-size: 3px;
  margin-block-end: 0.6rem;
  background: var(--half);
  transition: inline-size 240ms var(--ease);
}

.desk-half:hover .half-head::before { inline-size: 4.2rem; }

.voice-note {
  margin: 0 0 0.85rem;
  padding-inline-start: 0.65rem;
  border-inline-start: 2px solid var(--half);
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgba(46, 39, 36, 0.72);
}

.voice-note b {
  font-weight: 500;
  color: var(--half);
}

/* --------------------------------------------------------------------------
   6. Stacked panels, and the only reveal on the site. A CSS counter numbers
   the panels and the same index staggers animation-delay, once, on first
   paint. No scroll listener and no observer anywhere in the build.
   -------------------------------------------------------------------------- */

.panel-stack {
  counter-reset: panel 0;
  display: flex;
  flex-direction: column;
  margin-block: 1.1rem;
  border: var(--rule) solid var(--hair-soft);
  background: var(--surface);
}

.lead-panel {
  counter-increment: panel;
  position: relative;
  padding: 0.95rem 1rem 1.05rem;
  border-block-start: var(--rule) solid var(--hair-soft);
  animation: panel-rise 620ms var(--ease) both;
  transition: background-color 200ms var(--ease);
}

.lead-panel:first-child { border-block-start: 0; }
.lead-panel:hover { background: rgba(250, 244, 238, 0.52); }

.lead-panel:nth-child(1) { animation-delay: 60ms; }
.lead-panel:nth-child(2) { animation-delay: 140ms; }
.lead-panel:nth-child(3) { animation-delay: 220ms; }
.lead-panel:nth-child(4) { animation-delay: 300ms; }
.lead-panel:nth-child(5) { animation-delay: 380ms; }
.lead-panel:nth-child(6) { animation-delay: 460ms; }
.lead-panel:nth-child(7) { animation-delay: 540ms; }
.lead-panel:nth-child(8) { animation-delay: 620ms; }

@keyframes panel-rise {
  from { opacity: 0; transform: translate3d(0, 0.85rem, 0); }
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  font-family: Italiana, "Times New Roman", serif;
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.panel-head::before {
  content: counter(panel, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: "Wix Madefor Text", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--half);
}

.panel-body {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.64;
}

.panel-body + .panel-body { margin-block-start: 0.6rem; }

/* --------------------------------------------------------------------------
   7. Section heads. Every head carries a rule in the colour of the half it
   belongs to, so a reader can tell from the margin alone whether a block is
   addressed to a client or to another owner.
   -------------------------------------------------------------------------- */

.page-block {
  margin-block: 1.9rem;
}

.block-head {
  margin: 0 0 0.7rem;
  padding-block-start: 0.75rem;
  border-block-start: 3px solid var(--half);
  font-family: Italiana, "Times New Roman", serif;
  font-size: clamp(1.25rem, 4.2vw, 1.62rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.025em;
}

.block-head small {
  display: block;
  margin-block-start: 0.3rem;
  font-family: "Wix Madefor Text", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(46, 39, 36, 0.58);
}

.sub-head {
  margin: 1.35rem 0 0.4rem;
  font-family: Italiana, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.sub-head::after {
  content: "";
  display: block;
  inline-size: 1.6rem;
  block-size: 2px;
  margin-block-start: 0.3rem;
  background: var(--half);
}

.back-block { --half: var(--accent2); }

.prose-note {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.66;
}

.prose-note:last-child { margin-block-end: 0; }

.prose-note strong { font-weight: 500; }

.prose-note a,
.panel-body a,
.voice-note a,
.step-item a,
.time-note a {
  color: var(--half);
  text-decoration-thickness: 1px;
  transition: color 170ms var(--ease), background-color 170ms var(--ease);
}

.prose-note a:hover,
.panel-body a:hover,
.step-item a:hover {
  background: rgba(250, 244, 238, 0.9);
  color: var(--ink);
}

.aside-note {
  margin-block: 1.1rem;
  padding: 0.8rem 0.9rem;
  border: var(--rule) dashed var(--hair);
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.55;
}

.aside-note b { color: var(--half); font-weight: 500; }

/* --------------------------------------------------------------------------
   8. Ordered working lists. Used for the onboarding stages and for anything
   that happens in a fixed order on a fixed day.
   -------------------------------------------------------------------------- */

.step-list {
  counter-reset: stage 0;
  margin: 0.9rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

.step-item {
  counter-increment: stage;
  position: relative;
  padding: 0.6rem 0 0.7rem 2.5rem;
  border-block-start: var(--rule) solid var(--hair-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

.step-item:last-child { border-block-end: var(--rule) solid var(--hair-soft); }

.step-item::before {
  content: "Stage " counter(stage);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.78rem;
  inline-size: 2.2rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--half);
}

.step-item b {
  display: block;
  font-weight: 500;
}

.log-list {
  margin: 0.7rem 0 1rem;
  padding: 0;
  list-style: none;
  border-block-start: var(--rule) solid var(--hair-soft);
}

.log-list li {
  padding: 0.42rem 0.1rem 0.42rem 1.1rem;
  position: relative;
  border-block-end: var(--rule) solid var(--hair-soft);
  font-size: 0.93rem;
  line-height: 1.55;
}

.log-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15rem;
  inset-block-start: 0.95rem;
  inline-size: 0.34rem;
  block-size: 0.34rem;
  background: var(--half);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   9. The sheets. Three widget roots: the chair utilisation sheet, the diary
   load sheet and the clock readout. The arithmetic is printed line by line
   and the defaults in the markup match the printed working, so the page is
   complete and consistent before any script runs.
   -------------------------------------------------------------------------- */

.work-sheet {
  margin-block: 1.1rem 1.6rem;
  border: var(--rule) solid var(--hair);
  background: var(--surface);
}

.sheet-head {
  margin: 0;
  padding: 0.75rem 0.9rem 0.8rem;
  border-block-end: var(--rule) solid var(--hair-soft);
  background: var(--wash);
  font-family: Italiana, "Times New Roman", serif;
  font-size: 1.14rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.sheet-form {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem;
  border-block-end: var(--rule) solid var(--hair-soft);
}

.sheet-field {
  display: grid;
  gap: 0.22rem;
}

.field-name {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(46, 39, 36, 0.76);
}

.field-input {
  inline-size: 100%;
  padding: 0.45rem 0.55rem;
  border: var(--rule) solid var(--hair);
  border-block-end: 2px solid rgba(46, 39, 36, 0.3);
  background: var(--bg);
  color: var(--ink);
  font-family: "Wix Madefor Text", system-ui, sans-serif;
  font-size: 1rem;
  transition: border-color 170ms var(--ease), background-color 170ms var(--ease),
              box-shadow 170ms var(--ease);
}

.field-input:hover { background: var(--surface); }

.field-input:focus-visible {
  outline: none;
  border-color: var(--half);
  border-block-end-color: var(--half);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(162, 74, 98, 0.14);
}

.back-sheet { --half: var(--accent2); }

.back-sheet .field-input:focus-visible { box-shadow: 0 0 0 3px rgba(75, 107, 94, 0.14); }

.sheet-reset {
  justify-self: start;
  padding: 0.42rem 0.8rem;
  border: var(--rule) solid var(--hair);
  background: var(--bg);
  color: var(--ink);
  font-family: "Wix Madefor Text", system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 170ms var(--ease), border-color 170ms var(--ease),
              color 170ms var(--ease);
}

.sheet-reset:hover {
  background: var(--half);
  border-color: var(--half);
  color: var(--surface);
}

.sheet-reset:focus-visible {
  outline: 2px solid var(--half);
  outline-offset: 2px;
}

.sheet-work {
  margin: 0;
  padding: 0.85rem 0.9rem 0.9rem;
}

.work-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  padding-block: 0.34rem;
  border-block-end: var(--rule) dotted var(--hair);
  font-size: 0.92rem;
  line-height: 1.5;
}

.work-row:last-of-type { border-block-end: 0; }

.work-label {
  flex: 1 1 11rem;
  color: rgba(46, 39, 36, 0.74);
}

.work-value {
  flex: 0 1 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
  transition: color 200ms var(--ease);
}

.sheet-line {
  margin: 0.8rem 0 0;
  padding: 0.65rem 0.7rem;
  border-inline-start: 3px solid var(--half);
  background: var(--wash);
  font-size: 0.95rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.guide-note {
  margin: 0;
  padding: 0.6rem 0.9rem 0.75rem;
  border-block-start: var(--rule) solid var(--hair-soft);
  background: rgba(250, 244, 238, 0.7);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(46, 39, 36, 0.78);
}

/* --------------------------------------------------------------------------
   10. Clock readout. A single rAF ticker writes one line here. Everything it
   needs to say is also printed in the hours table, so a reader with scripting
   off loses the live line and nothing else.
   -------------------------------------------------------------------------- */

.clock-face {
  margin-block: 1.1rem;
  padding: 0.8rem 0.9rem 0.85rem;
  border: var(--rule) solid var(--hair);
  border-inline-start: 4px solid var(--accent2);
  background: var(--surface);
}

.clock-live {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.clock-live b {
  font-weight: 500;
  color: var(--accent2);
}

.clock-live .door-state { color: var(--accent); }

.clock-note {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(46, 39, 36, 0.6);
}

.tick-dot {
  display: inline-block;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  margin-inline-end: 0.3rem;
  border-radius: 50%;
  background: var(--accent2);
  animation: tick-fade 2s steps(2, end) infinite;
}

@keyframes tick-fade {
  50% { opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   11. Hours table and the drawn figures.
   -------------------------------------------------------------------------- */

.hours-table {
  inline-size: 100%;
  margin-block: 1rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.hours-table caption {
  padding-block-end: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: start;
  color: rgba(46, 39, 36, 0.6);
}

.hours-table th,
.hours-table td {
  padding: 0.42rem 0.5rem 0.42rem 0;
  border-block-end: var(--rule) solid var(--hair-soft);
  text-align: start;
  vertical-align: top;
}

.hours-table thead th {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(46, 39, 36, 0.6);
}

/* Row headers wrap. They were nowrap, and "Gel removal and re-apply" then
   pushed the beauty and hair tables past a 320px viewport - the one width
   where a table of three text columns has no room to spare. */
.hours-table tbody th {
  font-weight: 400;
  hyphens: auto;
}

@media (max-width: 23.5em) {
  .hours-table { font-size: 0.86rem; }
  .hours-table th,
  .hours-table td { padding-inline-end: 0.35rem; }
}

.day-name { color: var(--ink); }
.day-hours { font-variant-numeric: tabular-nums; }
.door-cell { color: var(--accent); }
.desk-cell { color: var(--accent2); }

.hours-table tbody tr {
  transition: background-color 170ms var(--ease);
}

.hours-table tbody tr:hover { background: rgba(255, 255, 255, 0.8); }

.plan-figure {
  margin: 1.1rem 0 1.3rem;
  padding: 0.75rem 0.75rem 0.5rem;
  border: var(--rule) solid var(--hair);
  background: var(--surface);
}

.plan-figure svg {
  inline-size: 100%;
  block-size: auto;
}

.figure-note {
  margin: 0.55rem 0 0.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(46, 39, 36, 0.68);
}

.plan-wall { fill: none; stroke: #2e2724; stroke-width: 2.4; }
.plan-inner { fill: none; stroke: rgba(46, 39, 36, 0.45); stroke-width: 1.2; }
.plan-soft { fill: rgba(250, 244, 238, 0.95); stroke: rgba(46, 39, 36, 0.3); stroke-width: 1; }
.plan-chair { fill: #a24a62; }
.plan-desk { fill: #4b6b5e; }
.plan-text { fill: #2e2724; font-family: "Wix Madefor Text", system-ui, sans-serif; font-size: 8.5px; }
.plan-tick { stroke: rgba(46, 39, 36, 0.4); stroke-width: 1; }
.door-bar { fill: #a24a62; }
.desk-bar { fill: #4b6b5e; }

/* --------------------------------------------------------------------------
   12. Page index and registered particulars.
   -------------------------------------------------------------------------- */

.path-list {
  margin: 1rem 0 1.2rem;
  padding: 0;
  list-style: none;
  border-block-start: var(--rule) solid var(--hair);
}

.path-item {
  border-block-end: var(--rule) solid var(--hair-soft);
  transition: background-color 180ms var(--ease);
}

.path-item:hover { background: var(--surface); }

.path-item a {
  display: block;
  padding: 0.6rem 0.5rem 0.65rem;
  color: var(--ink);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
  transition: border-color 180ms var(--ease), padding-inline-start 180ms var(--ease);
}

.path-item a:hover,
.path-item a:focus-visible {
  border-inline-start-color: var(--half);
  padding-inline-start: 0.8rem;
}

.path-item a:focus-visible {
  outline: 2px solid var(--half);
  outline-offset: -2px;
}

.path-name {
  display: block;
  font-family: Italiana, "Times New Roman", serif;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
}

.path-note {
  display: block;
  margin-block-start: 0.15rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(46, 39, 36, 0.7);
}

.back-path { --half: var(--accent2); }

.fact-list {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
  border-block-start: var(--rule) solid var(--hair);
}

.fact-term {
  margin: 0;
  padding: 0.45rem 0 0.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(46, 39, 36, 0.58);
}

.fact-value {
  margin: 0;
  padding: 0 0 0.45rem;
  border-block-end: var(--rule) solid var(--hair-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13. Footer. The registered particulars, in the order the registry holds
   them, on every page of the site.
   -------------------------------------------------------------------------- */

.page-foot {
  margin-block-start: 2.2rem;
  border-block-start: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.72);
  padding-block: 1.3rem 1.8rem;
}

.foot-name {
  margin: 0 0 0.6rem;
  font-family: Italiana, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.foot-office {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  line-height: 1.75;
  font-style: normal;
}

.foot-office span { display: block; }

.foot-facts {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.7;
  color: rgba(46, 39, 36, 0.8);
}

.foot-facts span { display: block; }

.foot-mail {
  color: var(--accent);
  text-decoration-thickness: 1px;
  transition: color 170ms var(--ease), background-color 170ms var(--ease);
}

.foot-mail:hover {
  background: var(--accent);
  color: var(--surface);
  text-decoration: none;
}

.foot-mail:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. Sub-pages echo the seam as a single band under the masthead: the same
   24.5-degree boundary, rose above it and green below, no movement. The full
   set-piece belongs to the front page only.
   -------------------------------------------------------------------------- */

.seam-thread {
  block-size: 1.35rem;
  border-block-end: var(--rule) solid var(--hair);
  background-image: linear-gradient(114.5deg,
    rgba(162, 74, 98, 0.16) 0 49.65%,
    rgba(46, 39, 36, 0.55) 49.65% 50.1%,
    rgba(75, 107, 94, 0.16) 50.1% 100%);
}

.page-main {
  display: block;
  padding-block-start: 0.4rem;
}

.page-main:focus { outline: none; }

/* --------------------------------------------------------------------------
   15. Wider viewports. The measure does not become a multi-column grid: the
   centred column is the layout. Only the opener earns the extra width, where
   the two corners finally sit on opposite sides of the real diagonal.
   -------------------------------------------------------------------------- */

@media (min-width: 34em) {
  .page-shell,
  .page-wide { padding-inline: 1.6rem; }

  .sheet-form { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
  .sheet-reset { grid-column: 1 / -1; }

  .fact-list {
    grid-template-columns: 11rem 1fr;
    align-items: baseline;
  }

  .fact-term { padding-block: 0.5rem 0.5rem; border-block-end: var(--rule) solid var(--hair-soft); }
  .fact-value { padding-block: 0.5rem; }
}

@media (min-width: 46em) {
  :root { --measure: 35rem; }

  .seam-opener { min-block-size: 30rem; }

  .seam-stage {
    max-inline-size: 52rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    min-block-size: 30rem;
    padding-block: 2.1rem 2.3rem;
    gap: 1.1rem 2rem;
  }

  .front-corner {
    grid-area: 1 / 1 / 2 / 2;
    align-self: start;
    max-inline-size: 17rem;
  }

  .back-corner {
    grid-area: 2 / 2 / 3 / 3;
    align-self: end;
    max-inline-size: 17rem;
  }

  .seam-mark {
    grid-area: 1 / 1 / 3 / 3;
    min-block-size: 0;
    pointer-events: none;
  }

  .page-head { padding-block: 1.4rem 1.15rem; }

  .step-item { padding-inline-start: 3.1rem; }
  .step-item::before { inline-size: 2.8rem; font-size: 0.64rem; }
}

@media (min-width: 62em) {
  .seam-opener { min-block-size: 30rem; }
  .seam-stage { min-block-size: 30rem; }
  .seam-mark { font-size: 2.35rem; }
}

/* --------------------------------------------------------------------------
   17. Which column leads. The switch is the same two anchors everywhere, but
   a page has a home side: the four desk pages open with the back-office
   column first and the front-of-house column second, and :target flips it.
   The wrapper class on body is the only thing that decides this, so the two
   defaults cannot drift apart.
   -------------------------------------------------------------------------- */

.desk-page .back-half {
  background: var(--surface);
  border-block-start-width: 5px;
}

.desk-page .front-half {
  background: rgba(255, 255, 255, 0.56);
  border-block-start-width: 2px;
}

.desk-page #front-desk:target { order: -1; }

.desk-page .switch-front {
  border-block-start-color: transparent;
  background: transparent;
}

.desk-page .switch-back {
  border-block-start-color: var(--accent2);
  background: rgba(75, 107, 94, 0.07);
}

.desk-page:has(#front-desk:target) .switch-back {
  border-block-start-color: transparent;
  background: transparent;
}

.desk-page:has(#front-desk:target) .switch-front {
  border-block-start-color: var(--accent);
  background: rgba(162, 74, 98, 0.07);
}

.desk-page:has(#front-desk:target) .front-half {
  background: var(--surface);
  border-block-start-width: 5px;
}

.desk-page:has(#front-desk:target) .back-half {
  background: rgba(255, 255, 255, 0.56);
  border-block-start-width: 2px;
}

.desk-page .block-head,
.desk-page .sub-head::after,
.desk-page .step-item::before { --half: var(--accent2); }

.desk-page .page-kicker em { border-block-end-color: var(--accent2); }

/* --------------------------------------------------------------------------
   16. Reduced motion. Last block in the file so nothing can out-order it,
   and every rule carries !important so nothing can out-specify it.

   Every keyframe in this stylesheet is written with a from-state only: the
   element's resting style IS the finished state. Switching the animations
   off therefore lands the seam drawn, both halves in place, the name set on
   the diagonal and every panel already risen - not a faster version of the
   same sequence.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .seam-front,
  .seam-back,
  .seam-mark,
  .front-corner,
  .back-corner,
  .lead-panel,
  .tick-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* The rule and the badge line keep their own resting opacity: landing them
     at 1 would show a darker seam than anybody with motion enabled sees. */
  .seam-rule,
  .badge-line {
    animation: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
  }

  .seam-mark { letter-spacing: 0.14em !important; }
  .tick-dot { opacity: 1 !important; }
}