@charset "utf-8";

/*
Theme Name: Sartora - Bespoke Tailor & Atelier HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Chalk Lines & Shapes
   1.3 Utilities
   1.4 Section Titles
   1.5 Buttons & Links
   1.6 Fields
   1.7 Panels, Tags & Stars
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language & Currency Pickers
7. Components
   7.1 Shear Cut & Word Rise
   7.2 Basting Stitch
   7.3 Accordion
   7.4 Tabs & Arrows
   7.5 Faces & Badges
   7.6 Newsletter & Social
   7.7 Label & Value Rows
   7.8 Cards
   7.9 Quote Cards
   7.10 Work Tiles
   7.11 Choices & Steppers
   7.12 Tabs & Pagination
   7.13 Sidebar
   7.14 Play & Notes
8. Home 01 - The Atelier
   8.1 Hero Slider
   8.2 Intro & Services
   8.3 Split Bands
   8.4 The Jacket On The Form
   8.5 Tailors In Dashed Columns
   8.6 Marquee
   8.7 The Needle Bars
   8.8 The Photo Band
   8.9 Testimonials & News
   8.10 The Mills
9. Home 02 - Couture
   9.1 Three-Up Hero
   9.2 Statement & The Shop In Dashed Cells
   9.3 The Fabric Book
   9.4 The Three Makes
   9.5 The Photo Grid
   9.6 The Arch & The Words
   9.7 Journal Masonry
   9.8 Newsletter & Instagram
10. Home 03 - The Cutting Room
   10.1 Typographic Hero
   10.2 The Collage
   10.3 Intro, Film & Price List
   10.4 The Three Fittings
   10.5 The Questions
11. Inner Pages
   11.1 Services
   11.2 The Bespoke Process
   11.3 Commissions & Projects
   11.4 About & History
   11.5 Tailors
   11.6 FAQ & Contact
   11.7 Shop Toolbar & Size Guide
   11.8 Coming Soon & 404
12. Atelier Tools
   12.1 Booking Wizard
   12.2 The Builder
   12.3 The Measurement Guide
   12.4 Alterations
   12.5 The Cloth Library
   12.6 Cloth Details
13. Swatch Colours
14. Atelier Shop
   14.1 Product Cards
   14.2 Shop Grid
   14.3 Product Page
   14.4 Bag, Checkout & Wishlist
15. Journal & Account
   15.1 Journal
   15.2 The Article
   15.3 Account
16. Page Title
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes): the base's forest night, chalk camel, khaki, sage and paper; olive for small type */
  --sr-night: #1F261E;
  --sr-night-rgb: 31, 38, 30;
  --sr-night-2: #161B15;
  --sr-camel: #C7B299;
  --sr-camel-rgb: 199, 178, 153;
  --sr-khaki: #BFA886;
  --sr-sage: #9FA695;
  --sr-olive: #646B4C;
  --sr-olive-rgb: 100, 107, 76;
  --sr-paper: #FAF8F5;
  --sr-paper-2: #F2EFEB;
  --sr-oxblood: #7A1F1F;
  --sr-star: #F5B301;
  /* semantic: white is the default; [data-theme="dark"] turns the lights down */
  --sr-bg: #FFFFFF;
  --sr-bg-rgb: 255, 255, 255;
  --sr-surface: #FFFFFF;
  --sr-surface-rgb: 255, 255, 255;
  --sr-panel: #FAF8F5;
  --sr-panel-rgb: 250, 248, 245;
  --sr-panel-2: #F2EFEB;
  --sr-heading: #1E1E1E;
  --sr-heading-rgb: 30, 30, 30;
  --sr-text: #333333;
  --sr-muted: #6B6A64;
  --sr-line: #ECE7DF;
  --sr-line-2: #DCD3C6;
  --sr-dash: #C7B299;
  --sr-field: #F6F3EE;
  --sr-primary: #1F261E;
  --sr-on-primary: #FAF8F5;
  --sr-accent-text: #646B4C;
  --sr-tonal: #F2EFEB;
  --sr-ok: #46703F;
  --sr-err: #A3392B;
  --sr-shadow: 0 18px 40px rgba(31, 38, 30, 0.07);
  --sr-shadow-lg: 0 30px 70px rgba(31, 38, 30, 0.14);
  --sr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type: Jost for headings, body, menu and buttons; Ibarra Real Nova italic for subtitles, prices and accent words */
  --sr-ff-head: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --sr-ff-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --sr-ff-serif: 'Ibarra Real Nova', Georgia, 'Times New Roman', serif;
  --sr-fs-h1: clamp(42px, 4.5vw, 74px);
  --sr-fs-h2: clamp(32px, 3vw, 50px);
  --sr-fs-h3: clamp(24px, 1.75vw, 30px);
  --sr-fs-h4: 23px;
  --sr-fs-h5: 20px;
  --sr-fs-h6: 17px;
  /* WebGL colours (the pattern paper) */
  --gl-1: #C7B299;
  --gl-2: #646B4C;
  --gl-3: #9FA695;
  --gl-alpha: 0.55;
  /* the canvases' inks (the dress form, the jacket, the figure, the footer lapel) */
  --cv-ink: #1E1E1E;
  --cv-form: #D9CDB8;
  --cv-form-2: #BFAF93;
  --cv-stand: #3B342C;
  --cv-chalk: #FFFFFF;
  --cv-baste: #FFFFFF;
  --cv-paper: #FAF8F5;
  --cv-line: #C7B299;
  --cv-muted: #B5AEA2;
  --cv-body: #EFE9E0;
}
[data-theme="dark"] {
  --sr-bg: #111510;
  --sr-bg-rgb: 17, 21, 16;
  --sr-surface: #181E17;
  --sr-surface-rgb: 24, 30, 23;
  --sr-panel: #161C15;
  --sr-panel-rgb: 22, 28, 21;
  --sr-panel-2: #1F261E;
  --sr-heading: #F2EFEB;
  --sr-heading-rgb: 242, 239, 235;
  --sr-text: #C9C5BC;
  --sr-muted: #A19D93;
  --sr-line: #263025;
  --sr-line-2: #35402F;
  --sr-dash: #6F6656;
  --sr-field: #1C231B;
  --sr-primary: #C7B299;
  --sr-on-primary: #1F261E;
  --sr-accent-text: #C7B299;
  --sr-tonal: #212A20;
  --sr-ok: #8FC086;
  --sr-err: #E5877A;
  --sr-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --sr-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
  --gl-1: #8C7E68;
  --gl-2: #9FA695;
  --gl-3: #C7B299;
  --gl-alpha: 0.42;
  --cv-ink: #F2EFEB;
  --cv-form: #4A4237;
  --cv-form-2: #3A342B;
  --cv-stand: #8C7E68;
  --cv-paper: #181E17;
  --cv-line: #8C7E68;
  --cv-muted: #4D5547;
  --cv-body: #262E24;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--sr-bg);
  color: var(--sr-text);
  font-family: var(--sr-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.76;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--sr-ease), background-color 0.3s var(--sr-ease);
}
a:hover {
  color: var(--sr-accent-text);
}
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
::selection {
  background: var(--sr-night);
  color: var(--sr-paper);
}
:focus-visible {
  outline: 2px solid var(--sr-olive);
  outline-offset: 3px;
}
[data-theme="dark"] :focus-visible {
  outline-color: var(--sr-camel);
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}
/* the phone gutter Bootstrap's g-5 would otherwise push past the screen */

/*----- 1.1 Typography -----*/
/* every heading in Jost 400, Title Case, light and airy; an <em> inside is the italic accent word in Ibarra Real Nova */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--sr-heading);
  font-family: var(--sr-ff-head);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.005em;
}
h1 em, h2 em, h3 em, h4 em, .hero-title em, .sr-h2 em, .sr-h3 em {
  font-family: var(--sr-ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
h1 {
  font-size: var(--sr-fs-h1);
  line-height: 1.12;
}
h2 {
  font-size: var(--sr-fs-h2);
}
h3 {
  font-size: var(--sr-fs-h3);
  line-height: 1.2;
}
h4 {
  font-size: var(--sr-fs-h4);
  line-height: 1.25;
}
h5 {
  font-size: var(--sr-fs-h5);
  line-height: 1.3;
}
h6 {
  font-size: var(--sr-fs-h6);
  line-height: 1.35;
  font-weight: 500;
}
/* size by class, level by outline (a legend or a span can carry them too) */
.sr-h2,
.sr-h3,
.sr-h4,
.sr-h5,
.sr-h6 {
  color: var(--sr-heading);
  font-family: var(--sr-ff-head);
  font-weight: 400;
  line-height: 1.2;
}
.sr-h2 {
  font-size: var(--sr-fs-h2);
  line-height: 1.16;
}
.sr-h3 {
  font-size: var(--sr-fs-h3);
}
.sr-h4 {
  font-size: var(--sr-fs-h4);
}
.sr-h5 {
  font-size: var(--sr-fs-h5);
}
.sr-h6 {
  font-size: var(--sr-fs-h6);
  font-weight: 500;
}
.sr-lead {
  font-size: 18.5px;
  line-height: 1.72;
  color: var(--sr-text);
}
/* the base's subtitle: Ibarra Real Nova italic in olive, never caps */
.sr-eyebrow,
.sr-sub {
  display: inline-block;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}
.sr-eyebrow {
  margin-bottom: 14px;
}
.sr-sub {
  font-size: 16px;
}
/* small caps labels: menu, buttons, table heads */
.sr-label {
  display: inline-block;
  margin: 0 0 18px;
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
.sr-num {
  font-family: var(--sr-ff-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.sr-serif {
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
/* the price voice: Ibarra italic, as the base's prices */
.sr-price {
  font-family: var(--sr-ff-serif);
  font-style: italic;
}

/*----- 1.2 Chalk Lines & Shapes -----*/
/* the base's chalk line: camel dashes; .is-scissors carries the shears that cut along it */
.sr-dash {
  position: relative;
  display: block;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px);
}
.sr-dash.is-scissors {
  margin: 40px 0 0;
}
.sr-dash .dash-shears {
  position: absolute;
  top: -12px;
  left: 14%;
  color: var(--sr-heading);
  font-size: 20px;
  line-height: 1;
  transform: scaleX(-1) rotate(0deg);
}
/* arches: a full round top (the base's portraits) or a round end (its "D" photographs) */
.sr-arch {
  overflow: hidden;
  border-radius: 999px 999px 0 0;
}
.sr-arch-b {
  overflow: hidden;
  border-radius: 0 0 999px 999px;
}
.sr-arch-r {
  overflow: hidden;
  border-radius: 0 999px 999px 0;
}

/*----- 1.3 Utilities -----*/
.sr-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sec-pt {
  padding-top: 130px;
}
.sec-pb {
  padding-bottom: 130px;
}
.sec-pt-sm {
  padding-top: 80px;
}
.sec-pb-sm {
  padding-bottom: 80px;
}
.sr-bg-panel {
  position: relative;
  isolation: isolate;
  background-color: var(--sr-panel);
}
.sr-bg-panel-2 {
  position: relative;
  isolation: isolate;
  background-color: var(--sr-panel-2);
}
.sr-bg-panel > .container,
.sr-bg-panel-2 > .container {
  position: relative;
  z-index: 1;
}
/* the forest night band: the base's own dark ground */
.sr-night {
  position: relative;
  isolation: isolate;
  background: var(--sr-night);
  color: rgba(250, 248, 245, 0.78);
  --sr-heading: #FAF8F5;
  --sr-text: rgba(250, 248, 245, 0.78);
  --sr-muted: rgba(250, 248, 245, 0.62);
  --sr-accent-text: #C7B299;
  --sr-line: rgba(199, 178, 153, 0.18);
  --sr-line-2: rgba(199, 178, 153, 0.3);
  --sr-dash: rgba(199, 178, 153, 0.55);
  --sr-primary: #C7B299;
  --sr-on-primary: #1F261E;
  --sr-tonal: rgba(250, 248, 245, 0.08);
  --sr-field: rgba(250, 248, 245, 0.06);
  --sr-panel: #263025;
  --sr-surface: #263025;
  --gl-1: #C7B299;
  --gl-2: #9FA695;
  --gl-3: #8C7E68;
  --gl-alpha: 0.36;
}
[data-theme="dark"] .sr-night {
  background: #0B0E0A;
}
.sr-night > .container {
  position: relative;
  z-index: 1;
}
.sr-rel {
  position: relative;
}
.sr-center-btn {
  margin-top: 56px;
  text-align: center;
}
.is-hidden,
.is-unmatched,
[hidden] {
  display: none !important;
}
.sr-gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.sr-gl.is-on {
  opacity: 1;
}
/* photo grounds: the photograph covers its band under a forest wash from the reading side, the copy in paper white */
.sr-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--sr-night);
  color: rgba(250, 248, 245, 0.86);
  --sr-heading: #FAF8F5;
  --sr-text: rgba(250, 248, 245, 0.86);
  --sr-accent-text: #D8C7AE;
  --sr-dash: rgba(250, 248, 245, 0.5);
}
.sr-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sr-photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(31, 38, 30, 0.82) 0%, rgba(31, 38, 30, 0.55) 48%, rgba(31, 38, 30, 0.22) 100%);
}
.sr-photo-band > .container {
  position: relative;
  z-index: 1;
}

/*----- 1.4 Section Titles -----*/
.sr-title {
  margin-bottom: 64px;
}
.sr-title.is-center {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sr-title h2 {
  margin: 0;
}
.sr-title .sr-lead {
  margin: 22px 0 0;
}
.sr-title.is-center .sr-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}
.sr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 56px;
}
.sr-title-row .sr-title {
  margin-bottom: 0;
}

/*----- 1.5 Buttons & Links -----*/
/* the base's button, made tonal: a filled face with the base's camel dash run 4px inside its edge as a basting
   stitch; tracked Jost caps; house physics: a lift, and the chevron slides out while its twin slides in */
.sr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: 0;
  background: var(--sr-primary);
  color: var(--sr-on-primary);
  font-family: var(--sr-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--sr-ease), color 0.35s var(--sr-ease), box-shadow 0.35s var(--sr-ease), transform 0.35s var(--sr-ease);
}
.sr-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(var(--sr-camel-rgb), 0.75);
  pointer-events: none;
  transition: border-color 0.35s ease, inset 0.35s var(--sr-ease);
}
.sr-btn i {
  position: relative;
  font-size: 10px;
  transition: transform 0.4s var(--sr-ease), opacity 0.3s ease;
}
.sr-btn i.fa-chevron-right::after {
  content: "\f054";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sr-btn:hover {
  background: var(--sr-olive);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--sr-night-rgb), 0.2);
  transform: translateY(-2px);
}
.sr-btn:hover::before {
  inset: 6px;
  border-color: rgba(255, 255, 255, 0.7);
}
.sr-btn:hover i.fa-chevron-right {
  transform: translateX(22px);
}
.sr-btn:hover i.fa-chevron-right::after {
  opacity: 1;
}
[data-theme="dark"] .sr-btn::before,
.sr-night .sr-btn::before {
  border-color: rgba(var(--sr-night-rgb), 0.45);
}
[data-theme="dark"] .sr-btn:hover,
.sr-night .sr-btn:hover {
  background: var(--sr-paper);
  color: var(--sr-night);
}
/* paper face over photographs */
.sr-btn.is-light {
  background: var(--sr-paper);
  color: var(--sr-night);
}
.sr-btn.is-light::before {
  border-color: rgba(var(--sr-olive-rgb), 0.55);
}
.sr-btn.is-light:hover {
  background: var(--sr-camel);
  color: var(--sr-night);
}
/* the tonal face: secondary actions */
.sr-btn.is-tonal {
  background: var(--sr-tonal);
  color: var(--sr-heading);
}
.sr-btn.is-tonal::before {
  border-color: rgba(var(--sr-olive-rgb), 0.45);
}
.sr-btn.is-tonal i {
  color: var(--sr-accent-text);
}
.sr-btn.is-tonal:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.sr-btn.is-tonal:hover::before {
  border-color: rgba(var(--sr-camel-rgb), 0.7);
}
.sr-btn.is-tonal:hover i {
  color: var(--sr-camel);
}
[data-theme="dark"] .sr-btn.is-tonal::before,
.sr-night .sr-btn.is-tonal::before {
  border-color: rgba(var(--sr-camel-rgb), 0.35);
}
.sr-btn.is-sm {
  height: 46px;
  padding: 0 24px;
  font-size: 11.5px;
}
.sr-btn.is-block {
  width: 100%;
}
.sr-btn[disabled],
.sr-btn.is-off {
  opacity: 0.45;
  pointer-events: none;
}
.sr-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
}
/* the base's italic link with its chevron */
.sr-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
}
.sr-more::after {
  content: "\f054";
  color: var(--sr-accent-text);
  font-family: "Font Awesome 6 Free";
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  transition: transform 0.35s var(--sr-ease);
}
.sr-more:hover {
  color: var(--sr-accent-text);
}
.sr-more:hover::after {
  transform: translateX(5px);
}
.sr-more.is-light {
  color: #FFFFFF;
}
.sr-more.is-light::after {
  color: #FFFFFF;
}

/*----- 1.6 Fields -----*/
.sr-field {
  position: relative;
}
.sr-field > label,
.sr-label-text {
  display: block;
  margin-bottom: 8px;
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sr-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 46px 0 18px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--sr-field);
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.sr-input::placeholder {
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-style: italic;
  opacity: 1;
}
.sr-input:focus {
  border-color: var(--sr-olive);
  outline: 0;
}
textarea.sr-input {
  height: 150px;
  padding-top: 16px;
  resize: vertical;
}
.sr-field > i {
  position: absolute;
  right: 18px;
  bottom: 21px;
  color: var(--sr-accent-text);
  font-size: 14px;
  pointer-events: none;
}
.sr-field.is-area > i {
  bottom: auto;
  top: 50px;
}
.sr-bg-panel .sr-input,
.sr-panel .sr-input {
  background: var(--sr-surface);
}
.sr-field.is-invalid .sr-input,
.sr-input.is-invalid {
  border-color: var(--sr-err);
}
.sr-field.is-line {
  margin-bottom: 26px;
}
.sr-field.is-line .sr-input {
  height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--sr-line-2);
  background: transparent;
}
.sr-field.is-line textarea.sr-input {
  height: 110px;
  padding-top: 12px;
}
.sr-field.is-line .sr-input:focus {
  border-bottom-color: var(--sr-olive);
}
.sr-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sr-text);
  font-size: 15px;
  cursor: pointer;
}
.sr-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--sr-olive);
}
input[type="range"] {
  accent-color: var(--sr-olive);
}
.form-status {
  margin: 14px 0 0;
  font-size: 15px;
}
.form-status:empty {
  display: none;
}
.form-status.is-ok {
  color: var(--sr-ok);
}
.form-status.is-error {
  color: var(--sr-err);
}

/*----- 1.7 Panels, Tags & Stars -----*/
.sr-panel {
  padding: 44px;
  background: var(--sr-panel);
}
.sr-bg-panel .sr-panel {
  background: var(--sr-surface);
}
/* a panel framed by the chalk dash, the base's pricing card edge */
.sr-chalk-box {
  position: relative;
  padding: 44px;
  background: var(--sr-surface);
}
.sr-chalk-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--sr-dash);
  pointer-events: none;
}
.sr-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
}
.sr-tag.is-night {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.sr-tag.is-sale {
  background: var(--sr-oxblood);
  color: #FFFFFF;
}
.sr-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--sr-star);
  font-size: 12px;
}
.sr-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sr-muted);
}
.sr-dot.is-on {
  background: var(--sr-ok);
  box-shadow: 0 0 0 4px rgba(70, 112, 63, 0.16);
}
/* drawn atelier icons in two inks */
.sr-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
}
.sr-ico img {
  width: 100%;
  height: 100%;
}
.sr-ico .ico-light,
[data-theme="dark"] .sr-ico .ico-ink,
.sr-night .sr-ico .ico-ink,
.sr-photo-band .sr-ico .ico-ink {
  display: none;
}
[data-theme="dark"] .sr-ico .ico-light,
.sr-night .sr-ico .ico-light,
.sr-photo-band .sr-ico .ico-light {
  display: block;
}
.sr-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--sr-night);
  color: var(--sr-paper);
  font-size: 15px;
  box-shadow: var(--sr-shadow-lg);
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s var(--sr-ease);
}
.sr-toast i {
  color: var(--sr-camel);
}
.sr-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* the base's round "Top" button, its ring drawn in the chalk dash */
.sr-back-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sr-surface);
  color: var(--sr-heading);
  box-shadow: var(--sr-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s var(--sr-ease), visibility 0.35s, background-color 0.3s ease, color 0.3s ease;
}
.sr-back-top::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--sr-dash);
  border-radius: 50%;
  transition: transform 0.8s var(--sr-ease);
}
.sr-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sr-back-top:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.sr-back-top:hover::before {
  transform: rotate(90deg);
}

/*======================
2. Preloader
========================*/
/* Tape Measure: the wordmark on the page's ground; a tailor's tape runs out of its case across the screen, its
   marks travelling with the tip, then snaps back and pulls the panel with it (the panel's right edge follows the tip). */
.sr-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--sr-bg);
  overflow: hidden;
}
.pre-mark {
  position: absolute;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
}
.pre-word {
  display: block;
  width: auto;
  height: 34px;
}
.pre-word.is-light,
[data-theme="dark"] .pre-word {
  display: none;
}
[data-theme="dark"] .pre-word.is-light {
  display: block;
}
.pre-row {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(41% + 64px);
  height: 64px;
}
/* the case: a forest disc with a brass rim and the button mark */
.pre-case {
  position: absolute;
  left: 7vw;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1F261E;
  box-shadow: inset 0 0 0 4px #2E382C, inset 0 0 0 5px rgba(199, 178, 153, 0.5), 0 12px 26px rgba(31, 38, 30, 0.22);
}
.pre-case img {
  width: 28px;
  height: 28px;
}
.pre-tape {
  position: absolute;
  left: calc(7vw + 52px);
  top: 12px;
  width: 0;
  height: 40px;
}
.pre-tape .tape-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(31, 38, 30, 0.12);
}
.pre-tape canvas {
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
}
/* the brass hook at the tip */
.pre-tip {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 7px;
  height: 52px;
  border-radius: 1px;
  background: linear-gradient(90deg, #8E6F3B, #D9BE84 45%, #9C7D45);
}

/*======================
3. Header
========================*/
/* The base's header in two looks. "is-centre" (the Main home): a tall top row - the email in italic left, the
   wordmark centred, the phone right - over the menu row. Style one: a slim italic top bar, then the wordmark left,
   the menu in tracked caps across the middle, the actions right. "is-over" lies on a photograph in paper white and
   turns into the white bar when it sticks; the active item carries the base's small dot, never an underline. */
.sr-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--sr-bg);
  --hd-ink: var(--sr-heading);
  --hd-hover: var(--sr-accent-text);
  --hd-icon: var(--sr-tonal);
  --hd-line: var(--sr-line);
  --hd-top: var(--sr-panel);
  --hd-top-ink: var(--sr-text);
}
.sr-header .wide {
  display: flex;
  align-items: center;
  padding: 0 44px;
}
.sr-header.is-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: transparent;
  --hd-ink: #FAF8F5;
  --hd-hover: #FAF8F5;
  --hd-icon: rgba(250, 248, 245, 0.14);
  --hd-line: rgba(250, 248, 245, 0.2);
  --hd-top: transparent;
  --hd-top-ink: rgba(250, 248, 245, 0.9);
}
.sr-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.sr-logo img {
  width: auto;
  height: 24px;
}
.sr-logo .logo-light,
[data-theme="dark"] .sr-logo .logo-main,
.is-over:not(.is-sticky) .sr-logo .logo-main {
  display: none;
}
[data-theme="dark"] .sr-logo .logo-light,
.is-over:not(.is-sticky) .sr-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 44px;
  background: var(--hd-top);
  color: var(--hd-top-ink);
  font-size: 14px;
  border-bottom: 1px solid var(--hd-line);
  transition: height 0.4s var(--sr-ease), opacity 0.3s ease;
}
.header-top .wide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* the right group keeps the third column when the wordmark is not in the row */
.header-top .top-right {
  grid-column: 3;
  justify-content: flex-end;
}
.header-top .top-italic,
.header-top .sr-open {
  white-space: nowrap;
}
.top-logo {
  display: none;
}
.top-italic {
  font-family: var(--sr-ff-serif);
  font-size: 15.5px;
  font-style: italic;
}
.header-top a:hover {
  color: var(--hd-hover);
}
.sr-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sr-open::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sr-err);
}
.sr-open.is-open::before {
  background: #5E9A55;
  box-shadow: 0 0 0 4px rgba(94, 154, 85, 0.2);
}
.is-over:not(.is-sticky) .header-top .lang-btn,
.is-over:not(.is-sticky) .header-top .cur-btn {
  background: rgba(250, 248, 245, 0.14);
  color: #FAF8F5;
}
/* the centred look: a tall top row holding the wordmark */
.sr-header.is-centre .header-top {
  height: 96px;
}
.sr-header.is-centre .top-logo {
  display: inline-flex;
  justify-self: center;
}
.sr-header.is-centre .top-logo img {
  height: 30px;
}
.sr-header.is-centre .header-main .sr-logo {
  display: none;
}

/* the theme switch sits in the top row, a size smaller */
.header-icon.is-top {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.is-over:not(.is-sticky) .header-icon.is-top {
  background: rgba(250, 248, 245, 0.14);
  color: #FAF8F5;
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 92px;
  gap: 40px;
}
.sr-header.is-centre .header-main .wide {
  height: 70px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 180px;
}
.header-left .sr-open {
  font-size: 14px;
  color: var(--hd-ink);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}
[data-theme="dark"] .header-icon:hover {
  background: var(--sr-camel);
  color: var(--sr-night);
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--sr-olive);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.sr-theme-toggle .ti-sun,
[data-theme="dark"] .sr-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .sr-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 10px;
}
.is-over:not(.is-sticky) .header-btn {
  background: var(--sr-paper);
  color: var(--sr-night);
}
.is-over:not(.is-sticky) .header-btn::before {
  border-color: rgba(var(--sr-olive-rgb), 0.5);
}
.is-over:not(.is-sticky) .header-btn:hover {
  background: var(--sr-camel);
}
/* the base's menu mark: a round button with two dots over two dots */
.sr-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hd-line);
  color: var(--hd-ink);
  cursor: pointer;
}
.sr-menu-toggle span {
  display: grid;
  grid-template-columns: 4px 4px;
  gap: 4px;
}
.sr-menu-toggle span i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/*----- 3.3 Main Menu -----*/
.sr-nav {
  margin: 0 auto;
}
.sr-nav > ul {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sr-nav li {
  position: relative;
}
.sr-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 34px 0;
  color: var(--hd-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sr-header.is-centre .sr-nav > ul > li > a {
  padding: 23px 0;
}
.sr-nav > ul > li > a i {
  font-size: 7px;
  opacity: 0.55;
  transition: transform 0.3s var(--sr-ease);
}
/* the active item: the base's small dot before the label */
.sr-nav > ul > li > a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s var(--sr-ease);
}
.sr-nav > ul > li.active > a::before,
.sr-nav > ul > li:hover > a::before {
  opacity: 1;
  transform: scale(1);
}
.sr-nav > ul > li:hover > a,
.sr-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.sr-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.sr-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -30px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 20px 0;
  list-style: none;
  background: var(--sr-surface);
  box-shadow: var(--sr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--sr-ease), transform 0.35s var(--sr-ease), visibility 0.3s;
}
/* a chalk dash along the menu's top edge */
.sr-nav .sub-menu::after,
.sr-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sr-camel) 0 6px, transparent 6px 11px);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.sr-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.sr-nav li:hover > .sub-menu,
.sr-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sr-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 30px;
  color: var(--sr-heading);
  font-size: 16px;
  transition: color 0.3s var(--sr-ease), padding 0.35s var(--sr-ease);
}
.sr-nav .sub-menu a i {
  font-size: 7px;
  color: var(--sr-muted);
}
.sr-nav .sub-menu li:hover > a,
.sr-nav .sub-menu li.active > a {
  padding-left: 38px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.sr-nav .sub-menu .sub-menu {
  top: -20px;
  left: 100%;
}
.sr-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}
/* the third level opens left only where a right one would leave the window */
.sr-nav > ul > li:nth-last-child(-n+2) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.sr-nav > ul > li:nth-last-child(-n+2) .sub-menu .sub-menu::before {
  left: auto;
  right: -12px;
}

/*----- 3.4 Home Mega Menu -----*/
.sr-nav .has-mega {
  position: static;
}
.sr-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(1000px, calc(100vw - 60px));
  padding: 30px;
  background: var(--sr-surface);
  box-shadow: var(--sr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--sr-ease), transform 0.35s var(--sr-ease), visibility 0.3s;
}
.sr-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.sr-nav .has-mega:hover > .mega-menu,
.sr-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--sr-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--sr-panel);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--sr-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 15px;
  font-style: italic;
}
.mega-meta b {
  font-size: 18px;
  font-weight: 400;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--sr-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.sr-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: var(--sr-bg);
  --hd-ink: var(--sr-heading);
  --hd-hover: var(--sr-accent-text);
  --hd-icon: var(--sr-tonal);
  --hd-line: var(--sr-line);
  animation: sr-header-in 0.6s var(--sr-ease) both;
}
.sr-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.sr-header.is-sticky .header-main {
  background: rgba(var(--sr-bg-rgb), 0.96);
  box-shadow: 0 10px 30px rgba(31, 38, 30, 0.07);
}
.sr-header.is-sticky .header-main .wide,
.sr-header.is-centre.is-sticky .header-main .wide {
  height: 74px;
}
.sr-header.is-sticky .sr-nav > ul > li > a,
.sr-header.is-centre.is-sticky .sr-nav > ul > li > a {
  padding: 26px 0;
}
.sr-header.is-centre.is-sticky .header-main .sr-logo {
  display: inline-flex;
}
.sr-header.is-centre.is-sticky .header-left {
  display: none;
}
.sr-header-spacer {
  display: none;
}
.sr-header-spacer.is-on {
  display: block;
}
@keyframes sr-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.sr-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--sr-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--sr-ease), box-shadow 0.6s var(--sr-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.sr-offcanvas.open {
  box-shadow: var(--sr-shadow-lg);
  transform: none;
}
.sr-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(17, 17, 17, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.sr-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--sr-line);
}
.offcanvas-head .sr-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--sr-panel);
  color: var(--sr-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--sr-ease);
}
.offcanvas-close:hover {
  background: var(--sr-olive);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--sr-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--sr-heading);
  font-family: var(--sr-ff-head);
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--sr-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--sr-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 1px dashed var(--sr-line-2);
  color: var(--sr-text);
  font-size: 15px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--sr-olive);
  color: var(--sr-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
  background: var(--sr-panel);
}
.offcanvas-foot .label {
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.4;
}
.oc-phone {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 28px;
  font-style: italic;
}
.oc-mail {
  color: var(--sr-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: var(--sr-surface);
  --hd-ink: var(--sr-heading);
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.sr-select {
  position: relative;
}
.sr-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.sr-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--sr-line-2);
  background: var(--sr-surface);
  font-size: 15px;
  text-align: left;
  color: var(--sr-heading);
  transition: border-color 0.3s var(--sr-ease);
}
.sr-select.is-open .select-button,
.sr-select .select-button:hover {
  border-color: var(--sr-olive);
}
.sr-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sr-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--sr-accent-text);
  transition: transform 0.35s var(--sr-ease);
}
.sr-select.is-open .select-button i {
  transform: rotate(180deg);
}
.sr-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--sr-surface);
  border-top: 2px solid var(--sr-olive);
  box-shadow: var(--sr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--sr-ease), transform 0.3s var(--sr-ease), visibility 0.3s;
}
.sr-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--sr-olive);
  transform: translateY(-10px);
}
.sr-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sr-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--sr-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--sr-ease), color 0.2s var(--sr-ease);
}
.sr-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sr-accent-text);
}
.sr-select .select-option .option-meta.is-none {
  color: var(--sr-muted);
}
.sr-select .select-option.is-focused,
.sr-select .select-option:hover {
  background-color: var(--sr-panel);
}
.sr-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.sr-select .select-option.is-selected {
  color: var(--sr-accent-text);
}
.sr-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--sr-accent-text);
}
.sr-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--sr-panel);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language & Currency Pickers
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. Tonal faces, framed menus. */
.sr-lang,
.sr-cur {
  position: relative;
  flex-shrink: 0;
}
.sr-lang .lang-btn,
.sr-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 20px;
  background: rgba(var(--sr-heading-rgb), 0.08);
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sr-lang .lang-btn:hover,
.sr-lang .lang-btn[aria-expanded="true"],
.sr-cur .cur-btn:hover,
.sr-cur .cur-btn[aria-expanded="true"] {
  background: var(--sr-primary);
  color: var(--sr-on-primary);
}
.sr-lang .lang-btn > i,
.sr-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.sr-lang .lang-btn[aria-expanded="true"] > i,
.sr-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.sr-cur .cur-btn b {
  font-weight: 500;
  color: var(--sr-olive);
}
.sr-cur .cur-btn:hover b,
.sr-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.sr-lang .flag {
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
}
.sr-lang.is-up .lang-btn,
.sr-cur.is-up .cur-btn {
  height: 44px;
  padding: 0 15px;
}
.sr-lang .lang-menu,
.sr-cur .cur-menu {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border: 1px solid var(--sr-line);
  background: var(--sr-bg);
  box-shadow: 6px 6px 0 0 rgba(var(--sr-heading-rgb), 0.12);
  font-family: var(--sr-ff-body);
  text-align: start;
  white-space: normal;
}
.sr-cur .cur-menu {
  width: 232px;
}
.sr-lang.is-up .lang-menu,
.sr-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.sr-lang .lang-menu[hidden],
.sr-cur .cur-menu[hidden] {
  display: none;
}
.sr-lang .lang-group,
.sr-cur .lang-group {
  margin: 6px 10px;
  color: var(--sr-muted);
  font-family: var(--sr-ff-body);
  font-size: 12px;
}
.sr-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sr-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sr-line-2);
}
.sr-lang .lang-item,
.sr-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--sr-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.sr-lang .lang-item small {
  margin-inline-start: auto;
  color: var(--sr-muted);
  font-family: var(--sr-ff-body);
  font-size: 11.5px;
}
.sr-lang .lang-item i,
.sr-cur .cur-item i {
  width: 12px;
  font-size: 11px;
  color: var(--sr-olive);
  opacity: 0;
}
.sr-cur .cur-item i {
  margin-inline-start: auto;
}
.sr-cur .cur-item b {
  width: 18px;
  color: var(--sr-olive);
  font-family: var(--sr-ff-body);
  font-weight: 500;
}
.sr-lang .lang-item:hover,
.sr-lang .lang-item[aria-pressed="true"],
.sr-cur .cur-item:hover,
.sr-cur .cur-item[aria-pressed="true"] {
  background: rgba(var(--sr-heading-rgb), 0.08);
}
.sr-lang .lang-item[aria-pressed="true"] i,
.sr-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}
.sr-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--sr-line-2);
  color: var(--sr-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/*======================
7. Components
========================*/
/*----- 7.1 Shear Cut & Word Rise -----*/
/* a photograph waiting under a sheet of pattern paper: the cut line, the shears, the strip above and the piece below */
.sr-shear {
  position: relative;
  display: block;
  overflow: hidden;
}
.shear-top,
.shear-piece {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: var(--sr-panel);
  background-image: linear-gradient(rgba(var(--sr-camel-rgb), 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sr-camel-rgb), 0.22) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.shear-top {
  top: 0;
}
.shear-piece {
  bottom: 0;
  transform-origin: 50% 0;
}
.shear-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 0;
  border-top: 1.5px dashed var(--sr-olive);
  transform-origin: 0 50%;
  pointer-events: none;
}
.shear-tool {
  position: absolute;
  left: -10px;
  z-index: 5;
  margin-top: -11px;
  color: var(--sr-heading);
  font-size: 19px;
  line-height: 1;
  pointer-events: none;
}
.shear-tool i {
  display: block;
  transform: scaleX(-1);
}
.sr-night .shear-top,
.sr-night .shear-piece {
  background-color: #263025;
}
/* word masks padded on every side so italics and descenders are never cut */
.sr-w {
  display: inline-block;
  overflow: hidden;
  margin: -0.14em -0.08em -0.22em;
  padding: 0.14em 0.08em 0.22em;
  vertical-align: top;
}
.sr-wi {
  display: inline-block;
}

/*----- 7.2 Basting Stitch -----*/
/* hover: a white basting stitch runs round the inside of a card's photograph, edge by edge */
.sr-baste {
  position: relative;
}
.sr-baste::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 4;
  --st: rgba(255, 255, 255, 0.95);
  background:
    repeating-linear-gradient(90deg, var(--st) 0 9px, transparent 9px 15px) left top / 0% 1.5px no-repeat,
    repeating-linear-gradient(180deg, var(--st) 0 9px, transparent 9px 15px) right top / 1.5px 0% no-repeat,
    repeating-linear-gradient(270deg, var(--st) 0 9px, transparent 9px 15px) right bottom / 0% 1.5px no-repeat,
    repeating-linear-gradient(0deg, var(--st) 0 9px, transparent 9px 15px) left bottom / 1.5px 0% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sr-baste.is-ink::after {
  --st: var(--sr-olive);
}
.sr-baste:hover::after,
a:focus-visible .sr-baste::after,
.sr-baste:focus-within::after {
  opacity: 1;
  animation: sr-baste 1.1s cubic-bezier(0.45, 0, 0.3, 1) forwards;
}
@keyframes sr-baste {
  0% {
    background-size: 0% 1.5px, 1.5px 0%, 0% 1.5px, 1.5px 0%;
  }
  25% {
    background-size: 100% 1.5px, 1.5px 0%, 0% 1.5px, 1.5px 0%;
  }
  50% {
    background-size: 100% 1.5px, 1.5px 100%, 0% 1.5px, 1.5px 0%;
  }
  75% {
    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 0%;
  }
  100% {
    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%;
  }
}
/* on an arch, a round foot or an oval the stitch follows the curve: a dashed line inside the edge, drawn in as it
   tightens from the edge */
.sr-arch.sr-baste::after,
.sr-arch-b.sr-baste::after,
.sr-arch-r.sr-baste::after,
.is-oval.sr-baste::after {
  inset: 4px;
  border: 1.5px dashed var(--st);
  border-radius: inherit;
  background: none;
  transition: opacity 0.35s ease, inset 0.7s var(--sr-ease);
}
.sr-arch.sr-baste:hover::after,
.sr-arch-b.sr-baste:hover::after,
.sr-arch-r.sr-baste:hover::after,
.is-oval.sr-baste:hover::after {
  inset: 12px;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .sr-baste:hover::after {
    animation: none;
    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%;
  }
}

/*----- 7.3 Accordion -----*/
/* the base's FAQ: paper rows, the question in Jost, a fine plus that turns */
.sr-accordion .acc-item {
  margin-bottom: 12px;
  background: var(--sr-panel);
}
.sr-bg-panel .sr-accordion .acc-item {
  background: var(--sr-surface);
}
.sr-accordion .acc-title {
  margin: 0;
  font-size: inherit;
}
.sr-accordion .acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 30px;
  color: var(--sr-heading);
  font-family: var(--sr-ff-head);
  font-size: 20px;
  line-height: 1.35;
  text-align: left;
}
.sr-accordion .acc-head i {
  flex-shrink: 0;
  color: var(--sr-accent-text);
  font-size: 13px;
  transition: transform 0.35s var(--sr-ease);
}
.sr-accordion .acc-item.is-open .acc-head i {
  transform: rotate(45deg);
}
.sr-accordion .acc-body {
  padding: 0 70px 26px 30px;
}

/*----- 7.4 Tabs & Arrows -----*/
.sr-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 44px;
}
.sr-filter-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sr-filter-tabs button small {
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.sr-filter-tabs button:hover {
  color: var(--sr-accent-text);
}
.sr-filter-tabs button.is-active {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.sr-filter-tabs button.is-active small {
  color: var(--sr-camel);
}
[data-theme="dark"] .sr-filter-tabs button.is-active {
  background: var(--sr-camel);
  color: var(--sr-night);
}
[data-theme="dark"] .sr-filter-tabs button.is-active small {
  color: var(--sr-night);
}
.sr-filter-tabs.is-left {
  justify-content: flex-start;
}
/* round arrows inside a chalk-dash ring (point controls are round) */
.slider-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sr-surface);
  color: var(--sr-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.slider-arrow::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--sr-dash);
  border-radius: 50%;
  transition: transform 0.8s var(--sr-ease), border-color 0.3s ease;
}
.slider-arrow:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.slider-arrow:hover::before {
  border-color: rgba(var(--sr-camel-rgb), 0.7);
  transform: rotate(90deg);
}
.slider-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.sr-arrows {
  display: flex;
  gap: 10px;
}
/* the base's dots: a small dot, the current one in a dashed ring */
.swiper-pagination-bullet {
  position: relative;
  width: 6px;
  height: 6px;
  margin: 0 9px !important;
  background: var(--sr-heading);
  opacity: 0.35;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px dashed var(--sr-heading);
  border-radius: 50%;
}

/*----- 7.5 Faces & Badges -----*/
.sr-avatars {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
}
.sr-avatars .faces {
  display: inline-flex;
  flex-shrink: 0;
}
.sr-avatars .faces img,
.sr-avatars .faces .more {
  width: 48px;
  height: 48px;
  margin-left: -12px;
  border: 2px solid var(--sr-bg);
  border-radius: 50%;
  object-fit: cover;
}
.sr-avatars .faces img:first-child {
  margin-left: 0;
}
.sr-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sr-night);
  color: var(--sr-paper);
  font-size: 12px;
  font-weight: 500;
}
.sr-bg-panel .sr-avatars .faces img,
.sr-bg-panel .sr-avatars .faces .more {
  border-color: var(--sr-panel);
}
.sr-night .sr-avatars .faces img,
.sr-night .sr-avatars .faces .more {
  border-color: var(--sr-night);
}
.sr-night .sr-avatars .faces .more {
  background: var(--sr-camel);
  color: var(--sr-night);
}
.sr-avatars .txt {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  color: var(--sr-muted);
  font-size: 14px;
  line-height: 1.4;
}
.sr-avatars .txt b {
  color: var(--sr-heading);
  font-size: 19px;
  font-weight: 500;
}
.sr-photo-band .sr-avatars .faces img,
.sr-photo-band .sr-avatars .faces .more {
  border-color: rgba(255, 255, 255, 0.9);
}
.sr-photo-band .sr-avatars .txt {
  color: rgba(255, 255, 255, 0.8);
}
.sr-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--sr-surface);
  box-shadow: var(--sr-shadow);
}
.sr-review > i {
  color: var(--sr-heading);
  font-size: 20px;
}
.sr-review .rv-score {
  color: var(--sr-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}
.sr-review .rv-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sr-review small {
  color: var(--sr-muted);
  font-size: 13px;
}
.sr-review.is-flat {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.sr-photo-band .sr-review,
.sr-night .sr-review {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.sr-photo-band .sr-review > i,
.sr-photo-band .sr-review small {
  color: rgba(255, 255, 255, 0.8);
}

/*----- 7.6 Newsletter & Social -----*/
/* the base's newsletter: a framed field, the placeholder in italic, a paper plane */
.sr-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background: var(--sr-surface);
  box-shadow: inset 0 0 0 1px var(--sr-line-2);
}
.sr-newsletter input {
  flex: 1;
  min-width: 0;
  height: 58px;
  padding: 0 22px;
  border: 0;
  background: transparent;
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 15px;
}
.sr-newsletter input::placeholder {
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.sr-newsletter input:focus {
  outline: 0;
}
.sr-newsletter:focus-within {
  box-shadow: inset 0 0 0 1px var(--sr-olive);
}
.sr-newsletter button {
  width: 58px;
  height: 58px;
  color: var(--sr-heading);
  font-size: 15px;
  transition: color 0.3s ease, transform 0.4s var(--sr-ease);
}
.sr-newsletter button:hover {
  color: var(--sr-accent-text);
  transform: translateX(3px);
}
.sr-newsletter .form-status {
  flex-basis: 100%;
  margin: 0;
  padding: 0 22px 14px;
}
.sr-night .sr-newsletter {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.32);
}
.sr-social {
  display: flex;
  gap: 8px;
}
.sr-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sr-social a:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.sr-night .sr-social a:hover {
  background: var(--sr-camel);
  color: var(--sr-night);
}

/*----- 7.7 Label & Value Rows -----*/
/* label / value rows: caps label, the value in Jost; a chalk dash between rows */
.sr-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sr-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat;
}
.sr-kv li > span {
  color: var(--sr-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sr-kv li > span small {
  display: block;
  color: var(--sr-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.sr-kv b {
  color: var(--sr-heading);
  font-size: 17px;
  font-weight: 500;
  text-align: right;
}
.sr-kv.is-tight li {
  padding: 9px 0;
}
.sr-kv.is-tight b {
  font-size: 16px;
}
.sr-kv li.is-total {
  background: none;
}
.sr-kv li.is-total b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
}
.sr-photo-band .sr-kv li > span {
  color: rgba(255, 255, 255, 0.72);
}
/* a price list with dotted leaders (the base's Tailor home) */
.sr-leaders li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sr-leaders .ld-name {
  color: var(--sr-heading);
  font-size: 18px;
}
.sr-leaders .ld-fill {
  flex: 1;
  min-width: 30px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 3px, transparent 3px 7px);
}
.sr-leaders .ld-price {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 19px;
  font-style: italic;
}

/*----- 7.8 Cards -----*/
.sr-card {
  height: 100%;
  background: var(--sr-surface);
}
.card-media {
  display: block;
  overflow: hidden;
}
.card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--sr-ease);
}
.sr-card:hover .card-media img {
  transform: scale(1.04);
}
.card-body {
  padding: 24px 0 0;
}
.card-body h3 a:hover {
  color: var(--sr-accent-text);
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.pcd-meta {
  display: block;
  margin-top: 8px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
  font-style: italic;
}
.pcd-meta a:hover {
  color: var(--sr-heading);
}
.pcd-by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sr-muted);
  font-size: 14px;
}
.pcd-by img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
/* the base's service cards: an arch (or a D) photograph, the title, its italic subtitle, a price line */
.svc-card {
  height: 100%;
}
.svc-media {
  display: block;
}
.svc-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4.3;
  object-fit: cover;
  transition: transform 0.9s var(--sr-ease);
}
.svc-card:hover .svc-media img {
  transform: scale(1.04);
}
.svc-body {
  padding-top: 22px;
  text-align: center;
}
.svc-body .sr-sub {
  display: block;
  margin-top: 2px;
}
.svc-foot {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--sr-muted);
  font-size: 14px;
}
.svc-foot b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}
/* the tailors: arch portraits in dashed columns */
.team-card {
  height: 100%;
}
.tc-photo {
  display: block;
  background: var(--sr-panel);
}
.tc-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5.4;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--sr-ease);
}
.team-card:hover .tc-photo img {
  transform: scale(1.04);
}
.tc-body {
  padding-top: 22px;
}
.tc-body h3 a:hover {
  color: var(--sr-accent-text);
}
.tc-role {
  display: block;
  margin-top: 2px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 17px;
  font-style: italic;
}

/*----- 7.9 Quote Cards -----*/
/* the base's testimonials: framed cards, the quote in Jost, the face sitting on the card's lower edge */
.quote-card {
  position: relative;
  height: 100%;
  margin-bottom: 34px;
  padding: 44px 40px 64px;
  background: var(--sr-surface);
}
.quote-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--sr-line-2);
  pointer-events: none;
}
.quote-card blockquote {
  margin: 0;
}
.quote-card p {
  color: var(--sr-heading);
  font-size: 20px;
  line-height: 1.6;
}
.quote-card .qc-by {
  display: block;
  margin-top: 18px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
  font-style: italic;
}
.quote-card .qc-face {
  position: absolute;
  right: 40px;
  bottom: -32px;
  width: 64px;
  height: 64px;
  border: 4px solid var(--sr-bg);
  border-radius: 50%;
  object-fit: cover;
}
.sr-bg-panel .quote-card .qc-face {
  border-color: var(--sr-panel);
}
.quote-card .sr-stars {
  margin-bottom: 16px;
}
.reviews-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  margin-top: 56px;
}
.quotes-dots {
  margin-top: 26px;
  text-align: center;
}
.quotes-dots.swiper-pagination-bullets {
  position: static;
}

/*----- 7.10 Work Tiles -----*/
.work-tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: #FFFFFF;
}
.work-tile .wt-img {
  display: block;
}
.work-tile .wt-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1s var(--sr-ease);
}
.work-tile .wt-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 70px 26px 24px;
  background: linear-gradient(180deg, rgba(31, 38, 30, 0), rgba(31, 38, 30, 0.82));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.5s var(--sr-ease);
}
.work-tile .wt-cap .sr-sub {
  color: #E3D7C3;
}
.work-tile .wt-cap b {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}
.work-tile .wt-cap small {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
}
.work-tile:hover {
  color: #FFFFFF;
}
.work-tile:hover .wt-img img {
  transform: scale(1.05);
}
.work-tile:hover .wt-cap,
.work-tile:focus .wt-cap {
  opacity: 1;
  transform: translateY(0);
}
.work-cell {
  transition: opacity 0.4s ease;
}

/*----- 7.11 Choices & Steppers -----*/
/* a choice is a paper tile with its own input; the chosen one takes the night face with a camel stitch */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.choice-card,
.chip-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.choice-card input,
.chip-choice input,
.swatch-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card .cc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 22px 22px 20px;
  background: var(--sr-panel);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card .cc-body::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed transparent;
  pointer-events: none;
  transition: border-color 0.3s ease;
}
.sr-bg-panel .choice-card .cc-body,
.sr-panel .choice-card .cc-body {
  background: var(--sr-surface);
}
.choice-card .cc-body > img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
.choice-card b {
  color: var(--sr-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}
.choice-card small {
  color: var(--sr-muted);
  font-size: 14px;
  line-height: 1.5;
}
.choice-card .cc-price {
  margin-top: auto;
  padding-top: 10px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
  font-style: italic;
}
.choice-card:hover .cc-body::after {
  border-color: var(--sr-dash);
}
.choice-card input:checked + .cc-body {
  background: var(--sr-night);
  --sr-heading: #FAF8F5;
  --sr-muted: rgba(250, 248, 245, 0.7);
  --sr-accent-text: #C7B299;
}
.choice-card input:checked + .cc-body::after {
  border-color: rgba(var(--sr-camel-rgb), 0.6);
}
[data-theme="dark"] .choice-card input:checked + .cc-body {
  background: #2C3A2A;
}
.choice-card input:focus-visible + .cc-body,
.chip-choice input:focus-visible + span,
.swatch-chip input:focus-visible ~ .sw {
  outline: 2px solid var(--sr-olive);
  outline-offset: 2px;
}
.choice-card input:disabled + .cc-body {
  opacity: 0.4;
  cursor: not-allowed;
}
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-choice span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-size: 14.5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.chip-choice input:checked + span {
  background: var(--sr-night);
  color: var(--sr-paper);
}
[data-theme="dark"] .chip-choice input:checked + span {
  background: var(--sr-camel);
  color: var(--sr-night);
}
.chip-choice input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
/* colour swatches: round (point controls are round), 22px for touch at the least */
.swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.swatch-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.swatch-chip .sw,
.swatch-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sw, #999999);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--sr-bg), 0 0 0 4px transparent;
  transition: box-shadow 0.3s ease;
}
.swatch-chip input:checked ~ .sw,
.swatch-dot.is-on {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--sr-bg), 0 0 0 4px var(--sr-olive);
}
.swatch-chip .sc-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.swatch-chip .sc-txt b {
  color: var(--sr-heading);
  font-size: 14.5px;
  font-weight: 500;
}
.swatch-chip .sc-txt small {
  color: var(--sr-muted);
  font-size: 12.5px;
}
.sr-qty {
  display: inline-flex;
  align-items: center;
  height: 54px;
  background: var(--sr-panel);
}
.sr-qty button {
  width: 46px;
  height: 100%;
  color: var(--sr-accent-text);
  font-size: 11px;
}
.sr-qty button:hover {
  color: var(--sr-heading);
}
.sr-qty input,
.sr-qty b {
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 54px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.sr-qty input::-webkit-inner-spin-button,
.sr-qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sr-qty.is-sm {
  height: 42px;
}
.sr-qty.is-sm button,
.sr-qty.is-sm b {
  width: 36px;
  line-height: 42px;
}
.sr-range {
  width: 100%;
  accent-color: var(--sr-olive);
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--sr-muted);
  font-size: 13px;
}
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.size-chip {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-size: 14.5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.size-chip:hover {
  color: var(--sr-accent-text);
}
.size-chip.is-on {
  background: var(--sr-night);
  color: var(--sr-paper);
}
[data-theme="dark"] .size-chip.is-on {
  background: var(--sr-camel);
  color: var(--sr-night);
}

/*----- 7.12 Tabs & Pagination -----*/
.sr-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 34px;
  margin-bottom: 30px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px) left bottom / 100% 1px no-repeat;
}
.sr-tablist [role="tab"] {
  position: relative;
  padding: 0 0 16px;
  color: var(--sr-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sr-tablist [role="tab"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sr-heading);
  transform: scaleX(0);
  transition: transform 0.35s var(--sr-ease);
}
.sr-tablist [role="tab"].is-active {
  color: var(--sr-heading);
}
.sr-tablist [role="tab"].is-active::after {
  transform: scaleX(1);
}
.sr-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
.sr-pagination a,
.sr-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sr-pagination a:hover,
.sr-pagination .is-current {
  background: var(--sr-night);
  color: var(--sr-paper);
}

/*----- 7.13 Sidebar -----*/
.widget {
  margin-bottom: 44px;
}
.widget:last-child {
  margin-bottom: 0;
}
.widget > h2 {
  margin-bottom: 22px;
}
.widget-search {
  position: relative;
}
.widget-search input {
  width: 100%;
  height: 54px;
  padding: 0 54px 0 18px;
  border: 0;
  background: var(--sr-field);
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 15px;
}
.widget-search input::placeholder {
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  color: var(--sr-accent-text);
}
.side-list li {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat;
}
.side-list a {
  color: var(--sr-heading);
}
.side-list a:hover {
  color: var(--sr-accent-text);
}
.side-list span {
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.side-posts .thumb {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-posts small {
  display: block;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 15px;
  font-style: italic;
}
.side-posts h3 {
  font-size: 17px;
  line-height: 1.35;
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-cloud a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-size: 14px;
}
.tag-cloud a:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.widget-cta {
  padding: 34px 30px;
  background: var(--sr-night);
  color: rgba(250, 248, 245, 0.78);
  --sr-heading: #FAF8F5;
  --sr-accent-text: #C7B299;
  --sr-primary: #C7B299;
  --sr-on-primary: #1F261E;
}
.widget-cta h2 {
  margin-bottom: 12px;
}
.widget-cta p {
  margin-bottom: 22px;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat;
  font-size: 15px;
}
.hours-list li span {
  color: var(--sr-muted);
}
.hours-list li b {
  color: var(--sr-heading);
  font-weight: 400;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--sr-accent-text);
  font-weight: 500;
}

/*----- 7.14 Play & Notes -----*/
/* the base's play button: a white disc inside a dashed ring */
.sr-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 18px;
}
.sr-play::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: sr-turn 22s linear infinite;
}
.sr-play i {
  margin-left: 4px;
  transition: transform 0.35s var(--sr-ease);
}
.sr-play:hover {
  color: var(--sr-camel);
}
.sr-play:hover i {
  transform: scale(1.18);
}
@keyframes sr-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sr-play::before {
    animation: none;
  }
}
.grid-empty {
  padding: 50px 0;
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-size: 20px;
  font-style: italic;
  text-align: center;
}
.sr-note {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: var(--sr-tonal);
  color: var(--sr-text);
  font-size: 15px;
  line-height: 1.6;
}
.sr-note i {
  margin-top: 4px;
  color: var(--sr-accent-text);
}
.sr-note.is-warn i {
  color: var(--sr-err);
}

/*======================
8. Home 01 - The Atelier
========================*/
/*----- 8.1 Hero Slider -----*/
/* the base's full-bleed slider: a photograph per slide under a forest wash, the copy centred, thin arrows at the
   sides, the dots and a counter at the foot; the faces of the atelier's clients bottom left */
.sr-hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  max-height: 1040px;
  overflow: hidden;
  background: var(--sr-night);
}
.sr-hero .swiper,
.sr-hero .swiper-wrapper,
.sr-hero .swiper-slide {
  height: 100%;
}
.sr-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.sr-hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sr-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 52%, rgba(31, 38, 30, 0.62) 0%, rgba(31, 38, 30, 0.34) 58%, rgba(31, 38, 30, 0.5) 100%), linear-gradient(180deg, rgba(31, 38, 30, 0.45) 0%, rgba(31, 38, 30, 0) 28%);
}
.sr-hero .container {
  position: relative;
  z-index: 2;
}
.hero-copy {
  max-width: 980px;
  margin: 40px auto 0;
  color: rgba(250, 248, 245, 0.9);
  text-align: center;
}
.hero-copy .sr-eyebrow {
  color: #E3D7C3;
  font-size: 20px;
}
.hero-title {
  margin: 0 0 22px;
  color: #FAF8F5;
  font-size: clamp(44px, 4.9vw, 84px);
  font-weight: 400;
  line-height: 1.1;
}
.hero-title .ln {
  display: block;
  white-space: nowrap;
}
.hero-title em {
  color: #F2E8D6;
}
.hero-lead {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 18px;
}
.hero-copy .sr-btns {
  justify-content: center;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: 50%;
  color: #FAF8F5;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hero-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(250, 248, 245, 0.55);
  border-radius: 50%;
  transition: transform 0.8s var(--sr-ease);
}
.hero-arrow:hover {
  background: rgba(250, 248, 245, 0.14);
  color: #FFFFFF;
}
.hero-arrow:hover::before {
  transform: rotate(90deg);
}
.hero-arrow.hero-prev {
  left: 44px;
}
.hero-arrow.hero-next {
  right: 44px;
}
.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 5;
}
.hero-foot .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hero-foot .sr-avatars .faces img,
.hero-foot .sr-avatars .faces .more {
  border-color: rgba(250, 248, 245, 0.9);
}
.hero-foot .sr-avatars .faces .more {
  background: var(--sr-camel);
  color: var(--sr-night);
}
.hero-foot .sr-avatars .txt {
  color: rgba(250, 248, 245, 0.78);
}
.hero-foot .sr-avatars .txt b {
  color: #FAF8F5;
}
.hero-dots {
  display: flex;
  align-items: center;
}
.hero-dots .swiper-pagination-bullet {
  background: #FAF8F5;
}
.hero-dots .swiper-pagination-bullet-active::after {
  border-color: #FAF8F5;
}
.hero-count {
  min-width: 180px;
  color: rgba(250, 248, 245, 0.75);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
  text-align: right;
}
.hero-count b {
  color: #FAF8F5;
  font-weight: 400;
}

/*----- 8.2 Intro & Services -----*/
.sr-intro .sr-dash.is-scissors {
  margin: 64px 0 76px;
}
.svc-row > [class*="col-"]:nth-child(even) .svc-card {
  padding-top: 0;
}
.svc-card .svc-media.sr-arch img,
.svc-card .svc-media.sr-arch-b img {
  aspect-ratio: 3 / 4.3;
}
/* the base's rhythm: arch, square, round foot, square - every photograph the same height */

/*----- 8.3 Split Bands -----*/
.sr-split .split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}
.split-panel {
  display: flex;
  align-items: center;
  padding: 90px 8%;
}
.split-copy {
  max-width: 520px;
}
.split-copy h2 {
  margin-bottom: 22px;
}
.split-copy > p {
  margin-bottom: 30px;
}
.split-kv {
  margin-bottom: 36px;
}
.split-photo {
  position: relative;
  overflow: hidden;
}
.split-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 8.4 The Jacket On The Form -----*/
/* the dress form on a paper board ruled like a cutting table, a dashed frame inside its edge, the cloth's ticket */
.asm-board {
  position: relative;
  padding: 34px 20px 70px;
  background-color: var(--sr-surface);
  background-image: linear-gradient(rgba(var(--sr-camel-rgb), 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sr-camel-rgb), 0.16) 1px, transparent 1px);
  background-size: 28px 28px;
  box-shadow: var(--sr-shadow);
}
.asm-board::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--sr-dash);
  pointer-events: none;
}
.asm-board canvas {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 525;
}
.asm-tag {
  position: absolute;
  left: 30px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
}
.asm-tag b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
}
.asm-copy {
  padding-left: 30px;
}
.asm-copy h2 {
  margin-bottom: 20px;
}
.asm-steps {
  position: relative;
  margin: 40px 0 44px;
}
.asm-line {
  position: absolute;
  left: 9px;
  top: 12px;
  bottom: 30px;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--sr-dash) 0 5px, transparent 5px 10px);
}
.asm-line span {
  position: absolute;
  inset: 0;
  background: var(--sr-heading);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.asm-step {
  position: relative;
  display: flex;
  gap: 26px;
  padding: 0 0 26px;
}
.asm-step .as-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--sr-bg);
  box-shadow: inset 0 0 0 1px var(--sr-line-2);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.sr-bg-panel .asm-step .as-dot {
  background: var(--sr-panel);
}
.asm-step h3 {
  margin-bottom: 6px;
  color: var(--sr-muted);
  transition: color 0.35s ease;
}
.asm-step p {
  color: var(--sr-muted);
  font-size: 15.5px;
}
.asm-step.is-done .as-dot {
  background: var(--sr-heading);
  box-shadow: none;
}
.asm-step.is-done h3,
.asm-step.is-now h3 {
  color: var(--sr-heading);
}
.asm-step.is-now .as-dot {
  box-shadow: inset 0 0 0 5px var(--sr-olive);
}
.asm-step.is-now h3 {
  font-family: var(--sr-ff-serif);
  font-style: italic;
}

/*----- 8.5 Tailors In Dashed Columns -----*/
.team-row {
  position: relative;
}
.team-row > [class*="col-"] {
  position: relative;
}
.team-row > [class*="col-"] + [class*="col-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -40px;
  bottom: -40px;
  border-left: 1px dashed var(--sr-dash);
}
.team-card .tc-photo.is-oval {
  overflow: hidden;
  border-radius: 999px;
}
.team-row .team-card {
  text-align: center;
}

/*----- 8.6 Marquee -----*/
/* the base's running line on forest night: caps words and italic serif phrases, a pair of shears between */
.sr-marquee {
  overflow: hidden;
  padding: 26px 0;
}
.mq-track {
  display: flex;
  width: max-content;
  animation: sr-marquee 46s linear infinite;
}
.mq-run {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mq-run span {
  padding: 0 30px;
  color: #FAF8F5;
  font-size: 22px;
  white-space: nowrap;
}
.mq-run em {
  color: var(--sr-camel);
  font-family: var(--sr-ff-serif);
  font-size: 24px;
}
.mq-run i {
  color: rgba(var(--sr-camel-rgb), 0.7);
  font-size: 15px;
}
@keyframes sr-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mq-track {
    animation: none;
  }
}

/*----- 8.7 The Needle Bars -----*/
.nb-note {
  margin-bottom: 30px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
}
.hand-bar {
  margin-bottom: 34px;
}
.hb-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--sr-heading);
}
.hb-head b {
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}
.hb-track {
  position: relative;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px);
}
.hb-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--sr-heading);
  transform-origin: 0 50%;
}
.hb-pin {
  position: absolute;
  top: -14px;
  left: 0;
  margin-left: -8px;
  color: var(--sr-heading);
  font-size: 15px;
  transform: rotate(45deg);
}

/*----- 8.8 The Photo Band -----*/
.sr-band {
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 120px 0;
}
.band-copy {
  max-width: 640px;
}
.band-copy h2 {
  margin-bottom: 34px;
}

/*----- 8.9 Testimonials & News -----*/
.quote-slider {
  padding-bottom: 36px;
}
.quote-slider .swiper-slide {
  height: auto;
}
.sr-news .post-card {
  height: 100%;
}
.post-card .card-media img {
  aspect-ratio: 4 / 3.3;
}
.post-card .card-body h3 {
  margin-bottom: 4px;
}
.pcd-meta .sep {
  margin: 0 6px;
  opacity: 0.6;
}

/*----- 8.10 The Mills -----*/
/* where the base had magazine and brand logos: the mills the atelier cuts from, set in the two faces */
.sr-mills {
  padding: 60px 0;
}
.mills-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.mills-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  text-align: center;
}
.mills-list li + li {
  background: repeating-linear-gradient(180deg, var(--sr-dash) 0 5px, transparent 5px 10px) left center / 1px 100% no-repeat;
}
.mills-list b {
  color: var(--sr-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mills-list span {
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 15px;
  font-style: italic;
}

/*======================
9. Home 02 - Couture
========================*/
/*----- 9.1 Three-Up Hero -----*/
/* the base's couture hero: tall photographs three across, edge to edge, sliding; a caption ticket on each and the
   arrows over the outer edges */
.couture-hero {
  position: relative;
  background: var(--sr-night);
}
.couture-hero .swiper-slide {
  height: auto;
}
.ch-slide {
  position: relative;
  display: block;
  overflow: hidden;
  height: calc(100vh - 136px);
  min-height: 560px;
  max-height: 880px;
  color: #FFFFFF;
}
.ch-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--sr-ease);
}
.ch-slide:hover img {
  transform: scale(1.04);
}
.ch-slide:hover {
  color: #FFFFFF;
}
.ch-cap {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 14px 20px;
  background: rgba(250, 248, 245, 0.94);
  color: var(--sr-night);
  line-height: 1.3;
}
.ch-cap b {
  font-size: 17px;
  font-weight: 500;
}
.ch-cap .sr-sub {
  color: #646B4C;
  font-size: 15px;
}
.ch-arrow {
  background: rgba(31, 38, 30, 0.35);
}

/*----- 9.2 Statement & The Shop In Dashed Cells -----*/
.statement-title {
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(36px, 3.6vw, 60px);
  line-height: 1.18;
  text-align: center;
}
.statement-title .ln {
  display: block;
  white-space: nowrap;
}
.statement-lead {
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-size: 19px;
  font-style: italic;
  text-align: center;
}
.dash-grid {
  margin-top: 70px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px) left top / 100% 1px no-repeat;
}
.dash-grid .row > [class*="col-"] {
  position: relative;
  padding: 36px 22px 34px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px) left bottom / 100% 1px no-repeat;
}
.dash-grid .row > [class*="col-"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-right: 1px dashed var(--sr-dash);
}

/*----- 9.3 The Fabric Book -----*/
/* a bunch of swatches hung from a binding: forest board with brass rivets, the pages stacked a few pixels apart,
   each turning up about its top edge */
.fabric-book {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  perspective: 1600px;
}
.book-head {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 64px;
  padding: 0 24px;
  background: var(--sr-night);
  color: #FAF8F5;
  box-shadow: 0 10px 22px rgba(31, 38, 30, 0.25);
}
.book-head b {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.book-head em {
  color: var(--sr-camel);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
}
.book-head .rivet {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F0D9A4, #A88947 60%, #6E5628);
}
.book-head .rivet:first-child {
  left: 22px;
}
.book-head .rivet:last-child {
  right: 22px;
}
.book-pages {
  position: relative;
  aspect-ratio: 5 / 6;
  transform-style: preserve-3d;
}
.book-page {
  position: absolute;
  inset: 0 6px 0;
  transform-origin: 50% 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 26px rgba(31, 38, 30, 0.18);
  will-change: transform;
}
.book-page:nth-child(2) {
  inset: 0 6px -6px;
}
.book-page:nth-child(3) {
  inset: 0 6px -12px;
}
.book-page:nth-child(n+4) {
  inset: 0 6px -16px;
}
.book-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.page-label {
  position: absolute;
  left: 24px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  padding: 12px 18px 14px;
  background: #FAF8F5;
  color: #1E1E1E;
  line-height: 1.3;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.page-label small {
  color: #646B4C;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.page-label b {
  font-size: 17px;
  font-weight: 500;
}
.page-label em {
  color: #646B4C;
  font-family: var(--sr-ff-serif);
  font-size: 15px;
}
.book-copy h2 {
  margin-bottom: 20px;
}
.book-now {
  margin: 34px 0;
  padding: 30px 34px;
  background: var(--sr-surface);
}
.book-now h3 {
  margin: 4px 0 16px;
}
.book-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.book-nav .sr-btn {
  margin-left: 14px;
}

/*----- 9.4 The Three Makes -----*/
/* the base's price cards in a chalk dash; the middle one arched */
.make-card {
  position: relative;
  height: 100%;
  padding: 54px 40px 0;
  text-align: center;
}
.make-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--sr-dash);
  pointer-events: none;
}
.make-card.is-arch::before {
  border-radius: 140px 140px 0 0;
}
.make-card.is-arch {
  background: var(--sr-panel);
  border-radius: 140px 140px 0 0;
}
.make-card h3 {
  margin-bottom: 14px;
}
.mc-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 44px;
  font-style: italic;
  line-height: 1.1;
}
.mc-price small {
  margin-top: 10px;
  color: var(--sr-muted);
  font-size: 16px;
}
.make-card > .sr-sub {
  display: block;
  margin-top: 6px;
}
.mc-ticks {
  margin: 30px 0 34px;
}
.mc-ticks li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--sr-text);
}
.mc-ticks i {
  color: var(--sr-accent-text);
  font-size: 11px;
}
.mc-buy {
  position: relative;
  display: block;
  margin: 0 -40px;
  padding: 22px 0;
  color: var(--sr-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px) left top / 100% 1px no-repeat;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mc-buy:hover {
  background-color: var(--sr-night);
  color: var(--sr-paper);
}

/*----- 9.5 The Photo Grid -----*/
.sr-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.pg-cell {
  position: relative;
  display: block;
  overflow: hidden;
  color: #FFFFFF;
}
.pg-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1s var(--sr-ease);
}
.pg-cell:hover img {
  transform: scale(1.05);
}
.pg-cap {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 5;
  padding: 8px 16px;
  background: rgba(250, 248, 245, 0.94);
  color: var(--sr-night);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
  font-style: italic;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.35s ease, transform 0.45s var(--sr-ease);
}
.pg-cell:hover .pg-cap,
.pg-cell:focus-visible .pg-cap {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*----- 9.6 The Arch & The Words -----*/
.sr-arch-words {
  padding: 120px 0;
}
.aw-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.aw-words li {
  margin-bottom: 6px;
}
.aw-words a {
  position: relative;
  display: inline-block;
  color: var(--sr-heading);
  font-size: clamp(38px, 3.6vw, 62px);
  line-height: 1.22;
  transition: color 0.3s ease, transform 0.45s var(--sr-ease);
}
.aw-words em {
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.aw-words a::after {
  content: "\f0c4";
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  color: var(--sr-accent-text);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-10px, -50%);
  transition: opacity 0.3s ease, transform 0.4s var(--sr-ease);
}
.aw-words a:hover {
  color: var(--sr-accent-text);
  transform: translateX(10px);
}
.aw-words a:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.aw-note {
  margin-top: 30px;
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
}

/*----- 9.7 Journal Masonry -----*/
.pm-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.pm-item .pm-media {
  display: block;
  margin-bottom: 20px;
}
.pm-item .pm-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pm-item.is-tall .pm-media img {
  aspect-ratio: 3 / 4;
}
.pm-item h3 {
  margin-bottom: 4px;
}
.pm-item.is-quote {
  position: relative;
  padding: 44px 38px;
}
.pm-item.is-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--sr-dash);
  pointer-events: none;
}
.pm-item.is-quote i {
  color: var(--sr-accent-text);
  font-size: 24px;
}
.pm-item.is-quote p {
  margin: 18px 0 22px;
  color: var(--sr-heading);
  font-size: 21px;
  line-height: 1.55;
}
.pm-item.is-text {
  padding: 40px 36px;
  background: var(--sr-panel-2);
}
.sr-split.is-paper .split-photo img {
  filter: none;
}

/*----- 9.8 Newsletter & Instagram -----*/
.letter-form {
  max-width: 620px;
  margin: 0 auto;
}
.sr-insta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.in-cell {
  display: block;
  overflow: hidden;
}
.in-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1s var(--sr-ease);
}
.in-cell:hover img {
  transform: scale(1.06);
}
.in-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--sr-bg);
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: var(--sr-shadow);
}

/*======================
10. Home 03 - The Cutting Room
========================*/
/*----- 10.1 Typographic Hero -----*/
/* the base's Tailor home: a statement set in large Jost with italic serif words and small photographs in pills
   between the words, over the pattern paper; here three statements that fade one into the next */
.sr-hero3 {
  position: relative;
  isolation: isolate;
  padding: 120px 0 70px;
  background: var(--sr-bg);
}
.sr-hero3 .swiper {
  position: relative;
  z-index: 1;
}
.h3-statement {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.h3-title {
  color: var(--sr-heading);
  font-size: clamp(40px, 4.6vw, 80px);
  line-height: 1.22;
}
.h3-title .ln {
  display: block;
  white-space: nowrap;
}
.h3-title em {
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.pill {
  display: inline-block;
  overflow: hidden;
  width: 2.1em;
  height: 0.86em;
  margin: 0 0.06em;
  border-radius: 999px;
  vertical-align: -0.06em;
}
.pill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h3-foot {
  position: relative;
  z-index: 1;
  margin-top: 56px;
}
.h3-foot .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.h3-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.h3-nav .hero-count {
  min-width: 0;
  margin-right: 14px;
  color: var(--sr-muted);
}
.h3-nav .hero-count b {
  color: var(--sr-heading);
}

/*----- 10.2 The Collage -----*/
/* six commissions scattered across a twelve-column grid, each its own size and height, as the base's Tailor home */
.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 30px;
  row-gap: 70px;
  align-items: start;
}
.cl-item {
  margin: 0;
}
.cl-photo {
  display: block;
  overflow: hidden;
}
.cl-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.cl-item figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.cl-item figcaption b {
  color: var(--sr-heading);
  font-size: 19px;
  font-weight: 400;
}
.cl-1 {
  grid-column: 1 / span 4;
}
.cl-1 img {
  aspect-ratio: 4 / 4.6;
}
.cl-2 {
  grid-column: 6 / span 3;
  margin-top: 110px;
}
.cl-2 img {
  aspect-ratio: 1 / 1;
}
.cl-3 {
  grid-column: 10 / span 3;
  margin-top: 30px;
}
.cl-3 img {
  aspect-ratio: 3 / 4;
}
.cl-4 {
  grid-column: 1 / span 3;
  margin-top: 40px;
}
.cl-4 img {
  aspect-ratio: 3 / 4.4;
}
.cl-5 {
  grid-column: 5 / span 3;
  margin-top: 120px;
}
.cl-5 img {
  aspect-ratio: 1 / 1;
}
.cl-6 {
  grid-column: 9 / span 4;
}
.cl-6 img {
  aspect-ratio: 4 / 5;
}

/*----- 10.3 Intro, Film & Price List -----*/
.intro3-open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 26px;
}
.sr-video {
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 110px 0;
  text-align: center;
}
.sr-video::before {
  background: linear-gradient(180deg, rgba(31, 38, 30, 0.5), rgba(31, 38, 30, 0.62));
}
.video-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-copy .sr-play {
  margin-bottom: 30px;
}
.sr-leaders li {
  display: block;
  margin-bottom: 26px;
}
.sr-leaders .ld-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sr-leaders small {
  display: block;
  margin-top: 4px;
  color: var(--sr-muted);
  font-size: 14px;
}

/*----- 10.4 The Three Fittings -----*/
.ft-stage {
  position: relative;
  padding: 10px 0 0;
}
.ft-stage canvas {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 525;
}
.ft-now {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  text-align: center;
}
.ft-now b {
  color: #FAF8F5;
  font-size: 22px;
  font-weight: 400;
}
.ft-card {
  position: relative;
  height: 100%;
  padding: 36px 30px 30px;
  opacity: 0.5;
  transition: opacity 0.5s ease, background-color 0.5s ease;
}
.ft-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(199, 178, 153, 0.35);
  pointer-events: none;
  transition: border-color 0.5s ease;
}
.ft-card h3 {
  margin: 4px 0 12px;
}
.ft-card p {
  margin-bottom: 20px;
}
.ft-card.is-past {
  opacity: 0.75;
}
.ft-card.is-on {
  opacity: 1;
  background: rgba(250, 248, 245, 0.05);
}
.ft-card.is-on::before {
  border-color: rgba(199, 178, 153, 0.85);
}

/*----- 10.5 The Questions -----*/
.faq-narrow {
  max-width: 860px;
  margin: 0 auto;
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 Services -----*/
.sr-svc-rows {
  padding-top: 80px;
}
.svc-row-item + .svc-row-item {
  margin-top: 110px;
}
.sri-photo {
  display: block;
}
.sri-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
}
.svc-row-item h3 {
  margin-bottom: 18px;
}
.svc-row-item .sr-kv {
  margin: 26px 0 30px;
}
.gp-list li > span small {
  margin-top: 2px;
  font-family: var(--sr-ff-serif);
  font-size: 14px;
  font-style: italic;
}
.gp-list b em {
  margin: 0 4px;
  color: var(--sr-muted);
  font-style: normal;
}
.split-hours {
  margin-top: 20px;
  font-size: 15px;
}

/*----- 11.2 The Bespoke Process -----*/
.sd-hero {
  margin-bottom: 40px;
}
.sd-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.sd-body > h2 {
  margin-bottom: 20px;
}
.sd-facts {
  margin: 30px 0 60px;
}
.sd-h {
  margin-bottom: 30px;
}
.pr-steps {
  position: relative;
  margin-bottom: 50px;
}
.pr-steps::before {
  content: "";
  position: absolute;
  left: 51px;
  top: 30px;
  bottom: 30px;
  border-left: 1px dashed var(--sr-dash);
}
.pr-step {
  position: relative;
  display: grid;
  grid-template-columns: 104px 120px 1fr;
  align-items: center;
  gap: 26px;
  padding: 16px 0;
}
.pr-week {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 6px 12px;
  background: var(--sr-bg);
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
  font-style: italic;
  white-space: nowrap;
}
.pr-photo {
  display: block;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
}
.pr-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  object-fit: cover;
}
.pr-body h3 {
  margin-bottom: 6px;
}
.pr-body p {
  font-size: 15.5px;
}

/*----- 11.3 Commissions & Projects -----*/
.pj-gallery {
  margin-bottom: 70px;
}
.pj-main {
  display: block;
}
.pj-main img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
}
.pj-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  height: 100%;
}
.pj-side a {
  display: block;
  overflow: hidden;
}
.pj-side img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pj-text h2 {
  margin-bottom: 20px;
}
.pj-facts {
  margin-bottom: 30px;
}
.pj-nav {
  margin-top: 70px;
}
.sr-project.is-two .pj-head {
  margin-bottom: 56px;
}
.pj-rail {
  position: relative;
  margin-bottom: 70px;
  padding: 0 4%;
}
.pj-slide {
  display: block;
  overflow: hidden;
}
.pj-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.9s var(--sr-ease);
}
.pj-slide:hover img {
  transform: scale(1.04);
}
.pj-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.pj-cols {
  column-count: 2;
  column-gap: 40px;
}
.pj-cols p {
  break-inside: avoid;
}

/*----- 11.4 About & History -----*/
.ab-photos {
  position: relative;
  padding: 0 18% 70px 0;
}
.ab-big img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.ab-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 10px solid var(--sr-bg);
}
.ab-small img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ab-years {
  position: absolute;
  left: 24px;
  bottom: 110px;
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  background: var(--sr-night);
  color: rgba(250, 248, 245, 0.8);
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.ab-years b {
  color: #FAF8F5;
  font-size: 52px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
}
.ab-years em {
  color: var(--sr-camel);
  font-family: var(--sr-ff-serif);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}
.sr-about h2 {
  margin-bottom: 20px;
}
.sr-about .sr-kv {
  margin: 26px 0 30px;
}
.history {
  position: relative;
}
.history::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 10px;
  bottom: 10px;
  border-left: 1px dashed var(--sr-dash);
}
.hi-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  padding: 0 0 40px;
}
.hi-year {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 2px 10px;
  background: var(--sr-night);
  color: var(--sr-camel);
  font-family: var(--sr-ff-serif);
  font-size: 26px;
  font-style: italic;
  line-height: 1.2;
}
[data-theme="dark"] .hi-year {
  background: #0B0E0A;
}
.hi-item h3 {
  margin-bottom: 6px;
}

/*----- 11.5 Tailors -----*/
.team-row.is-all {
  row-gap: 70px;
}
.team-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  min-height: 300px;
  padding: 30px 20px;
  background: var(--sr-panel);
  color: var(--sr-heading);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.team-join i {
  color: var(--sr-accent-text);
  font-size: 30px;
}
.team-join b {
  font-size: 21px;
  font-weight: 400;
}
.team-join span {
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.team-join:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.tl-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.sr-tailor h2 {
  margin-bottom: 20px;
}
.sr-tailor .sr-kv {
  margin: 26px 0 30px;
}

/*----- 11.6 FAQ & Contact -----*/
.faq-search {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.faq-search .sr-input {
  height: 62px;
  padding-left: 24px;
  font-size: 17px;
}
.faq-search > i {
  position: absolute;
  right: 22px;
  top: 31px;
  color: var(--sr-accent-text);
  transform: translateY(-50%);
}
.faq-none {
  margin: 16px 0 0;
  text-align: center;
}
.faq-topic + .faq-topic {
  margin-top: 90px;
}
.faq-topic h2 {
  margin-bottom: 24px;
}
.ft-photo {
  margin: 0;
}
.ft-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.6;
  object-fit: cover;
}
.ft-photo.sr-arch img,
.ft-photo.sr-arch-b img {
  aspect-ratio: 4 / 4.6;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}
.cta-row .sr-eyebrow {
  margin-bottom: 4px;
}
.sr-faq-cta {
  overflow: hidden;
}
.ci-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.contact-info h2 {
  margin-bottom: 20px;
}
.ci-rows {
  margin: 26px 0 30px;
}
.contact-side .sr-title {
  margin-bottom: 30px;
}
.hours-list.is-big li {
  padding: 11px 0;
  font-size: 16px;
}
.contact-note {
  margin-top: 22px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 17px;
  font-style: italic;
}
.contact-main .sr-contact-form h2 {
  margin-bottom: 26px;
}
.sr-contact-form .sr-btn {
  margin-top: 24px;
}
.sr-map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(0.4) sepia(0.15);
}
[data-theme="dark"] .sr-map iframe {
  filter: grayscale(0.6) invert(0.88) hue-rotate(180deg);
}

/*----- 11.7 Shop Toolbar & Size Guide -----*/
.shop-subbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin: -16px 0 36px;
}
.shop-subbar .chip-choice span {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.sr-sidebar .widget .chip-list {
  gap: 6px;
}
.sr-sidebar .widget .chip-choice span {
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
}
.pd-guide {
  margin-left: 12px;
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.size-table th {
  padding: 12px 14px;
  background: var(--sr-night);
  color: var(--sr-paper);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}
.size-table td {
  padding: 11px 14px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat;
  color: var(--sr-text);
}
.size-table td:first-child {
  color: var(--sr-heading);
  font-weight: 500;
}

/*----- 11.8 Coming Soon & 404 -----*/
.sr-bare {
  min-height: 100vh;
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  overflow: hidden;
}
.bare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 8%;
  text-align: center;
}
.bare-inner > *:not(canvas) {
  position: relative;
  z-index: 1;
}
.bare-logo {
  margin-bottom: 50px;
}
.bare-logo img {
  width: auto;
  height: 28px;
}
.bare-inner h1 {
  max-width: 620px;
  font-size: clamp(40px, 4vw, 68px);
}
.bare-inner .sr-lead {
  max-width: 520px;
  margin: 22px auto 34px;
}
.error-code {
  margin-bottom: 6px;
  color: #FAF8F5;
  font-size: clamp(110px, 12vw, 200px);
  font-weight: 300;
  line-height: 0.9;
}
.error-code em {
  color: var(--sr-camel);
  font-family: var(--sr-ff-serif);
}
.launch-count {
  display: flex;
  gap: 12px;
  margin-bottom: 34px;
}
.launch-count span {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 96px;
  padding: 16px 10px;
  color: var(--sr-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.launch-count span::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--sr-dash);
}
.launch-count b {
  color: var(--sr-heading);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.1;
}
.bare-news {
  width: 100%;
  max-width: 480px;
  margin-bottom: 26px;
}
.bare-social {
  justify-content: center;
}
.bare-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  text-align: left;
}
.bare-line > i {
  color: var(--sr-camel);
  font-size: 20px;
}
.bare-line span {
  display: flex;
  flex-direction: column;
}
.bare-line small {
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
  font-style: italic;
}
.bare-line b {
  color: var(--sr-heading);
  font-size: 24px;
  font-weight: 300;
}
.sr-btns.is-center {
  justify-content: center;
}

/*======================
12. Atelier Tools
========================*/
/*----- 12.1 Booking Wizard -----*/
.wz-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 56px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px) left top / 100% 1px no-repeat;
}
.wz-steps li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 0 0;
  color: var(--sr-muted);
  cursor: default;
}
.wz-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--sr-heading);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--sr-ease);
}
.wz-steps li b {
  font-family: var(--sr-ff-serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
}
.wz-steps li span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wz-steps li.is-active,
.wz-steps li.is-done {
  color: var(--sr-heading);
}
.wz-steps li.is-active::before,
.wz-steps li.is-done::before {
  transform: scaleX(1);
}
.wz-steps li.is-done {
  cursor: pointer;
}
.wz-step {
  display: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step.is-active {
  display: block;
}
.wz-step legend {
  margin-bottom: 22px;
}
.wz-help {
  margin: 16px 0 20px;
  color: var(--sr-muted);
  font-size: 15px;
}
.wz-help b {
  color: var(--sr-heading);
  font-weight: 500;
}
.wz-help i {
  color: var(--sr-accent-text);
}
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 36px;
}
.wz-nav [disabled] {
  opacity: 0.4;
  pointer-events: none;
}
.wz-terms {
  margin-top: 20px;
}
.wz-done {
  padding: 46px 40px;
  background: var(--sr-panel);
  text-align: center;
}
.done-mark {
  display: block;
  width: 64px;
  margin: 0 auto 16px;
}
.done-mark img {
  display: block;
  width: 100%;
}
[data-theme="dark"] .done-mark img {
  filter: invert(0.92);
}
.wz-done h3 {
  margin-bottom: 20px;
}
.wz-done .sr-kv {
  margin-bottom: 26px;
  text-align: left;
}
.choice-grid.is-people .choice-card .cc-body > img,
.cc-any {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  border-radius: 50%;
}
.cc-any {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sr-tonal);
  color: var(--sr-accent-text);
}
.date-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  margin-bottom: 26px;
}
.date-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.date-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.date-choice span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  background: var(--sr-panel);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.date-choice small,
.date-choice em,
.date-choice i {
  color: var(--sr-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.date-choice b {
  color: var(--sr-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
}
.date-choice i {
  margin-top: 4px;
  color: var(--sr-ok);
  letter-spacing: 0.06em;
}
.date-choice.is-full span {
  opacity: 0.45;
}
.date-choice.is-full i {
  color: var(--sr-muted);
}
.date-choice input:checked + span {
  background: var(--sr-night);
  --sr-heading: #FAF8F5;
  --sr-muted: rgba(250, 248, 245, 0.7);
  --sr-ok: #B7D3A6;
}
[data-theme="dark"] .date-choice input:checked + span {
  background: #2C3A2A;
}
.date-choice input:focus-visible + span {
  outline: 2px solid var(--sr-olive);
  outline-offset: 2px;
}
.slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bk-summary {
  position: sticky;
  top: 110px;
}
.bk-summary h3 {
  margin-bottom: 18px;
}
.chain-h {
  margin: 30px 0 12px;
}
.bk-open {
  margin: 20px 0 0;
  font-size: 14.5px;
}

/*----- 12.2 The Builder -----*/
.bd-intro {
  margin-bottom: 30px;
}
.bd-intro h2 {
  margin-bottom: 14px;
}
.bd-step {
  min-width: 0;
  margin: 0 0 54px;
  padding: 0;
  border: 0;
}
.bd-step legend {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  margin-bottom: 22px;
  padding-bottom: 14px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px) left bottom / 100% 1px no-repeat;
}
.bd-n {
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 20px;
  font-style: italic;
}
.choice-grid.is-two {
  grid-template-columns: repeat(2, 1fr);
}
.choice-grid.is-three {
  grid-template-columns: repeat(3, 1fr);
}
.choice-card.is-check .cc-body {
  padding-right: 54px;
}
.choice-card.is-check .cc-body::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--sr-line-2);
  border-radius: 3px;
}
.choice-card.is-check input:checked + .cc-body::before {
  content: "00c";
  border-color: var(--sr-camel);
  background: var(--sr-camel);
  color: var(--sr-night);
  font-family: "Font Awesome 6 Free";
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
.bd-seasons {
  margin-bottom: 18px;
}
.cloth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.cloth-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.cloth-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ch-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 8px 8px 10px;
  background: var(--sr-panel);
  transition: background-color 0.3s ease;
}
.ch-body canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.8;
  margin-bottom: 6px;
}
.ch-body b {
  color: var(--sr-heading);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}
.ch-body small {
  color: var(--sr-muted);
  font-size: 12.5px;
}
.cloth-choice:hover .ch-body {
  background: var(--sr-panel-2);
}
.cloth-choice input:checked + .ch-body {
  background: var(--sr-night);
  --sr-heading: #FAF8F5;
  --sr-muted: rgba(250, 248, 245, 0.7);
}
.cloth-choice input:focus-visible + .ch-body {
  outline: 2px solid var(--sr-olive);
  outline-offset: 2px;
}
.swatch-chip .sw {
  width: 30px;
  height: 30px;
}
.swatch-chip input:disabled ~ .sw,
.swatch-chip input:disabled ~ .sc-txt {
  opacity: 0.4;
}
.bd-summary {
  position: sticky;
  top: 100px;
  background: var(--sr-panel);
}
.bd-board {
  padding: 26px 26px 10px;
  background-color: var(--sr-surface);
  background-image: linear-gradient(rgba(var(--sr-camel-rgb), 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sr-camel-rgb), 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
}
.bd-board canvas {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 400 / 525;
}
.bd-body {
  padding: 30px 34px 34px;
}
.bd-body h3 {
  margin-bottom: 2px;
}
.bd-body > .sr-sub {
  display: block;
  margin-bottom: 18px;
}
.bd-lines {
  margin-bottom: 4px;
}
.bd-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 6px;
}
.bd-total > span {
  color: var(--sr-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bd-total b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 38px;
  font-style: italic;
  font-weight: 400;
}
.bd-plan-h {
  margin: 26px 0 10px;
}
.bd-plan {
  position: relative;
  margin-bottom: 20px;
}
.bd-plan li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0 7px 24px;
  font-size: 15px;
}
.bd-plan li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--sr-heading);
}
.bd-plan li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(50% + 6px);
  height: calc(100% - 8px);
  border-left: 1px dashed var(--sr-dash);
}
.bd-plan li:last-child::after {
  display: none;
}
.bd-plan li.is-last::before,
.bd-plan li.is-now::before {
  background: var(--sr-heading);
}
.bd-plan li span {
  color: var(--sr-text);
}
.bd-plan li b {
  color: var(--sr-heading);
  font-weight: 500;
  white-space: nowrap;
}
.bd-measures {
  margin-bottom: 20px;
  font-size: 14.5px;
}
.bd-measures a {
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-style: italic;
}

/*----- 12.3 The Measurement Guide -----*/
.mz-figure-card {
  position: sticky;
  top: 100px;
  padding: 26px 26px 30px;
  background: var(--sr-panel);
}
.mz-figure-card canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 400 / 1000;
  cursor: pointer;
}
.mz-how {
  margin-top: 16px;
  padding-top: 16px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px) left top / 100% 1px no-repeat;
}
.mz-how .sr-sub b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-style: normal;
  font-weight: 500;
}
.mz-name {
  margin: 4px 0 6px;
}
.mz-head {
  margin-bottom: 30px;
}
.mz-head h2 {
  margin-bottom: 14px;
}
.mz-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-bottom: 26px;
}
.mz-field > label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mz-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--sr-line-2);
  color: var(--sr-heading);
  font-size: 11px;
  letter-spacing: 0;
}
.mz-field.is-active .mz-n {
  background: var(--sr-night);
  box-shadow: none;
  color: var(--sr-paper);
}
[data-theme="dark"] .mz-field.is-active .mz-n {
  background: var(--sr-camel);
  color: var(--sr-night);
}
.mz-field .sr-input {
  padding-right: 52px;
}
.mz-field.is-active .sr-input {
  border-color: var(--sr-olive);
}
.mz-unit {
  position: absolute;
  right: 18px;
  top: 47px;
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-style: italic;
  pointer-events: none;
}
.mz-range {
  display: block;
  min-height: 20px;
  margin-top: 4px;
  color: var(--sr-err);
  font-size: 13px;
}
.mz-result {
  margin-top: 30px;
  padding: 34px;
  background: var(--sr-panel);
}
.mz-result h3 {
  margin-bottom: 16px;
}
.mz-result .sr-kv {
  margin-bottom: 26px;
}
.tip-card .tip-media {
  display: block;
  margin-bottom: 24px;
}
.tip-card .tip-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
}
.tip-card h3 {
  margin-bottom: 10px;
}

/*----- 12.4 Alterations -----*/
.alt-head {
  margin-bottom: 36px;
}
.alt-head h2 {
  margin-bottom: 14px;
}
.alt-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 50px;
}
.alt-group h3 {
  margin-bottom: 14px;
}
.alt-item {
  display: grid;
  grid-template-columns: 22px auto 1fr auto;
  align-items: baseline;
  gap: 2px 12px;
  padding: 10px 0;
  cursor: pointer;
}
.alt-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ai-box {
  align-self: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--sr-line-2);
  border-radius: 3px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.alt-item input:checked + .ai-box {
  border-color: var(--sr-night);
  background: var(--sr-night);
}
.alt-item input:checked + .ai-box::after {
  content: "00c";
  display: block;
  color: var(--sr-paper);
  font-family: "Font Awesome 6 Free";
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
[data-theme="dark"] .alt-item input:checked + .ai-box {
  border-color: var(--sr-night);
  background: var(--sr-night);
}
.alt-item input:checked + .ai-box::after {
  content: "00c";
  display: block;
  color: var(--sr-paper);
  font-family: "Font Awesome 6 Free";
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
.alt-item input:focus-visible + .ai-box {
  outline: 2px solid var(--sr-olive);
  outline-offset: 2px;
}
.ai-name {
  color: var(--sr-heading);
}
.ai-fill {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 3px, transparent 3px 7px);
}
.ai-price {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
}
.alt-item small {
  grid-column: 2 / -1;
  color: var(--sr-muted);
  font-size: 13px;
}
.alt-summary {
  position: sticky;
  top: 110px;
}
.alt-summary h3 {
  margin-bottom: 16px;
}
.alt-lines li > span small {
  display: block;
}
.alt-express {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 6px;
  cursor: pointer;
}
.alt-express input {
  width: 18px;
  height: 18px;
  accent-color: var(--sr-olive);
}
.alt-express span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.alt-express b {
  color: var(--sr-heading);
  font-weight: 500;
}
.alt-express small {
  color: var(--sr-muted);
  font-size: 13px;
}
.alt-summary .sr-btn {
  margin-top: 24px;
}

/*----- 12.5 The Cloth Library -----*/
.cl-side .widget-search {
  margin-bottom: 30px;
}
.cl-filter {
  margin-bottom: 30px;
}
.cl-filter .sr-label {
  margin-bottom: 12px;
}
.cl-filter .chip-list {
  gap: 6px;
}
.cl-filter .chip-choice span {
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
}
.swatch-list.is-col {
  flex-direction: column;
  gap: 10px;
}
.swatch-list.is-col .swatch-chip .sw {
  width: 22px;
  height: 22px;
}
.cl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.cl-sort {
  width: 240px;
}
.cloth-card {
  height: 100%;
}
.cc-swatch {
  display: block;
}
.cc-swatch canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.05;
}
.cc-meta {
  padding-top: 16px;
}
.cc-meta h3 {
  margin-bottom: 2px;
}
.cc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 10px 0 12px;
  color: var(--sr-muted);
  font-size: 13.5px;
}
.cc-facts li + li::before {
  content: "\00B7";
  margin-right: 14px;
}
.cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat;
  font-size: 14px;
}
.cc-foot b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}
.cc-qv {
  color: var(--sr-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cc-qv:hover {
  color: var(--sr-accent-text);
}
.cloth-qv {
  display: none;
  width: min(880px, 92vw);
  padding: 40px !important;
  background: var(--sr-surface);
  color: var(--sr-text);
}
.cloth-qv canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.05;
}
.qv-name {
  margin: 4px 0 16px;
}
.cloth-qv .sr-kv {
  margin-bottom: 24px;
}

/*----- 12.6 Cloth Details -----*/
.cd-swatch {
  position: relative;
}
.cd-swatch canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
}
.cd-copy h2 {
  margin-bottom: 20px;
}
.cd-copy .sr-kv {
  margin: 28px 0 34px;
}
.make-in {
  height: 100%;
  padding: 0 0 6px;
}
.mi-board {
  margin-bottom: 18px;
  padding: 18px;
  background: var(--sr-surface);
}
.mi-board canvas {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 525;
}
.make-in h3 {
  margin-bottom: 10px;
}

/*======================
13. Swatch Colours
========================*/
/* generated from the data block by sr_build.py: the colour of every dot the site draws */
.sw-any {
  background: conic-gradient(#1E2B45 0 25%, #6F7174 0 50%, #D9CCB2 0 75%, #A0532E 0) !important;
}
.sw-black {
  --sw: #1D1D1F;
}
.sw-blue {
  --sw: #7E97B5;
}
.sw-bottle {
  --sw: #24402F;
}
.sw-brown {
  --sw: #6A5641;
}
.sw-camel {
  --sw: #B08850;
}
.sw-card {
  --sw: #1F261E;
}
.sw-green {
  --sw: #3D4B35;
}
.sw-grey {
  --sw: #6F7174;
}
.sw-ivory {
  --sw: #ECE6DA;
}
.sw-loden {
  --sw: #2E3D2F;
}
.sw-navy {
  --sw: #1E2B45;
}
.sw-neutral {
  --sw: #D9CCB2;
}
.sw-olive {
  --sw: #6E6F4A;
}
.sw-powder {
  --sw: #A9BCD0;
}
.sw-sand {
  --sw: #D8C1A6;
}
.sw-stone {
  --sw: #D9D2C2;
}
.sw-tobacco {
  --sw: #7A4E35;
}
.sw-warm {
  --sw: #A0532E;
}
.sw-white {
  --sw: #F4F3EF;
}
.sw-btn-horn {
  --sw: #5A4433;
}
.sw-btn-corozo {
  --sw: #B59A72;
}
.sw-btn-pearl {
  --sw: #E7E1D6;
}
.sw-btn-gilt {
  --sw: #C1A05C;
}
.sw-lin-bemberg {
  --sw: #6E2E38;
}
.sw-lin-silk {
  --sw: #8C6A3F;
}
.sw-lin-printed {
  --sw: #3E4C6A;
}
.sw-lin-half {
  --sw: #C9C2B4;
}
.sw-lin-unlined {
  --sw: #E3DED3;
}

/*======================
14. Atelier Shop
========================*/
/*----- 14.1 Product Cards -----*/
/* the piece photographed on cream, as the base's shop; its colour dots under the name swap the photograph */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: var(--sr-panel-2);
}
.pc-media .pc-plate {
  display: block;
}
.pc-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5.4;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--sr-ease), opacity 0.3s ease;
}
.product-card:hover .pc-media img {
  transform: scale(1.06);
}
.pc-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 6px 14px;
  background: var(--sr-night);
  color: #FFFFFF;
  font-family: var(--sr-ff-serif);
  font-size: 14px;
  font-style: italic;
  border-radius: 999px;
}
.pc-badge.is-sale {
  background: var(--sr-oxblood);
}
.pc-wish {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sr-surface);
  color: var(--sr-heading);
  font-size: 13px;
  box-shadow: var(--sr-shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.35s var(--sr-ease), background-color 0.3s ease, color 0.3s ease;
}
.product-card:hover .pc-wish,
.pc-wish:focus-visible,
.pc-wish.is-on {
  opacity: 1;
  transform: none;
}
.pc-wish:hover,
.pc-wish.is-on {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.pc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 2px 0;
}
.pc-kind {
  color: var(--sr-accent-text);
  font-family: var(--sr-ff-serif);
  font-size: 15px;
  font-style: italic;
}
.pc-body h3 {
  margin: 0 0 2px;
}
.pc-body h3 a:hover {
  color: var(--sr-accent-text);
}
.pc-colours {
  display: flex;
  gap: 10px;
  margin: 10px 0 4px;
}
.pc-colours .swatch-dot {
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}
.pc-price {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 19px;
  font-style: italic;
}
.pc-price s {
  color: var(--sr-muted);
  font-size: 0.8em;
}
.pc-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sr-tonal);
  color: var(--sr-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-add:hover {
  background: var(--sr-night);
  color: var(--sr-paper);
}

/*----- 14.2 Shop Grid -----*/
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin-bottom: 40px;
}
.shop-toolbar .sr-filter-tabs {
  margin-bottom: 0;
}
.toolbar-picks {
  display: flex;
  align-items: center;
  gap: 20px;
}
.toolbar-picks p {
  margin: 0;
  color: var(--sr-muted);
  font-size: 14px;
  white-space: nowrap;
}
.toolbar-picks b {
  color: var(--sr-heading);
  font-weight: 500;
}
.shop-sort {
  width: 220px;
}

/*----- 14.3 Product Page -----*/
.pd-gallery {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
}
.pd-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-thumbs button {
  background: var(--sr-panel-2);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.3s ease;
}
.pd-thumbs button.is-active {
  box-shadow: inset 0 0 0 1px var(--sr-olive);
}
.pd-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.pd-main {
  position: relative;
  display: block;
  background: var(--sr-panel-2);
}
.pd-main img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5.2;
  object-fit: cover;
  object-position: center top;
}
.pd-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sr-surface);
  color: var(--sr-heading);
  font-size: 13px;
}
.pd-info h2 {
  margin-bottom: 12px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 12px;
  color: var(--sr-heading);
  font-family: var(--sr-ff-head);
  font-family: var(--sr-ff-serif);
  font-size: 40px;
  font-style: italic;
}
.pd-price b {
  font-weight: 400;
}
.pd-price small {
  color: var(--sr-muted);
  font-family: var(--sr-ff-body);
  font-size: 13px;
}
.pd-pick {
  margin: 26px 0 0;
}
.pd-pick .sr-label-text b {
  color: var(--sr-accent-text);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 32px 0 28px;
}
.pd-wish.is-on {
  background: var(--sr-night);
  color: var(--sr-paper);
}
.pd-tabs {
  margin-top: 90px;
}
.review-list li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--sr-line-2);
}
.review-list img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  display: block;
  color: var(--sr-heading);
}

/*----- 14.4 Bag, Checkout & Wishlist -----*/
.bag-h {
  margin-bottom: 20px;
}
.bag-line {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: 22px;
  padding: 20px 40px 20px 0;
  border-bottom: 1px dashed var(--sr-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 96px 1fr auto;
}
.bl-img {
  display: block;
  background: var(--sr-panel-2);
}
.bl-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.bl-cat {
  display: block;
  color: var(--sr-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bl-body h3 {
  margin: 4px 0;
}
.bl-price {
  color: var(--sr-muted);
  font-size: 14px;
}
.bl-total {
  min-width: 90px;
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  text-align: right;
}
.bl-remove {
  position: absolute;
  top: 50%;
  right: 0;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  color: var(--sr-muted);
  font-size: 12px;
}
.bl-remove:hover {
  background: var(--sr-tonal);
  color: var(--sr-err);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.coupon-form input {
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--sr-line-2);
  background: transparent;
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
}
.coupon-form .form-status {
  flex-basis: 100%;
}
.order-summary h2 {
  margin-bottom: 20px;
}
.order-summary .sr-field {
  margin-bottom: 16px;
}
.ship-meter {
  height: 3px;
  margin: 4px 0 10px;
  background: var(--sr-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--sr-olive);
  transition: width 0.5s var(--sr-ease);
}
.ship-note {
  margin-bottom: 16px;
  font-size: 14px;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 18px 0 22px;
}
.sum-total > span {
  color: var(--sr-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sum-total b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 34px;
  font-style: italic;
  font-weight: 400;
}
.sum-hint {
  margin: 14px 0 0;
  font-size: 13.5px;
}
.sum-hint i {
  color: var(--sr-accent-text);
}
.cart-empty,
.order-done {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.ce-img {
  display: block;
  width: 140px;
  margin: 0 auto 16px;
}
.cart-empty p,
.order-done p {
  margin: 12px 0 26px;
}
.order-done .sr-btns {
  justify-content: center;
}
.co-ship,
.co-pay {
  margin: 30px 0 0;
  padding: 0;
  border: 0;
}
.co-ship legend {
  margin-bottom: 16px;
}
.ship-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 16px 18px;
  background: var(--sr-surface);
  cursor: pointer;
}
.ship-choice input {
  accent-color: var(--sr-olive);
}
.sc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.sc-body b {
  color: var(--sr-heading);
  font-weight: 500;
}
.sc-body small {
  color: var(--sr-muted);
  font-size: 13px;
}
.sc-price {
  color: var(--sr-heading);
  font-weight: 500;
}
.co-terms {
  margin: 16px 0 20px;
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--sr-line-2);
}
.ol-img {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  background: var(--sr-surface);
}
.ol-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.ol-img b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--sr-olive);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}
.ol-name {
  flex: 1;
  color: var(--sr-heading);
  font-size: 15px;
}
.ol-name small {
  display: block;
  color: var(--sr-muted);
  font-size: 12.5px;
}

/*======================
15. Journal & Account
========================*/
/*----- 15.1 Journal -----*/
.blog-list {
  display: grid;
  gap: 40px;
}
.blog-post {
  background: var(--sr-surface);
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.8s var(--sr-ease);
}
a.post-thumb:hover img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 82px;
  background: var(--sr-night);
  color: var(--sr-camel);
  font-family: var(--sr-ff-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1;
}
.post-date b {
  margin-bottom: 4px;
  color: var(--sr-paper);
  font-family: var(--sr-ff-body);
  font-size: 34px;
  font-style: normal;
  font-weight: 300;
}
/* a slider inside a grid item: held to the item's width, or it measures itself without end */
.blog-list > * {
  min-width: 0;
}
.post-gallery {
  overflow: hidden;
}
.post-gallery .swiper {
  width: 100%;
  margin: 0;
}
.post-gallery .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.mini-nav .slider-arrow {
  width: 46px;
  height: 46px;
  background: rgba(21, 21, 21, 0.7);
  color: var(--sr-olive);
}
.bp-body {
  padding: 30px 0 0;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-style: italic;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta a {
  color: var(--sr-accent-text);
}
.sr-face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.bp-body h3 {
  margin-bottom: 14px;
}
.bp-body h3 a:hover,
.blog-post.is-quote h3 a:hover {
  color: var(--sr-accent-text);
}
.bp-body p {
  margin-bottom: 18px;
}
.blog-post.is-quote {
  position: relative;
  padding: 50px 50px 46px;
  background: var(--sr-night);
  --sr-heading: #F4F1EB;
  color: rgba(244, 241, 235, 0.72);
}
.bp-glyph {
  position: absolute;
  right: 40px;
  top: 34px;
  color: var(--sr-olive);
  font-size: 56px;
  opacity: 0.5;
}
.blog-post.is-quote .pcd-meta {
  display: block;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-style: italic;
}
.blog-post.is-quote .pcd-meta a,
.bp-by {
  color: var(--sr-olive);
}
.bp-by {
  display: block;
  margin-top: 16px;
  font-style: italic;
}
.post-card .card-media img {
  aspect-ratio: 4 / 3;
}
.pcd-meta {
  font-size: 13px;
  font-style: italic;
}
.pcd-meta a {
  color: var(--sr-accent-text);
}
.post-card h3 {
  margin-top: 6px;
}
.pcd-by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}
.pcd-by img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/*----- 15.2 The Article -----*/
.article-hero {
  position: relative;
  overflow: hidden;
}
.article-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-meta {
  margin-top: 26px;
}
.article-body > h2 {
  margin: 4px 0 0;
}
.article-body > .sr-rule {
  margin: 22px 0 28px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 36px 0;
  padding: 36px 40px;
  border-left: 1px dashed var(--sr-dash);
  background: var(--sr-panel);
}
.article-quote p {
  color: var(--sr-heading);
  font-family: var(--sr-ff-serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}
.article-quote cite {
  display: block;
  margin-top: 12px;
  color: var(--sr-accent-text);
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair .grid-photo img {
  aspect-ratio: 4 / 3;
}
.article-guards {
  margin: 10px 0 26px;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0;
  padding: 24px 28px;
}
.ab-text small {
  display: block;
  color: var(--sr-accent-text);
  font-size: 13px;
  font-style: italic;
}
.ab-text b {
  color: var(--sr-heading);
  font-family: var(--sr-ff-head);
  font-size: 24px;
  font-weight: 400;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--sr-line);
  border-bottom: 1px solid var(--sr-line);
}
.article-foot .tag-cloud a {
  background: var(--sr-panel);
}
.share-row {
  display: flex;
  gap: 8px;
}
.share-row .share-copy.is-done {
  background: var(--sr-olive);
  color: var(--sr-night);
}
.author-box {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 40px 0;
}
.author-box img {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box h3 {
  margin-bottom: 8px;
}
.author-box p {
  margin: 0;
  font-size: 14.5px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 50px;
}
.pn-prev,
.pn-next {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 44%;
}
.pn-prev span,
.pn-next span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pn-next span {
  align-items: flex-end;
  text-align: right;
}
.pn-prev i,
.pn-next i {
  color: var(--sr-accent-text);
}
.post-nav b {
  font-size: 17px;
}
.comment-list {
  margin: 20px 0 40px;
}
.comment-list li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--sr-line);
}
.comment-list li li {
  margin-top: 18px;
  padding-bottom: 0;
  border: 0;
}
.comment-list img {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list b {
  display: block;
  color: var(--sr-heading);
  font-family: var(--sr-ff-head);
  font-size: 18px;
}
.comment-list span {
  font-size: 12.5px;
  font-style: italic;
}
.comment-list p {
  margin: 8px 0 6px;
  font-size: 14.5px;
}
.comment-form h3 {
  margin-bottom: 22px;
}
.comment-form .sr-btn {
  margin-top: 24px;
}

/*----- 15.3 Account -----*/
.dash-side {
  padding: 32px 28px;
}
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--sr-line);
}
.dash-who img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}
.dash-who span {
  font-size: 13.5px;
  font-style: italic;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin: 22px 0 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 2px solid transparent;
  background: var(--sr-surface);
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}
.dash-tabs .sr-ico {
  width: 38px;
  height: 38px;
}
.dash-tabs button i {
  width: 22px;
  color: var(--sr-accent-text);
  text-align: center;
}
.dash-tabs button.is-active {
  border-color: var(--sr-camel);
  background: var(--sr-night);
  color: var(--sr-paper);
}
.dash-tabs button.is-active i {
  color: var(--sr-camel);
}
.dash-sub {
  margin: 34px 0 16px;
}
.dash-tabs button.is-active .ico-ink {
  display: none;
}
.dash-tabs button.is-active .ico-light {
  display: block;
}
.dash-panel h2 {
  margin-bottom: 20px;
}
.dash-panel h2 + .my-list + h2 {
  margin-top: 40px;
}
.my-list {
  display: grid;
  gap: 8px;
  margin-bottom: 26px;
}
.my-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 16px 20px;
  background: var(--sr-panel);
}
.my-list li b {
  color: var(--sr-heading);
  font-size: 17px;
  font-weight: 500;
}
.my-list li span {
  grid-column: 1;
  font-size: 13.5px;
}
.my-list li .sr-tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.my-list li.is-empty {
  display: block;
  font-family: var(--sr-ff-serif);
  font-size: 17px;
  font-style: italic;
}
.table-wrap {
  margin-bottom: 26px;
}
.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sr-table th {
  padding: 12px 14px;
  background: var(--sr-night);
  color: #FFFFFF;
  font-family: var(--sr-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}
.sr-table td {
  padding: 14px;
  border-bottom: 1px solid var(--sr-line);
  vertical-align: top;
}
.sr-table td:first-child {
  color: var(--sr-heading);
  font-family: var(--sr-ff-body);
  font-weight: 700;
  white-space: nowrap;
}
.account-form.is-plain .sr-btn {
  margin-top: 22px;
}
.account-form.is-plain .sr-check {
  margin-top: 18px;
}
/* login, register, reset: a washed photograph beside the form */
.account-wrap {
  display: grid;
  grid-template-columns: 5fr 6fr;
  background: var(--sr-panel);
}
.account-side {
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 50px 44px;
}
.as-copy h2 {
  margin-bottom: 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
}
.account-form {
  padding: 56px 54px;
}
.account-form > h3 {
  margin-bottom: 26px;
}
.account-form > .sr-field + .sr-field,
.account-form > .row + .sr-field {
  margin-top: 16px;
}
.account-form .sr-input {
  background: var(--sr-surface);
}
.pass-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  color: var(--sr-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 8px;
  background: var(--sr-panel-2);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--sr-err);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--sr-olive);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-style: italic;
}
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 24px;
  font-size: 14px;
}
.account-row a,
.account-switch a {
  color: var(--sr-accent-text);
}
.account-terms {
  margin: 18px 0 22px;
}
.account-switch {
  margin: 20px 0 0;
  font-size: 14px;
  text-align: center;
}

/*======================
16. Page Title
========================*/
/* the base's page title: a full-bleed photograph, the title centred in paper white; Sartora adds the forest wash, a
   lead and the breadcrumb in italic. Pages without a photograph get the paper band with the pattern paper drifting
   through it; a chalk line closes both. */
.sr-subheader {
  position: relative;
  padding: 250px 0 130px;
  text-align: center;
}
.sr-subheader::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sr-dash) 0 6px, transparent 6px 11px);
}
.sr-subheader.sr-photo-band::before {
  background: linear-gradient(180deg, rgba(31, 38, 30, 0.6) 0%, rgba(31, 38, 30, 0.5) 50%, rgba(31, 38, 30, 0.62) 100%);
}
.sr-subheader .sub-copy {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}
.sr-subheader h1 {
  font-size: clamp(42px, 4.6vw, 78px);
}
.sr-subheader .sub-lead {
  max-width: 580px;
  margin: 18px auto 0;
  font-size: 18px;
}
.sr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 26px;
  color: var(--sr-muted);
  font-family: var(--sr-ff-serif);
  font-size: 17px;
  font-style: italic;
}
.sr-crumbs .sep {
  opacity: 0.6;
}
.sr-crumbs a:hover {
  color: var(--sr-accent-text);
}
.sr-crumbs > span:last-child {
  color: var(--sr-heading);
}
.sr-photo-band.sr-subheader .sr-crumbs {
  color: rgba(250, 248, 245, 0.8);
}
.sr-photo-band.sr-subheader .sr-crumbs > span:last-child {
  color: #FAF8F5;
}
.sr-subheader.is-plain {
  padding: 96px 0 92px;
  background: var(--sr-panel);
  isolation: isolate;
}

/*======================
17. Footer
========================*/
/* the base's forest night footer with its faint pattern drawings - here the WebGL pattern paper - and its four
   columns; on top, the lapel folding into shape beside the call to book */
.sr-footer {
  position: relative;
  overflow: clip;
  --lp-cloth: #C7B299;
  --lp-face: #DCCDB5;
  --lp-edge: rgba(17, 21, 16, 0.6);
  --lp-stitch: rgba(255, 255, 255, 0.7);
  --lp-button: #5A4433;
}
.sr-footer > .container,
.sr-footer > .footer-bottom {
  position: relative;
  z-index: 1;
}
.footer-top {
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: 60px;
  padding: 70px 0 60px;
}
.footer-lapel {
  height: 380px;
}
.footer-lapel canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-call h2 {
  max-width: 640px;
  margin-bottom: 34px;
}
.call-line {
  color: #FAF8F5;
  font-family: var(--sr-ff-serif);
  font-size: 22px;
  font-style: italic;
}
.call-line:hover {
  color: var(--sr-camel);
}
.footer-main {
  padding: 70px 0 60px;
}
.sr-footer .widget > h2 {
  margin-bottom: 24px;
}
.footer-logo {
  display: inline-block;
  margin-bottom: 22px;
}
.footer-logo img {
  width: auto;
  height: 22px;
}
.sr-footer .widget p {
  margin-bottom: 24px;
}
.footer-contact li {
  margin-bottom: 8px;
}
.footer-open {
  margin-top: 18px;
  font-size: 15px;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  color: #FAF8F5;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-links a:hover {
  color: var(--sr-camel);
}
.footer-bottom {
  padding: 26px 0;
  border-top: 1px solid rgba(199, 178, 153, 0.16);
  font-size: 14.5px;
}
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom p a {
  color: #FAF8F5;
}
.footer-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}
.footer-hours li {
  display: flex;
  gap: 8px;
}
.footer-hours span {
  color: var(--sr-sage);
  font-family: var(--sr-ff-serif);
  font-style: italic;
}
.footer-hours b {
  color: #FAF8F5;
  font-weight: 400;
}
.footer-hours li.is-today span,
.footer-hours li.is-today b {
  color: var(--sr-camel);
}