@charset "utf-8";

/*
Theme Name: Northlite - Fine Art Photographer & Print Shop HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Over The Hero (Style One)
   3.6 Side Header (Style Three)
   3.7 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Accordion
   7.2 Tabs & Arrows
   7.3 Faces & Badges
   7.4 Newsletter
   7.5 Voices
   7.6 Hours & Info
8. Cards
   8.1 Facts Strip
   8.2 Work Cards
   8.3 Print Cards
   8.4 Series & Exhibition Cards
   8.5 Sitting & Paper Cards
   8.6 Team & Post Cards
   8.7 Panels & Rows
9. Scroll Moments
   9.1 The Still Life Composes Itself
   9.2 The Edition Ledger
   9.3 Frame & Mat Swap
10. Home 01 - The Studio
   10.1 Hero
   10.2 Intro
   10.3 Four Tall Works
   10.4 Series Split Rows
   10.5 Still Life Section
   10.6 From Sitting To Print
   10.7 About
   10.8 Mosaic
   10.9 Exhibition Band
11. Home 02 - The Editions
   11.1 Hero Carousel
   11.2 The Ladder
   11.3 Ledger Section
   11.4 Voices Beside A Title
   11.5 Care Tiles
12. Home 03 - The Gallery
   12.1 Split Hero
   12.2 Gallery Grid
   12.3 Series Index
   12.4 Frames Section
13. Inner Pages
   13.1 Sidebar & Widgets
   13.2 Rows, Choices & Pages
   13.3 Quantity Stepper
14. Works, Prints & Sittings
   14.1 Choices & Swatches
   14.2 Tabs
   14.3 The Print Page
   14.4 Shop & Bag
   14.5 Portfolio
   14.6 Gallery Wall
   14.7 Work Pages
   14.8 Series, Exhibitions & About
   14.9 Sittings & Booking
   14.10 Proofing Gallery
   14.11 Edition Register
   14.12 Print Care
15. Studio Pages
   15.1 Panels & Wizards
   15.2 Account Dashboard
   15.3 Contact & Articles
16. Print Shop
   16.1 Shop Grid
   16.2 Product Page
   16.3 Bag, Checkout & Wishlist
   16.4 Toast
17. Blog & Account
   17.1 Blog List
   17.2 Blog Details
   17.3 Account Pages
   17.4 Coming Soon & 404
18. Subheader
19. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --tn-charcoal: #1E1E1E;
  --tn-raised: #282828;
  --tn-slate: #27353A;
  --tn-slate-rgb: 39, 53, 58;
  --tn-slate-deep: #1C272B;
  --tn-umber: #222B28;
  --tn-coral: #F26C4F;
  --tn-coral-rgb: 242, 108, 79;
  --tn-coral-soft: #F58A71;
  --tn-coral-deep: #D9563A;
  --tn-mat: #F4F1EA;
  --tn-mat-rgb: 244, 241, 234;
  --tn-ink: #111111;
  --tn-ivory: #EEEBE6;
  --tn-red: #E0503C;
  /* semantic: the dark studio is the default; [data-theme="light"] opens the shutters */
  --tn-bg: #1E1E1E;
  --tn-bg-rgb: 30, 30, 30;
  --tn-surface: #282828;
  --tn-surface-rgb: 40, 40, 40;
  --tn-cream: #252525;
  --tn-cream-rgb: 37, 37, 37;
  --tn-cream-2: #191919;
  --tn-heading: #EEEBE6;
  --tn-heading-rgb: 238, 235, 230;
  --tn-text: #9B9FA5;
  --tn-muted: #8C9096;
  --tn-line: rgba(238, 235, 230, 0.1);
  --tn-line-2: rgba(238, 235, 230, 0.22);
  --tn-field: #2B2B2B;
  --tn-primary: #F26C4F;
  --tn-on-primary: #141414;
  --tn-accent-text: #F26C4F;
  --tn-red-text: #F28A76;
  --tn-leaf-text: #9CC79A;
  --tn-night: #27353A;
  --tn-night-rgb: 39, 53, 58;
  --tn-frame: #1E1E1E;
  --tn-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --tn-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
  --tn-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type: the base's Old Standard TT capitals, widely tracked, over Open Sans */
  --tn-ff-display: 'Old Standard TT', 'Times New Roman', Georgia, serif;
  --tn-ff-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --tn-ff-figure: 'Old Standard TT', 'Times New Roman', Georgia, serif;
  --tn-fs-h1: clamp(36px, 4vw, 66px);
  --tn-fs-h2: clamp(26px, 2.4vw, 40px);
  --tn-fs-h3: clamp(19px, 1.45vw, 23px);
  --tn-fs-h4: 19px;
  --tn-fs-h5: 16px;
  --tn-fs-h6: 14px;
  /* WebGL colours (per section below) */
  --gl-1: #1E1E1E;
  --gl-2: #EEEBE6;
  --gl-3: #4A4A36;
  --gl-alpha: 0.22;
}
[data-theme="light"] {
  --tn-bg: #FFFFFF;
  --tn-bg-rgb: 255, 255, 255;
  --tn-surface: #FFFFFF;
  --tn-surface-rgb: 255, 255, 255;
  --tn-cream: #F2F6F6;
  --tn-cream-rgb: 242, 246, 246;
  --tn-cream-2: #F8FAFA;
  --tn-heading: #111111;
  --tn-heading-rgb: 17, 17, 17;
  --tn-text: #5F6369;
  --tn-muted: #6B6F75;
  --tn-line: rgba(17, 17, 17, 0.1);
  --tn-line-2: rgba(17, 17, 17, 0.22);
  --tn-field: #F2F6F6;
  --tn-accent-text: #B4442B;
  --tn-red-text: #B23B2A;
  --tn-leaf-text: #3F6E3A;
  --tn-frame: #FFFFFF;
  --tn-shadow: 0 18px 44px rgba(17, 17, 17, 0.1);
  --tn-shadow-lg: 0 30px 70px rgba(17, 17, 17, 0.18);
  --gl-1: #F2F6F6;
  --gl-2: #27353A;
  --gl-alpha: 0.12;
}
/* night bands: the base's slate footer, the same in both themes */
.is-night {
  --tn-heading: #EEEBE6;
  --tn-heading-rgb: 238, 235, 230;
  --tn-text: rgba(238, 235, 230, 0.74);
  --tn-muted: rgba(238, 235, 230, 0.64);
  --tn-line: rgba(238, 235, 230, 0.13);
  --tn-line-2: rgba(238, 235, 230, 0.26);
  --tn-accent-text: #F58A71;
  --tn-red-text: #F28A76;
  --tn-leaf-text: #9CC79A;
  --tn-surface: #2F4046;
  --tn-surface-rgb: 47, 64, 70;
  --tn-cream: #2C3B40;
  --tn-field: rgba(238, 235, 230, 0.08);
  --gl-1: #27353A;
  --gl-2: #EEEBE6;
  --gl-3: #F26C4F;
  --gl-alpha: 0.2;
  background-color: var(--tn-night);
  color: var(--tn-text);
}
/* the still-life wall: olive umber, the same in both themes */
.is-umber {
  --tn-heading: #EEEBE6;
  --tn-heading-rgb: 238, 235, 230;
  --tn-text: rgba(238, 235, 230, 0.74);
  --tn-muted: rgba(238, 235, 230, 0.64);
  --tn-line: rgba(238, 235, 230, 0.13);
  --tn-line-2: rgba(238, 235, 230, 0.26);
  --tn-accent-text: #F58A71;
  --tn-surface: #2C3632;
  --tn-cream: #29332F;
  --tn-field: rgba(238, 235, 230, 0.08);
  --gl-1: #222B28;
  --gl-2: #EEEBE6;
  --gl-3: #6B6A4C;
  --gl-alpha: 0.24;
  background-color: var(--tn-umber);
  color: var(--tn-text);
}
/* a print's mat: ink on museum board in both themes */
.tn-on-mat {
  --tn-heading: #111111;
  --tn-heading-rgb: 17, 17, 17;
  --tn-text: #55595F;
  --tn-muted: #5E6268;
  --tn-line: rgba(17, 17, 17, 0.12);
  --tn-line-2: rgba(17, 17, 17, 0.26);
  --tn-accent-text: #B4442B;
  --tn-surface: #FFFFFF;
  --tn-field: #EAE6DC;
  background-color: var(--tn-mat);
  color: var(--tn-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--tn-bg);
  color: var(--tn-text);
  font-family: var(--tn-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.8;
  -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(--tn-ease), background-color 0.3s var(--tn-ease);
}
a:hover {
  color: var(--tn-accent-text);
}
::selection {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
:focus-visible {
  outline: 2px solid var(--tn-coral);
  outline-offset: 3px;
}
/* the base's passepartout: the page sits inside a frame of its own ground colour */
.tn-framed::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1500;
  border: 0 solid var(--tn-frame);
  pointer-events: none;
  transition: border-color 0.4s ease;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Old Standard TT capitals with a wide tracking for every heading; its italic is the soft word */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-weight: 400;
  text-transform: uppercase;
}
h1 {
  font-size: var(--tn-fs-h1);
  line-height: 1.16;
  letter-spacing: 0.28em;
}
h2 {
  font-size: var(--tn-fs-h2);
  line-height: 1.26;
  letter-spacing: 0.26em;
}
h3 {
  font-size: var(--tn-fs-h3);
  line-height: 1.36;
  letter-spacing: 0.18em;
}
h4 {
  font-size: var(--tn-fs-h4);
  line-height: 1.4;
  letter-spacing: 0.16em;
}
h5 {
  font-size: var(--tn-fs-h5);
  line-height: 1.45;
  letter-spacing: 0.2em;
}
h6 {
  font-family: var(--tn-ff-body);
  font-size: var(--tn-fs-h6);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.24em;
}
/* a heading at its outline level that looks like another level (and legends, which take the same look) */
.tn-h2,
.tn-h3,
.tn-h4,
.tn-h5 {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-weight: 400;
  text-transform: uppercase;
}
.tn-h6 {
  color: var(--tn-heading);
  text-transform: uppercase;
}
.tn-h2 {
  font-size: var(--tn-fs-h2);
  line-height: 1.26;
  letter-spacing: 0.26em;
}
.tn-h3 {
  font-size: var(--tn-fs-h3);
  line-height: 1.36;
  letter-spacing: 0.18em;
}
.tn-h4 {
  font-size: var(--tn-fs-h4);
  line-height: 1.4;
  letter-spacing: 0.16em;
}
.tn-h5 {
  font-size: var(--tn-fs-h5);
  line-height: 1.45;
  letter-spacing: 0.2em;
}
.tn-h6 {
  font-family: var(--tn-ff-body);
  font-size: var(--tn-fs-h6);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.24em;
}
/* the soft word in a title: the italic, lower case, close-set (the base wrote these in a script) */
h1 em,
h2 em,
h3 em,
.tn-h2 em,
.tn-h3 em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--tn-accent-text);
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.tn-lead {
  font-family: var(--tn-ff-display);
  font-size: 21px;
  font-style: italic;
  line-height: 1.6;
  color: var(--tn-text);
}
/* figures, prices, dates and edition numbers: the serif's lining figures */
.tn-figure {
  font-family: var(--tn-ff-figure);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}
.tn-caps {
  font-family: var(--tn-ff-body);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.tn-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.tn-bg-cream {
  background-color: var(--tn-cream);
}
.tn-bg-cream-2 {
  background-color: var(--tn-cream-2);
}
.tn-relative {
  position: relative;
  isolation: isolate;
}
/* photo band: one style everywhere (cover photograph under a charcoal wash from the copy side, light copy) */
.tn-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #141414;
  --tn-heading: #EEEBE6;
  --tn-text: rgba(238, 235, 230, 0.84);
  --tn-muted: rgba(238, 235, 230, 0.7);
  --tn-accent-text: #F58A71;
  --tn-line: rgba(238, 235, 230, 0.16);
  color: var(--tn-text);
}
.tn-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tn-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 14, 14, 0.94) 0%, rgba(14, 14, 14, 0.78) 44%, rgba(14, 14, 14, 0.22) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head, kept: a small tracked label, the tracked caps title, a coral hairline wider than the
   title, a lead in the serif's italic (the base set its leads in a script) */
.tn-title {
  margin-bottom: 60px;
}
.tn-eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--tn-accent-text);
  font-family: var(--tn-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.tn-title h2 {
  max-width: 980px;
}
.tn-rule {
  display: block;
  width: 260px;
  max-width: 100%;
  height: 1px;
  margin-top: 26px;
  background: var(--tn-coral);
  transform-origin: left center;
}
.tn-title .tn-lead {
  max-width: 680px;
  margin: 22px 0 0;
}
.tn-title.text-center h2,
.tn-title.text-center .tn-lead {
  margin-left: auto;
  margin-right: auto;
}
.tn-title.text-center .tn-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.tn-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.tn-title.is-split .tn-lead {
  max-width: 480px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the primary button: a coral face, tracked caps; house physics: lift, the arrow slides out and its twin slides in */
.tn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--tn-primary);
  color: var(--tn-on-primary);
  font-family: var(--tn-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--tn-ease), color 0.35s var(--tn-ease), box-shadow 0.35s var(--tn-ease), transform 0.35s var(--tn-ease);
}
.tn-btn i {
  position: relative;
  font-size: 13px;
  transition: transform 0.4s var(--tn-ease), opacity 0.3s ease;
}
.tn-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tn-btn:hover {
  background: var(--tn-coral-soft);
  color: var(--tn-ink);
  box-shadow: 0 14px 30px rgba(var(--tn-coral-rgb), 0.24);
  transform: translateY(-2px);
}
.tn-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.tn-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.tn-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.tn-btn.is-tonal {
  background: var(--tn-cream);
  color: var(--tn-heading);
}
.tn-btn.is-tonal i {
  color: var(--tn-accent-text);
}
.tn-bg-cream .tn-btn.is-tonal {
  background: var(--tn-surface);
}
.tn-btn.is-tonal:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.tn-btn.is-tonal:hover i {
  color: var(--tn-ink);
}
.tn-btn.is-light {
  background: var(--tn-mat);
  color: var(--tn-ink);
}
.tn-btn.is-light:hover {
  background: var(--tn-coral);
}
.tn-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: 0.22em;
}
.tn-btn.is-block {
  width: 100%;
}
.is-night .tn-btn.is-tonal,
.is-umber .tn-btn.is-tonal,
.tn-photo-band .tn-btn.is-tonal {
  background: rgba(238, 235, 230, 0.1);
  color: #EEEBE6;
}
.is-night .tn-btn.is-tonal i,
.is-umber .tn-btn.is-tonal i,
.tn-photo-band .tn-btn.is-tonal i {
  color: var(--tn-coral);
}
.is-night .tn-btn.is-tonal:hover,
.is-umber .tn-btn.is-tonal:hover,
.tn-photo-band .tn-btn.is-tonal:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.is-night .tn-btn.is-tonal:hover i,
.is-umber .tn-btn.is-tonal:hover i,
.tn-photo-band .tn-btn.is-tonal:hover i {
  color: var(--tn-ink);
}
.tn-on-mat .tn-btn.is-tonal {
  background: rgba(17, 17, 17, 0.07);
  color: var(--tn-ink);
}
/* "view more": the base's tracked label held between two coral corners that close round it on hover */
.tn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.tn-more::before,
.tn-more::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 9px;
  border: 0 solid var(--tn-coral);
  transition: width 0.5s var(--tn-ease), height 0.5s var(--tn-ease);
}
.tn-more::before {
  left: 0;
  top: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.tn-more::after {
  right: 0;
  bottom: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.tn-more i {
  color: var(--tn-accent-text);
  font-size: 10px;
  transition: transform 0.35s var(--tn-ease);
}
.tn-more:hover {
  color: var(--tn-heading);
}
.tn-more:hover::before,
.tn-more:hover::after {
  width: 100%;
  height: 100%;
}
.tn-more:hover i {
  transform: translateX(4px);
}
.tn-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tn-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.tn-link i {
  color: var(--tn-accent-text);
  transition: transform 0.35s var(--tn-ease);
}
.tn-link:hover i {
  transform: translateX(5px);
}
.tn-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

/*----- 1.5 Forms -----*/
.tn-field {
  position: relative;
  margin-bottom: 20px;
}
.tn-field label,
.tn-label {
  display: block;
  margin-bottom: 8px;
  color: var(--tn-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
/* tonal fields: a quiet face, no outline; the focus draws a coral line under them */
.tn-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 50px 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: var(--tn-field);
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.tn-bg-cream .tn-input {
  background: var(--tn-surface);
}
textarea.tn-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.tn-input::placeholder {
  color: var(--tn-muted);
}
.tn-input:focus {
  border-bottom-color: var(--tn-coral);
  box-shadow: 0 6px 18px rgba(var(--tn-coral-rgb), 0.12);
  outline: 0;
}
.tn-input.is-invalid {
  border-bottom-color: var(--tn-red);
  box-shadow: inset 0 -1px 0 var(--tn-red);
}
.tn-input[type="date"] {
  color-scheme: dark;
}
[data-theme="light"] .tn-input[type="date"],
.tn-on-mat .tn-input[type="date"] {
  color-scheme: light;
}
.tn-field > i {
  position: absolute;
  right: 20px;
  top: 50px;
  color: var(--tn-coral);
  font-size: 14px;
  pointer-events: none;
}
.tn-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--tn-muted);
}
.form-status.is-ok {
  color: var(--tn-leaf-text);
}
.form-status.is-error {
  color: var(--tn-red-text);
}
.tn-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.tn-check input {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 4px;
  accent-color: var(--tn-coral);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tn-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tn-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--tn-ease);
}
.tn-social a:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
  transform: translateY(-3px);
}
.is-night .tn-social a {
  background: rgba(238, 235, 230, 0.08);
  color: #EEEBE6;
}
/* a round portrait beside a name */
.tn-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.tn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 22px;
  transition: transform 0.4s var(--tn-ease), background-color 0.4s ease, color 0.4s ease;
}
.tn-play i {
  margin-left: 4px;
}
.tn-play:hover {
  background: var(--tn-coral);
  border-color: var(--tn-coral);
  color: var(--tn-ink);
  transform: scale(1.06);
}
/* progress line (an edition sold through, proofs picked): filled by the engines */
.tn-meter {
  position: relative;
  height: 2px;
  background: var(--tn-line);
}
.tn-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--tn-coral);
  transition: width 1.2s var(--tn-ease);
}
.tn-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--tn-coral);
  font-size: 12px;
}
/* a small tracked-caps tag (Last Numbers, Sold Out, On Now) */
.tn-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tn-accent-text);
  font-family: var(--tn-ff-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.tn-tag.is-red {
  color: var(--tn-red-text);
}
.tn-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--tn-mat);
  color: var(--tn-ink);
  font-size: 15px;
  box-shadow: var(--tn-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--tn-ease);
}
.tn-toast i {
  color: var(--tn-coral-deep);
}
.tn-toast.is-shown {
  transform: translate(-50%, 0);
}
.tn-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: var(--tn-coral);
  color: var(--tn-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--tn-ease), background-color 0.3s ease;
}
.tn-has-bar .tn-back-top {
  bottom: 120px;
}
.tn-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.tn-back-top:hover {
  background: var(--tn-mat);
  color: var(--tn-ink);
}
/* WebGL layers sit under a section's content */
.tn-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.tn-gl.is-on {
  opacity: 1;
}
/* line icons in two inks: light lines on the dark default, ink lines in the light theme and on a mat */
.tn-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
}
.tn-ico img {
  width: 100%;
  height: 100%;
}
.tn-ico .ico-day,
[data-theme="light"] .tn-ico .ico-night,
.tn-on-mat .tn-ico .ico-night {
  display: none;
}
[data-theme="light"] .tn-ico .ico-day,
.tn-on-mat .tn-ico .ico-day {
  display: block;
}
[data-theme="light"] .is-night .tn-ico .ico-day,
[data-theme="light"] .is-umber .tn-ico .ico-day,
[data-theme="light"] .tn-photo-band .tn-ico .ico-day {
  display: none;
}
[data-theme="light"] .is-night .tn-ico .ico-night,
[data-theme="light"] .is-umber .tn-ico .ico-night,
[data-theme="light"] .tn-photo-band .tn-ico .ico-night {
  display: block;
}
/* Side Light: a photograph emerges from black as light rises from its left side - the shade is a long gradient
   (clear, a soft edge, black) laid over the photograph and slid off to the right */
.tn-lit {
  position: relative;
  overflow: hidden;
}
.tn-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 260%;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.7) 50%, #0A0A0A 60%, #0A0A0A 100%);
  pointer-events: none;
  will-change: transform;
}
/* mat bevel (hover accent): a white museum mat draws in round the photograph, its 45-degree bevel catching the light */
.tn-mat {
  position: relative;
  display: block;
  overflow: hidden;
}
.tn-mat img {
  display: block;
  width: 100%;
  transition: transform 0.9s var(--tn-ease);
}
.tn-mat::before,
.tn-mat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.tn-mat::before {
  box-shadow: inset 0 0 0 0 var(--tn-mat);
  transition: box-shadow 0.7s var(--tn-ease);
}
.tn-mat::after {
  inset: 18px;
  border: 2px solid transparent;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #CFC8B8;
  border-bottom-color: #CFC8B8;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 0.7s 0.18s var(--tn-ease);
}
.tn-mat:hover::before,
a:hover > .tn-mat::before,
a:focus-visible > .tn-mat::before {
  box-shadow: inset 0 0 0 18px var(--tn-mat);
}
.tn-mat:hover::after,
a:hover > .tn-mat::after,
a:focus-visible > .tn-mat::after {
  clip-path: inset(0 0 0 0);
}
.tn-mat:hover img,
a:hover > .tn-mat img {
  transform: scale(1.04);
}

/*======================
2. Preloader
========================*/
/* Window Light: on black, a still life waits unseen on its table; a slit of side light - a gap in a shutter - sweeps
   across it from the left, lighting the jug and the pears as it passes, comes back and rests on the mark hanging above
   them, then the shutter opens and the panel lifts. The scene is drawn twice: a dark copy, and a lit copy clipped to the
   slit. */
.tn-preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0B0B0B;
}
.pre-stage {
  position: relative;
  width: min(1040px, 92vw);
  aspect-ratio: 1040 / 600;
}
.pre-scene {
  position: absolute;
  inset: 0;
}
.pre-scene img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}
.pre-scene .ps-table {
  left: -6%;
  bottom: 0;
  width: 112%;
}
.pre-scene .ps-cloth {
  left: 44%;
  bottom: 4.5%;
  width: 34%;
}
.pre-scene .ps-jug {
  left: 20%;
  bottom: 15.5%;
  width: 17%;
}
.pre-scene .ps-pear-1 {
  left: 39%;
  bottom: 15%;
  width: 7.6%;
}
.pre-scene .ps-pear-2 {
  left: 47%;
  bottom: 15.5%;
  width: 7.4%;
  transform: rotate(8deg);
}
.pre-scene .ps-mark {
  left: 50%;
  top: 6%;
  width: 30%;
  transform: translateX(-50%);
}
/* the dark copy: everything barely there */
.pre-scene.is-dark {
  filter: brightness(0.12) saturate(0.6);
}
/* the lit copy, clipped to the slit by the script */
.pre-scene.is-lit {
  clip-path: inset(0 100% 0 0);
  filter: brightness(1.08) contrast(1.05);
}
/* the beam: warm light falling through the gap, a little slanted */
.pre-beam {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 14%;
  background: linear-gradient(90deg, rgba(255, 232, 196, 0) 0%, rgba(255, 232, 196, 0.16) 30%, rgba(255, 240, 214, 0.26) 50%, rgba(255, 232, 196, 0.16) 70%, rgba(255, 232, 196, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: skewX(-9deg);
  pointer-events: none;
}
.pre-caption {
  position: absolute;
  left: 50%;
  bottom: 7%;
  color: rgba(238, 235, 230, 0.6);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
}

/*======================
3. Header
========================*/
/* Northlite's header, in three moods from the base: style one lies over the hero inside the frame, its menu mark in a
   corner notch (Home 1); style two is the base's charcoal bar (Home 2 and the inner pages; white in the light theme);
   style three is the base's left side menu, a column beside the page (Home 3). */
.tn-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--tn-raised);
  --hd-ink: #EEEBE6;
  --hd-hover: var(--tn-coral);
  --hd-icon: rgba(238, 235, 230, 0.08);
  --hd-line: rgba(238, 235, 230, 0.1);
}
[data-theme="light"] .header-style-two {
  --hd-bar: #FFFFFF;
  --hd-ink: var(--tn-ink);
  --hd-hover: #B4442B;
  --hd-icon: var(--tn-cream);
  --hd-line: var(--tn-line);
}
.tn-header .wide {
  display: flex;
  align-items: center;
  padding: 0 44px;
}
.tn-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.tn-logo img {
  height: 34px;
  width: auto;
}
.tn-logo .logo-main,
[data-theme="light"] .tn-logo .logo-light {
  display: none;
}
[data-theme="light"] .tn-logo .logo-main {
  display: block;
}
/* over a photograph the logo is always the light one */
.header-style-one .tn-logo .logo-main,
[data-theme="light"] .header-style-one .tn-logo .logo-main {
  display: none;
}
.header-style-one .tn-logo .logo-light,
[data-theme="light"] .header-style-one .tn-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 42px;
  background: var(--tn-charcoal);
  color: rgba(238, 235, 230, 0.78);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  overflow: visible;
  border-bottom: 1px solid rgba(238, 235, 230, 0.07);
  transition: height 0.4s var(--tn-ease), opacity 0.3s ease;
}
[data-theme="light"] .header-top {
  background: var(--tn-cream);
  color: var(--tn-text);
  border-bottom-color: var(--tn-line);
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-top a:hover {
  color: var(--tn-coral);
}
[data-theme="light"] .header-top a:hover {
  color: var(--tn-accent-text);
}
.header-top .top-sun i {
  margin-right: 8px;
  color: var(--tn-coral);
}
.tn-open {
  display: inline-flex;
  align-items: center;
}
.tn-open::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.tn-open.is-open::before {
  opacity: 1;
  background: var(--tn-coral);
  box-shadow: 0 0 0 4px rgba(var(--tn-coral-rgb), 0.18);
}
.header-top .top-right > a {
  position: relative;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--tn-coral);
}

/*----- 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;
}
.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(--tn-coral);
  color: var(--tn-ink);
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.tn-theme-toggle .ti-moon,
[data-theme="light"] .tn-theme-toggle .ti-sun {
  display: none;
}
[data-theme="light"] .tn-theme-toggle .ti-moon {
  display: inline-block;
}
.header-actions .header-btn {
  display: none;
  margin-left: 8px;
}
/* the language picker beside the round header icons takes their face */
.header-actions .tn-lang.is-icon .lang-btn {
  height: 42px;
  padding: 0 14px;
  border-radius: 21px;
  background: var(--hd-icon);
  color: var(--hd-ink);
}
.header-actions .tn-lang.is-icon .lang-btn:hover,
.header-actions .tn-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
/* the base's menu mark: three hairlines of falling length */
.tn-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 46px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tn-menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--hd-ink);
  transition: width 0.3s var(--tn-ease), background-color 0.3s ease;
}
.tn-menu-toggle span:nth-child(2) {
  width: 20px;
}
.tn-menu-toggle span:nth-child(3) {
  width: 14px;
}
.tn-menu-toggle:hover span {
  width: 26px;
  background: var(--tn-coral);
}

/*----- 3.3 Main Menu -----*/
.tn-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tn-nav li {
  position: relative;
}
.tn-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 36px 0;
  color: var(--hd-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.tn-nav > ul > li > a i {
  font-size: 7px;
  opacity: 0.6;
  transition: transform 0.3s var(--tn-ease);
}
.tn-nav > ul > li:hover > a,
.tn-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.tn-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.tn-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 18px 0;
  list-style: none;
  background: var(--tn-surface);
  box-shadow: var(--tn-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--tn-ease), transform 0.35s var(--tn-ease), visibility 0.3s;
}
.tn-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 1px;
  background: var(--tn-coral);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.tn-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.tn-nav li:hover > .sub-menu,
.tn-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tn-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 28px;
  color: var(--tn-heading);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.3s var(--tn-ease), padding 0.35s var(--tn-ease);
}
.tn-nav .sub-menu a i {
  font-size: 8px;
  color: var(--tn-muted);
}
.tn-nav .sub-menu li:hover > a,
.tn-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--tn-accent-text);
}
.tn-nav .sub-menu .sub-menu {
  top: -18px;
  left: 100%;
}
.tn-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}
/* the third level opens left where a right one would leave the window: under the last three menus */
.tn-nav > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.tn-nav > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu::before {
  left: auto;
  right: -12px;
}

/*----- 3.4 Home Mega Menu -----*/
.tn-nav .has-mega {
  position: static;
}
.tn-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(960px, calc(100vw - 60px));
  padding: 30px;
  background: var(--tn-surface);
  box-shadow: var(--tn-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--tn-ease), transform 0.35s var(--tn-ease), visibility 0.3s;
}
.tn-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.tn-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  height: 1px;
  background: var(--tn-coral);
}
.tn-nav .has-mega:hover > .mega-menu,
.tn-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(--tn-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--tn-cream);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--tn-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--tn-accent-text);
  font-family: var(--tn-ff-figure);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.mega-meta b {
  font-family: var(--tn-ff-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--tn-accent-text);
}

/*----- 3.5 Over The Hero (Style One) -----*/
/* Home 1: the bar lies over the hero photograph inside the frame; the menu mark sits in the base's corner notch */
.header-style-one {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: transparent;
  --hd-ink: #EEEBE6;
  --hd-icon: rgba(238, 235, 230, 0.12);
  --hd-line: transparent;
}
.header-style-one .header-main {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 100%);
}
.header-style-one .corner-notch {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 92px;
  height: 92px;
  margin-right: -44px;
  padding: 18px 18px 0 0;
}
.header-style-one .corner-notch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tn-frame);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: background-color 0.4s ease;
}
.header-style-one .corner-notch .tn-menu-toggle {
  position: relative;
  display: inline-flex;
}
.header-style-one .corner-notch .tn-menu-toggle span {
  background: var(--tn-heading);
}
.header-style-one.is-sticky {
  --hd-bar: var(--tn-raised);
}
[data-theme="light"] .header-style-one.is-sticky {
  --hd-bar: #FFFFFF;
  --hd-ink: var(--tn-ink);
  --hd-icon: var(--tn-cream);
}
[data-theme="light"] .header-style-one.is-sticky .tn-logo .logo-light {
  display: none;
}
[data-theme="light"] .header-style-one.is-sticky .tn-logo .logo-main {
  display: block;
}
.header-style-one.is-sticky .header-main {
  background: var(--hd-bar);
}

/*----- 3.6 Side Header (Style Three) -----*/
/* Home 3: the base's left side menu - the logo, the menu down the column (its sub-menus fly out to the right), the
   status, the social row and the copyright - beside a page that starts after it */
.header-style-three {
  --hd-bar: var(--tn-raised);
}
[data-theme="light"] .header-style-three {
  --hd-bar: #FFFFFF;
  --hd-ink: var(--tn-ink);
  --hd-hover: #B4442B;
  --hd-icon: var(--tn-cream);
  --hd-line: var(--tn-line);
}
.side-col {
  display: none;
}

/*----- 3.7 Sticky Header -----*/
.tn-header.is-sticky:not(.header-style-three) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: tn-header-in 0.6s var(--tn-ease) both;
}
.tn-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.tn-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
.tn-header.is-sticky .header-main .wide {
  height: 76px;
}
.tn-header.is-sticky .tn-nav > ul > li > a {
  padding: 28px 0;
}
.tn-header.is-sticky .corner-notch {
  display: none;
}
.header-style-one .tn-menu-toggle.in-bar {
  display: none;
}
.header-style-one.is-sticky .tn-menu-toggle.in-bar {
  display: inline-flex;
}
.tn-header-spacer {
  display: none;
}
.tn-header-spacer.is-on {
  display: block;
}
@keyframes tn-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.tn-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--tn-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--tn-ease), box-shadow 0.6s var(--tn-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.tn-offcanvas.open {
  box-shadow: var(--tn-shadow-lg);
  transform: none;
}
.tn-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8, 11, 15, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tn-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(--tn-line);
}
.offcanvas-head .tn-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(--tn-cream);
  color: var(--tn-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--tn-ease);
}
.offcanvas-close:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--tn-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--tn-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--tn-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: 2px solid var(--tn-line);
  color: var(--tn-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--tn-coral);
  color: var(--tn-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--tn-ff-display);
  font-size: 30px;
  line-height: 1.2;
  color: var(--tn-coral);
}
.oc-phone {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 500;
}
.oc-mail {
  color: var(--tn-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
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. */
.tn-select {
  position: relative;
}
.tn-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;
}
.tn-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(--tn-line-2);
  background: var(--tn-surface);
  font-size: 15px;
  text-align: left;
  color: var(--tn-heading);
  transition: border-color 0.3s var(--tn-ease);
}
.tn-select.is-open .select-button,
.tn-select .select-button:hover {
  border-color: var(--tn-coral);
}
.tn-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tn-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--tn-accent-text);
  transition: transform 0.35s var(--tn-ease);
}
.tn-select.is-open .select-button i {
  transform: rotate(180deg);
}
.tn-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(--tn-surface);
  border-top: 2px solid var(--tn-coral);
  box-shadow: var(--tn-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--tn-ease), transform 0.3s var(--tn-ease), visibility 0.3s;
}
.tn-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--tn-coral);
  transform: translateY(-10px);
}
.tn-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tn-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--tn-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--tn-ease), color 0.2s var(--tn-ease);
}
.tn-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tn-accent-text);
}
.tn-select .select-option .option-meta.is-none {
  color: var(--tn-muted);
}
.tn-select .select-option.is-focused,
.tn-select .select-option:hover {
  background-color: var(--tn-cream);
}
.tn-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.tn-select .select-option.is-selected {
  color: var(--tn-accent-text);
}
.tn-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--tn-accent-text);
}
.tn-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--tn-cream);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* 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. */
.tn-lang {
  position: relative;
  flex-shrink: 0;
}
.tn-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--tn-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tn-lang .lang-btn:hover,
.tn-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--tn-slate);
}
/* the light theme's pale top bar: an ink code on a white face */
[data-theme="light"] .header-top .tn-lang .lang-btn {
  background: #FFFFFF;
  color: var(--tn-heading);
}
[data-theme="light"] .header-top .tn-lang .lang-btn:hover,
[data-theme="light"] .header-top .tn-lang .lang-btn[aria-expanded="true"] {
  background: var(--tn-slate);
  color: #FFFFFF;
}
.tn-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.tn-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.tn-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.tn-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--tn-cream);
  color: var(--tn-heading);
}
.tn-lang.is-icon .lang-btn:hover,
.tn-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--tn-slate);
  color: #FFFFFF;
}
.tn-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--tn-surface);
  box-shadow: var(--tn-shadow-lg);
  font-family: var(--tn-ff-body);
  text-align: start;
  white-space: normal;
}
.tn-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.tn-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.tn-lang .lang-menu[hidden] {
  display: none;
}
.tn-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-muted);
}
.tn-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tn-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--tn-line);
}
.tn-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.tn-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tn-muted);
}
.tn-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--tn-accent-text);
  opacity: 0;
}
.tn-lang .lang-item:hover,
.tn-lang .lang-item[aria-pressed="true"] {
  background: var(--tn-cream);
}
.tn-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.tn-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.tn-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--tn-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tn-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Accordion -----*/
.tn-accordion .acc-item {
  border-bottom: 1px solid var(--tn-line);
}
.tn-accordion .acc-item:first-child {
  border-top: 1px solid var(--tn-line);
}
.tn-accordion .acc-title {
  margin: 0;
  font-size: inherit;
  text-transform: none;
}
.tn-accordion .acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.tn-accordion .acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--tn-ease), background-color 0.3s ease, color 0.3s ease;
}
.tn-bg-cream .tn-accordion .acc-head i,
.tn-bg-cream-2 .tn-accordion .acc-head i {
  background: var(--tn-surface);
}
.tn-accordion .acc-item.is-open .acc-head {
  color: var(--tn-accent-text);
}
.tn-accordion .acc-item.is-open .acc-head i {
  transform: rotate(45deg);
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.tn-accordion .acc-body {
  padding: 0 50px 24px 0;
}
.tn-accordion .acc-item.is-unmatched {
  display: none;
}

/*----- 7.2 Tabs & Arrows -----*/
.tn-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.tn-filter-tabs button {
  height: 44px;
  padding: 0 22px;
  background: var(--tn-cream);
  color: var(--tn-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tn-bg-cream .tn-filter-tabs button,
.tn-bg-cream-2 .tn-filter-tabs button {
  background: var(--tn-surface);
}
.tn-filter-tabs button:hover {
  color: var(--tn-accent-text);
}
.tn-filter-tabs button.is-active {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.tn-filter-tabs.is-sm {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 22px;
}
.tn-filter-tabs.is-sm button {
  height: 38px;
  padding: 0 16px;
  font-size: 11px;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-accent-text);
  font-size: 18px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--tn-ease);
}
.slider-arrow:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.is-night .slider-arrow {
  background: rgba(238, 235, 230, 0.08);
  color: var(--tn-coral-soft);
}
.is-night .slider-arrow:hover {
  background: #EEEBE6;
  color: var(--tn-slate);
}

/*----- 7.3 Faces & Badges -----*/
.tn-avatars {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.tn-avatars .faces {
  display: flex;
}
.tn-avatars .faces img,
.tn-avatars .faces .more {
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border: 3px solid var(--tn-bg);
  border-radius: 50%;
  object-fit: cover;
}
.tn-avatars .faces img:first-child {
  margin-left: 0;
}
.tn-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 12px;
  font-weight: 700;
}
.tn-avatars .txt {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.35;
  color: var(--tn-muted);
}
.tn-avatars .txt b {
  color: var(--tn-heading);
  font-size: 15px;
  font-weight: 700;
}
.is-night .tn-avatars .faces img,
.is-night .tn-avatars .faces .more {
  border-color: var(--tn-night);
}
.tn-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--tn-surface);
  color: var(--tn-heading);
  box-shadow: var(--tn-shadow);
}
.tn-review > i {
  font-size: 22px;
  color: var(--tn-accent-text);
}
.tn-review .rv-score {
  font-family: var(--tn-ff-display);
  font-size: 34px;
  line-height: 1;
}
.tn-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tn-review small {
  color: var(--tn-muted);
  font-size: 13px;
}
.is-night .tn-review {
  background: rgba(238, 235, 230, 0.07);
  box-shadow: none;
}

/*----- 7.4 Newsletter -----*/
/* the base's underline field with a paper plane */
.tn-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 440px;
}
.tn-newsletter input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 52px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--tn-line-2);
  border-radius: 0;
  background: var(--tn-field);
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 16px;
}
.tn-bg-cream .tn-newsletter input,
.tn-bg-cream-2 .tn-newsletter input {
  background: var(--tn-surface);
}
.tn-newsletter input:focus {
  border-bottom-color: var(--tn-coral);
  outline: 0;
}
.tn-newsletter button {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 54px;
  color: var(--tn-accent-text);
  font-size: 17px;
  transition: color 0.3s ease, transform 0.3s var(--tn-ease);
}
.tn-newsletter button:hover {
  color: var(--tn-heading);
  transform: translateX(3px);
}
.tn-newsletter .form-status {
  flex-basis: 100%;
}

/*----- 7.5 Voices -----*/
.voices-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}
.voices-slider {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
}
.voice {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.voice blockquote {
  margin: 0;
}
/* the base wrote its testimonials in a script; the serif's italic does it here */
.voice-q {
  margin: 0;
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: clamp(22px, 2vw, 31px);
  font-style: italic;
  line-height: 1.55;
}
.voice figcaption {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  text-align: left;
}
.voice-face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.voice figcaption span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.voice figcaption b {
  color: var(--tn-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.voice figcaption small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.voices-foot {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/*----- 7.6 Hours & Info -----*/
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--tn-line);
  font-size: 15px;
}
.hours-list li span {
  color: var(--tn-muted);
  font-family: var(--tn-ff-figure);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}
.hours-list li b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-figure);
  font-weight: 400;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--tn-accent-text);
}
.info-card {
  height: 100%;
  padding: 40px 34px;
  background: var(--tn-cream);
  text-align: center;
  transition: transform 0.45s var(--tn-ease), box-shadow 0.45s var(--tn-ease);
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tn-shadow-lg);
}
.info-card .tn-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}
.info-card h2,
.info-card h3 {
  margin-bottom: 12px;
}
.info-card p {
  margin-bottom: 14px;
}
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tn-heading);
  font-size: 14px;
  font-weight: 700;
}
.open-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tn-muted);
}
.open-status.is-open::before {
  background: var(--tn-coral);
  box-shadow: 0 0 0 4px rgba(242, 108, 79, 0.18);
}

/*======================
8. Cards
========================*/
/*----- 8.1 Facts Strip -----*/
/* one bar of label / value cells with hairline dividers (never floating cards) */
.facts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 10px;
  background: var(--tn-surface);
}
.facts-strip .fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 20px;
  text-align: center;
}
.facts-strip .fact + .fact {
  border-left: 1px solid var(--tn-line);
}
.facts-strip small,
.split-facts small,
.ex-rows small,
.st-facts small,
.sr-facts small,
.pp-facts small,
.ex-facts small {
  color: var(--tn-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.facts-strip b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.facts-strip.is-5 {
  grid-template-columns: repeat(5, 1fr);
}

/*----- 8.2 Work Cards -----*/
/* a work: the photograph (Side Light on arrival, the mat bevel on hover), its title, series, year and edition line */
.work-card .wk-img {
  display: block;
  background: #0A0A0A;
}
.work-card .wk-img img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.work-card .wk-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0 0;
}
.work-card h3 a:hover {
  color: var(--tn-accent-text);
}
.wk-meta {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.wk-ed {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wk-ed b {
  color: var(--tn-accent-text);
  font-family: var(--tn-ff-figure);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}
.wk-ed span {
  color: var(--tn-muted);
}
.wk-ed.is-private {
  color: var(--tn-muted);
}

/*----- 8.3 Print Cards -----*/
.print-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tn-surface);
  transition: box-shadow 0.45s var(--tn-ease), transform 0.45s var(--tn-ease);
}
.print-card:hover {
  box-shadow: var(--tn-shadow-lg);
  transform: translateY(-6px);
}
.print-card .pc-img {
  display: block;
  background: #0A0A0A;
}
.print-card .pc-img img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pc-tag {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  padding: 7px 12px;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.pc-tag.is-new {
  background: var(--tn-mat);
}
.pc-tag.is-out {
  background: #141414;
  color: #EEEBE6;
}
.pc-wish {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  color: #EEEBE6;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-wish:hover,
.pc-wish.is-on {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.pc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}
.pc-series {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.pc-body h3 {
  margin: 4px 0 14px;
}
.pc-sizes li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--tn-line);
  font-size: 13.5px;
}
.pc-sizes li span {
  color: var(--tn-muted);
  font-family: var(--tn-ff-figure);
}
.pc-sizes li b {
  color: var(--tn-heading);
  font-weight: 600;
}
.pc-sizes li.is-sold-out b {
  color: var(--tn-muted);
  text-decoration: line-through;
  text-decoration-color: var(--tn-coral);
}
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}
.pc-price {
  color: var(--tn-accent-text);
  font-family: var(--tn-ff-figure);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.print-card.is-sold-out .pc-img img {
  filter: grayscale(0.4) brightness(0.7);
}

/*----- 8.4 Series & Exhibition Cards -----*/
.series-card .sr-img,
.ex-card .ex-img {
  position: relative;
  display: block;
  background: #0A0A0A;
}
.series-card .sr-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ex-card .ex-img img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.sr-body,
.ex-body {
  padding-top: 22px;
}
.sr-year {
  display: block;
  margin-bottom: 6px;
  color: var(--tn-accent-text);
  font-size: 15px;
}
.sr-body p {
  margin: 10px 0 18px;
}
.sr-facts,
.split-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
}
.sr-facts span,
.split-facts span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sr-facts b,
.split-facts b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.ex-status {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  padding: 7px 12px;
  background: #141414;
  color: #EEEBE6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.ex-card.is-now .ex-status {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.ex-card.is-next .ex-status {
  background: var(--tn-mat);
  color: var(--tn-ink);
}
.ex-card.is-past .ex-img img {
  filter: grayscale(0.5);
}
.ex-venue {
  display: block;
  margin-top: 6px;
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 16px;
  font-style: italic;
}
.ex-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 18px 0 12px;
}
.ex-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ex-facts b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-figure);
  font-weight: 400;
}
.ex-when {
  color: var(--tn-accent-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/*----- 8.5 Sitting & Paper Cards -----*/
.sitting-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tn-surface);
  transition: box-shadow 0.45s var(--tn-ease), transform 0.45s var(--tn-ease);
}
.sitting-card:hover {
  box-shadow: var(--tn-shadow-lg);
  transform: translateY(-6px);
}
.sitting-card .st-img {
  display: block;
  background: #0A0A0A;
}
.sitting-card .st-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.st-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 26px 28px;
  border-top: 1px solid var(--tn-coral);
}
.st-body p {
  margin: 10px 0 16px;
  font-size: 15.5px;
}
.st-price {
  color: var(--tn-accent-text);
  font-size: 30px;
  letter-spacing: 0.08em;
}
.st-facts {
  margin: 14px 0 22px;
}
.st-facts li,
.pp-facts li,
.ex-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--tn-line);
}
.st-facts b,
.pp-facts b,
.ex-rows b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-figure);
  font-weight: 400;
  text-align: right;
}
.sitting-card .tn-more {
  align-self: flex-start;
  margin-top: auto;
}
.paper-card {
  height: 100%;
  padding: 36px 32px;
  background: var(--tn-surface);
}
.pp-swatch {
  display: block;
  width: 64px;
  height: 80px;
  margin-bottom: 22px;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.24);
}
.pp-swatch.is-rag {
  background: linear-gradient(135deg, #F3EFE6 0%, #E4DED1 100%);
}
.pp-swatch.is-baryta {
  background: linear-gradient(135deg, #FFFFFF 0%, #E9E9E6 46%, #FFFFFF 54%, #DCDCD8 100%);
}
.pp-swatch.is-kozo {
  background: linear-gradient(135deg, #EFE3C8 0%, #E2D2AE 60%, #EADCBF 100%);
}
.paper-card p {
  margin: 10px 0 16px;
}

/*----- 8.6 Team & Post Cards -----*/
.team-card .tm-img,
.post-card .pcd-img {
  display: block;
  background: #0A0A0A;
}
.team-card .tm-img img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}
.tm-body {
  padding-top: 18px;
}
.tm-role {
  display: block;
  margin-top: 4px;
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.post-card .pcd-img img {
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.pcd-body {
  padding-top: 22px;
}
.pcd-meta {
  display: block;
  margin-bottom: 8px;
  color: var(--tn-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.pcd-body h3 {
  margin-bottom: 14px;
}
.pcd-body h3 a:hover,
.team-card h3 a:hover,
.series-card h3 a:hover,
.ex-card h3 a:hover {
  color: var(--tn-accent-text);
}

/*----- 8.7 Panels & Rows -----*/
.tn-panel {
  padding: 44px;
  background: var(--tn-surface);
}
.tn-bg-cream .tn-panel {
  background: var(--tn-bg);
}
.lv-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tn-line);
}
.lv-rows li small {
  color: var(--tn-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.lv-rows li b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-figure);
  font-weight: 400;
  text-align: right;
}
.wide-pad {
  padding-left: 60px;
  padding-right: 60px;
}

/*======================
9. Scroll Moments
========================*/
/*----- 9.1 The Still Life Composes Itself -----*/
/* Home 1: an olive wall lit from a window on the left, a walnut table; the linen, the jug, the pewter, two pears and a
   knife are set down one by one as the section travels (main.js scrubs each object's fall and its shadow) */
.sl-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1B1F1A;
  box-shadow: var(--tn-shadow-lg);
}
.sl-wall {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 18% 30%, #4E5040 0%, #33372C 42%, #1E221C 78%, #151814 100%);
}
.sl-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 90% 110%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
}
/* the window's light falling across the wall from the left */
.sl-window {
  position: absolute;
  top: -20%;
  left: -16%;
  width: 62%;
  height: 140%;
  background: linear-gradient(100deg, rgba(255, 238, 206, 0.24) 0%, rgba(255, 238, 206, 0.1) 46%, rgba(255, 238, 206, 0) 76%);
  transform: skewX(-14deg);
  opacity: 0.35;
}
.sl-table {
  position: absolute;
  left: -10%;
  bottom: 0;
  width: 120%;
  max-width: none;
}
.sl-obj {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  will-change: transform, opacity;
}
.sl-cloth {
  left: 50%;
  bottom: -20.5%;
  width: 40%;
  transform-origin: 50% 26%;
}
.sl-jug {
  left: 17%;
  bottom: 26%;
  width: 19%;
}
.sl-plate {
  left: 37%;
  bottom: 22.5%;
  width: 26%;
}
.sl-pear-1 {
  left: 44%;
  bottom: 23.6%;
  width: 8.2%;
}
.sl-pear-2 {
  left: 53.5%;
  bottom: 23%;
  width: 8%;
  transform: rotate(9deg);
}
.sl-knife {
  left: 60%;
  bottom: 17%;
  width: 28%;
  transform: rotate(-5deg);
}
/* contact shadows on the table, growing as each object comes down */
.sl-shadow {
  position: absolute;
  display: block;
  height: 3.2%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 72%);
  will-change: opacity, transform;
}
.sl-sh-cloth {
  display: none;
}
.sl-sh-jug {
  left: 15%;
  bottom: 24.4%;
  width: 26%;
}
.sl-sh-plate {
  left: 36%;
  bottom: 21%;
  width: 29%;
}
.sl-sh-pear-1 {
  left: 42.5%;
  bottom: 22.6%;
  width: 13%;
}
.sl-sh-pear-2 {
  left: 52%;
  bottom: 22%;
  width: 13%;
}
.sl-sh-knife {
  left: 59%;
  bottom: 16%;
  width: 30%;
}
.still-steps {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
.still-steps li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tn-line);
  opacity: 0.45;
  transition: opacity 0.5s ease;
}
.still-steps li.is-on {
  opacity: 1;
}
.still-steps .st-no {
  flex-shrink: 0;
  width: 34px;
  color: var(--tn-coral);
  font-size: 17px;
}
.still-steps span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.still-steps b {
  color: var(--tn-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.still-steps small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.still-caption {
  margin: 18px 0 0;
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
  text-align: right;
}
.still-caption b {
  color: var(--tn-heading);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}

/*----- 9.2 The Edition Ledger -----*/
/* a register page on museum board: every number of one edition, the sold ones struck through in coral ink (scrubbed on
   Home 2, at once on the print page), the held ones marked, the next one ringed, the artist's proofs last */
.ledger {
  position: relative;
  padding: 42px 46px 36px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}
.ledger::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  pointer-events: none;
}
.lg-head {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--tn-coral);
}
.lg-mark {
  width: 44px;
  height: auto;
}
.lg-head .tn-eyebrow {
  margin-bottom: 6px;
}
.lg-sub {
  display: block;
  margin-top: 4px;
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.lg-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(14, auto);
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.lg-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.lg-row .no {
  flex-shrink: 0;
  min-width: 62px;
  color: var(--tn-heading);
  font-size: 16px;
}
.lg-row .who {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 14.5px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-row .strike {
  position: absolute;
  left: -4px;
  right: 18%;
  top: 50%;
  height: 2px;
  background: var(--tn-coral-deep);
  border-radius: 2px;
  transform: rotate(-1.2deg) scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.lg-row.is-sold .strike {
  transform: rotate(-1.2deg) scaleX(1);
}
.lg-row.is-sold .no,
.lg-row.is-sold .who {
  color: #8A8E93;
}
.lg-row.is-held .who {
  color: var(--tn-accent-text);
}
.lg-row.is-held .no::after {
  content: "\f017";
  margin-left: 6px;
  color: var(--tn-accent-text);
  font-family: "Font Awesome 6 Free";
  font-size: 10px;
  font-weight: 400;
}
.lg-row.is-next .no {
  position: relative;
  color: var(--tn-accent-text);
}
.lg-row.is-next .no::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -6px;
  top: -6px;
  bottom: -6px;
  border: 1.5px solid var(--tn-coral-deep);
  border-radius: 50%;
  transform: rotate(-4deg);
}
.lg-row.is-next .who {
  color: var(--tn-heading);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lg-row.is-ap .no,
.lg-row.is-ap .who {
  color: #6E7277;
}
.lg-sum {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 26px;
  border-top: 1px solid rgba(17, 17, 17, 0.14);
}
.lg-sum div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 10px 0;
}
.lg-sum div + div {
  border-left: 1px solid rgba(17, 17, 17, 0.1);
}
.lg-sum small {
  color: var(--tn-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lg-sum b {
  color: var(--tn-heading);
  font-size: 21px;
}

/*----- 9.3 Frame & Mat Swap -----*/
/* Home 3 (and the print page): the print on a lit wall; its frame and mat change option by option as the section
   travels, the price of each pairing beside it */
.fs-room {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 50px;
  align-items: center;
}
.fs-wall {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 640px;
  padding: 60px 40px;
  background: radial-gradient(ellipse 70% 70% at 30% 30%, #45473A 0%, #2E3128 52%, #1B1E19 100%);
  overflow: hidden;
}
.fs-wall::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -12%;
  width: 60%;
  height: 120%;
  background: linear-gradient(100deg, rgba(255, 238, 206, 0.16) 0%, rgba(255, 238, 206, 0) 70%);
  transform: skewX(-12deg);
  pointer-events: none;
}
.fs-frame {
  position: relative;
  padding: 0;
  background: transparent;
  box-shadow: 0 26px 46px rgba(0, 0, 0, 0.5);
  transition: padding 0.7s var(--tn-ease), background 0.7s ease, box-shadow 0.7s ease;
}
.fs-frame.is-none {
  padding: 12px;
  background: #F7F4EC;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
}
.fs-frame.is-black {
  padding: 24px;
  background: repeating-linear-gradient(90deg, #1A1A1A 0, #222 3px, #171717 7px, #1D1D1D 11px);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08), inset -2px -2px 0 rgba(0, 0, 0, 0.6), 0 26px 46px rgba(0, 0, 0, 0.5);
}
.fs-frame.is-oak {
  padding: 24px;
  background: repeating-linear-gradient(90deg, #B98A58 0, #C49866 4px, #AD7E4E 9px, #BF925F 14px);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.22), inset -2px -2px 0 rgba(0, 0, 0, 0.35), 0 26px 46px rgba(0, 0, 0, 0.5);
}
.fs-frame.is-walnut {
  padding: 28px;
  background: repeating-linear-gradient(90deg, #4E3220 0, #5C3C27 5px, #45291A 10px, #573A25 15px);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.12), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 26px 46px rgba(0, 0, 0, 0.5);
}
.fs-frame.is-gilt {
  padding: 32px;
  background: linear-gradient(135deg, #7A5A22 0%, #E8C877 18%, #9B7A36 36%, #F3DC9A 52%, #8C6A2E 70%, #D9B865 86%, #6E5020 100%);
  box-shadow: inset 0 0 0 3px rgba(122, 90, 34, 0.9), inset 0 0 0 7px rgba(243, 220, 154, 0.5), inset 3px 3px 10px rgba(0, 0, 0, 0.35), 0 26px 46px rgba(0, 0, 0, 0.55);
}
.fs-mat {
  padding: 0;
  background: transparent;
  transition: padding 0.7s var(--tn-ease), background-color 0.7s ease;
}
.fs-mat.is-white {
  padding: 36px;
  background: #FBFAF6;
}
.fs-mat.is-ivory {
  padding: 56px;
  background: #EFE8D8;
}
.fs-mat img {
  display: block;
  width: min(380px, 52vw);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* the mat's 45-degree bevel: a light edge above and left, a shadowed one below and right */
.fs-mat.is-white img,
.fs-mat.is-ivory img {
  box-shadow: -2px -2px 0 #FFFFFF, 2px 2px 0 rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.fs-label {
  position: relative;
  margin-top: 30px;
  color: rgba(238, 235, 230, 0.7);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
  text-align: center;
}
.fs-label b {
  display: block;
  color: #EEEBE6;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.fs-steps li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tn-line);
  opacity: 0.42;
  transition: opacity 0.5s ease;
}
.fs-steps li.is-on {
  opacity: 1;
}
.fs-no {
  flex-shrink: 0;
  width: 34px;
  color: var(--tn-coral);
  font-size: 17px;
}
.fs-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.4;
}
.fs-name b {
  color: var(--tn-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.fs-name small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.fs-price {
  color: var(--tn-heading);
  font-size: 19px;
  font-weight: 400;
}
.fs-steps li.is-on .fs-price {
  color: var(--tn-accent-text);
}

/*======================
10. Home 01 - The Studio
========================*/
/*----- 10.1 Hero -----*/
/* the base's framed main hero: one photograph, the title centred in tracked capitals over a coral hairline; here a slider
   of three, the arrows and the count at the foot, the work's caption at the right */
.h1-hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 1080px;
  background: #0E0E0E;
  overflow: hidden;
}
.h1-hero .hero-slider,
.h1-hero .swiper-wrapper,
.h1-hero .swiper-slide {
  height: 100%;
}
.h1-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.h1-hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h1-hero .hero-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.25) 60%, rgba(10, 10, 10, 0.5) 100%), linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0) 70%, rgba(10, 10, 10, 0.65) 100%);
}
.h1-hero .container {
  position: relative;
  z-index: 2;
}
.h1-hero .hero-copy {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  --tn-heading: #EEEBE6;
  --tn-text: rgba(238, 235, 230, 0.86);
  --tn-accent-text: #F58A71;
}
.h1-hero h1,
.h1-hero .hero-title {
  color: #EEEBE6;
  font-family: var(--tn-ff-display);
  font-size: clamp(38px, 4.4vw, 76px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-right: -0.3em;
}
.h1-hero h1 em,
.h1-hero .hero-title em {
  letter-spacing: 0.02em;
}
.hero-rule {
  display: block;
  width: min(460px, 70%);
  height: 1px;
  margin: 30px auto 26px;
  background: var(--tn-coral);
}
.h1-hero .tn-lead {
  max-width: 640px;
  margin: 0 auto 34px;
  color: rgba(238, 235, 230, 0.86);
}
.h1-hero .tn-btns {
  justify-content: center;
}
.h1-hero .tn-more {
  color: #EEEBE6;
}
.hero-caption {
  position: absolute;
  right: 60px;
  bottom: 52px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: rgba(238, 235, 230, 0.76);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
  text-align: right;
}
.hero-caption b {
  color: #EEEBE6;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero-nav {
  position: absolute;
  left: 60px;
  bottom: 44px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero-nav .slider-arrow {
  background: rgba(238, 235, 230, 0.12);
  color: #EEEBE6;
}
.hero-nav .slider-arrow:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.hero-count {
  color: rgba(238, 235, 230, 0.7);
  font-size: 16px;
  letter-spacing: 0.12em;
}
.hero-count b {
  color: #EEEBE6;
  font-weight: 400;
}

/*----- 10.2 Intro -----*/
.h1-intro .tn-title {
  margin-bottom: 50px;
}

/*----- 10.3 Four Tall Works -----*/
.tall-card .tl-img {
  display: block;
  background: #0A0A0A;
}
.tall-card .tl-img img {
  aspect-ratio: 9 / 19;
  object-fit: cover;
}
.tl-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}
.tl-cap span {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
  white-space: nowrap;
}
.tl-cap [data-ed-from] {
  color: var(--tn-accent-text);
  font-style: normal;
}

/*----- 10.4 Series Split Rows -----*/
/* the base's Still Life / Portraits rows: a photograph on one half, the title, a short line and the corner link on the
   other, alternating */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split-img {
  display: block;
  background: #0A0A0A;
}
.split-img img {
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.split-copy {
  max-width: 560px;
  padding: 60px 70px;
}
.split-copy p {
  margin: 22px 0 26px;
}
.split-facts {
  margin-bottom: 34px;
}
.split-row.is-flip .split-img {
  order: 2;
}
.split-row.is-flip .split-copy {
  justify-self: end;
}

/*----- 10.5 Still Life Section -----*/
.h1-still .tn-title {
  margin-bottom: 34px;
}

/*----- 10.6 From Sitting To Print -----*/
.process-row {
  position: relative;
}
.process-step {
  position: relative;
  height: 100%;
  padding: 34px 26px 30px;
  background: var(--tn-surface);
  text-align: center;
  transition: transform 0.45s var(--tn-ease), box-shadow 0.45s var(--tn-ease);
}
.process-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--tn-shadow-lg);
}
.process-step .tn-ico {
  margin-bottom: 16px;
}
.ps-no {
  position: absolute;
  right: 18px;
  top: 14px;
  color: var(--tn-accent-text);
  font-size: 15px;
}
.process-step h3 {
  margin-bottom: 8px;
}
.process-step p {
  font-size: 15px;
}

/*----- 10.7 About -----*/
.about-photo {
  display: block;
  background: #0A0A0A;
}
.about-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.h1-about .tn-title {
  margin-bottom: 26px;
}
.about-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--tn-line);
}

/*----- 10.8 Mosaic -----*/
/* the base's masonry block: one large square, three small, one tall pair, edge to edge on thin gutters */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 12px;
}
.mo-item {
  position: relative;
  display: block;
  min-height: 0;
  background: #0A0A0A;
}
.mo-item .tn-mat,
.mo-item img {
  height: 100%;
}
.mo-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.mo-item.is-e {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}
.mo-item.is-h {
  grid-column: 3 / 5;
}
.mo-item.is-h img {
  aspect-ratio: auto;
}

/*----- 10.9 Exhibition Band -----*/
.h1-exhibit .ex-rows {
  max-width: 520px;
  margin: 30px 0 36px;
}
.h1-exhibit h2 {
  margin-top: 4px;
}

/*======================
11. Home 02 - The Editions
========================*/
/*----- 11.1 Hero Carousel -----*/
/* the base's carousel home: under the charcoal bar, one print at a time in the middle, its neighbours showing at both
   edges; the card on each print gives the edition, the next number and its price */
.h2-hero {
  position: relative;
  padding: 24px 0 30px;
  background: var(--tn-cream-2);
  overflow: hidden;
}
.h2-carousel {
  overflow: visible;
}
.h2-hero .swiper-slide {
  transition: opacity 0.6s ease;
}
.h2-hero .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.42;
}
.cs-frame {
  position: relative;
  height: min(78vh, 760px);
  min-height: 520px;
  background: #0A0A0A;
  overflow: hidden;
}
.cs-frame .hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-card {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 2;
  width: min(440px, calc(100% - 80px));
  padding: 32px 34px 34px;
  background: rgba(24, 24, 24, 0.9);
  --tn-heading: #EEEBE6;
  --tn-text: rgba(238, 235, 230, 0.8);
  --tn-muted: rgba(238, 235, 230, 0.66);
  --tn-accent-text: #F58A71;
  --tn-line: rgba(238, 235, 230, 0.14);
  color: var(--tn-text);
}
.cs-card .tn-eyebrow {
  margin-bottom: 14px;
}
.cs-title {
  color: #EEEBE6;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.25;
  letter-spacing: 0.22em;
}
.cs-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px 22px;
  margin: 22px 0 26px;
  padding-top: 18px;
  border-top: 1px solid var(--tn-coral);
}
.cs-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-facts small {
  color: var(--tn-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cs-facts b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-figure);
  font-size: 17px;
  font-weight: 400;
}
.h2-hero .hero-prev,
.h2-hero .hero-next {
  position: absolute;
  top: 50%;
  z-index: 5;
  margin-top: -28px;
  background: rgba(20, 20, 20, 0.7);
  color: #EEEBE6;
}
.h2-hero .hero-prev {
  left: 40px;
}
.h2-hero .hero-next {
  right: 40px;
}
.h2-hero .hero-prev:hover,
.h2-hero .hero-next:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}

/*----- 11.2 The Ladder -----*/
.ladder {
  margin-top: 6px;
}
.ld-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 4px 18px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--tn-line);
}
.ld-no {
  color: var(--tn-accent-text);
  font-size: 18px;
}
.ld-name {
  display: flex;
  flex-direction: column;
}
.ld-name b {
  color: var(--tn-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.ld-name small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.ld-rate {
  color: var(--tn-heading);
  font-size: 19px;
}
.ld-prices {
  grid-column: 2 / 4;
  color: var(--tn-text);
  font-family: var(--tn-ff-figure);
  font-size: 15px;
}
.ladder-note {
  margin-top: 18px;
  color: var(--tn-muted);
  font-size: 14.5px;
}
.sizes-panel {
  height: 100%;
}
.sp-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}
.sp-head p {
  margin: 6px 0 0;
  font-size: 15px;
}
.sp-head.is-cert {
  margin: 34px 0 22px;
  padding-top: 30px;
  border-top: 1px solid var(--tn-line);
}
.size-rows li {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--tn-line);
}
.size-rows li span:first-child {
  display: flex;
  flex-direction: column;
}
.size-rows b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-figure);
  font-size: 18px;
  font-weight: 400;
}
.size-rows small {
  color: var(--tn-muted);
  font-size: 13px;
}
.size-rows .tn-figure {
  color: var(--tn-heading);
}
.size-rows .tn-figure:last-child {
  color: var(--tn-accent-text);
}

/*----- 11.3 Ledger Section -----*/
.ledger-print {
  display: block;
  margin-top: 10px;
  background: #0A0A0A;
}
.ledger-print img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* while the ledger is scrubbed, the next number's ring waits until the last stroke */
.ledger.is-scrubbed .lg-row.is-next .no::before {
  opacity: 0;
  transform: rotate(-4deg) scale(0.6);
  transition: opacity 0.5s ease, transform 0.6s var(--tn-ease);
}
.ledger.is-scrubbed .lg-row.is-next .no.is-ringed::before {
  opacity: 1;
  transform: rotate(-4deg) scale(1);
}

/*----- 11.4 Voices Beside A Title -----*/
.voices-wrap.is-left .voice {
  text-align: left;
  margin: 0;
}
.voices-nav {
  display: flex;
  gap: 12px;
  margin-top: 36px;
}

/*----- 11.5 Care Tiles -----*/
.care-tile {
  height: 100%;
  padding: 34px 30px;
  background: var(--tn-surface);
  transition: transform 0.45s var(--tn-ease), box-shadow 0.45s var(--tn-ease);
}
.care-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--tn-shadow-lg);
}
.care-tile .tn-ico {
  margin-bottom: 18px;
}
.care-tile h3 {
  margin-bottom: 8px;
}
.care-tile p {
  font-size: 15px;
}

/*======================
12. Home 03 - The Gallery
========================*/
/*----- 12.1 Split Hero -----*/
/* the base's split slider: a photograph on the left, a card on the right with the series name in tracked capitals, an
   italic line and the corner link, the slides counted by vertical dots */
.h3-hero {
  position: relative;
  background: var(--tn-cream);
}
.split-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: calc(100vh - 32px);
  max-height: 1060px;
}
.sh-photo {
  position: relative;
  overflow: hidden;
  background: #0A0A0A;
}
.sh-photo .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sh-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 90px;
  background: var(--tn-cream);
  text-align: center;
}
.sh-title {
  font-size: clamp(34px, 3.4vw, 60px);
  line-height: 1.2;
  letter-spacing: 0.34em;
  margin-right: -0.34em;
}
.sh-rule {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 1px;
  margin: 28px auto 20px;
  background: var(--tn-coral);
}
.sh-sub {
  margin-bottom: 30px;
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 18px;
  font-style: italic;
}
.h3-nav {
  position: absolute;
  left: 46%;
  bottom: 40px;
  z-index: 5;
  display: flex;
  gap: 10px;
  transform: translateX(-100%);
}
.h3-nav .slider-arrow {
  background: rgba(20, 20, 20, 0.7);
  color: #EEEBE6;
}
.h3-nav .slider-arrow:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.h3-dots {
  position: absolute;
  right: 36px;
  top: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}
.h3-dots .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 !important;
  background: var(--tn-heading);
  opacity: 0.35;
}
.h3-dots .swiper-pagination-bullet-active {
  background: var(--tn-coral);
  opacity: 1;
}

/*----- 12.2 Gallery Grid -----*/
.sq-tile {
  position: relative;
  display: block;
  background: #0A0A0A;
}
.sq-tile img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.sq-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 40px 28px 26px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.82) 100%);
  color: rgba(238, 235, 230, 0.8);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--tn-ease), transform 0.5s var(--tn-ease);
}
.sq-cap b {
  color: #EEEBE6;
  font-family: var(--tn-ff-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sq-cap small {
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.sq-tile:hover .sq-cap,
.sq-tile:focus-visible .sq-cap {
  opacity: 1;
  transform: none;
}
.h3-grid .tn-title.is-split {
  align-items: flex-end;
}
.h3-grid .tn-filter-tabs {
  margin-bottom: 0;
}

/*----- 12.3 Series Index -----*/
.si-preview {
  display: block;
  background: #0A0A0A;
}
.si-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.series-index {
  border-top: 1px solid var(--tn-line);
}
.si-row a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 56px auto;
  align-items: center;
  gap: 20px;
  padding: 22px 6px;
  border-bottom: 1px solid var(--tn-line);
  transition: background-color 0.4s ease, padding 0.4s var(--tn-ease);
}
.si-row a:hover,
.si-row.is-on a {
  padding-left: 18px;
  background: var(--tn-surface);
}
.si-no {
  color: var(--tn-accent-text);
  font-size: 18px;
}
.si-name {
  display: flex;
  flex-direction: column;
}
.si-name b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.si-name small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.si-year {
  color: var(--tn-heading);
}
.si-count {
  display: none;
  color: var(--tn-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.si-thumbs {
  display: flex;
  gap: 6px;
}
.si-thumbs img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}

/*----- 12.4 Frames Section -----*/
.h3-frames .tn-title {
  margin-bottom: 50px;
}
/* Swiper places horizontal bullets along the foot: these stand in a column at the card's edge */
.h3-hero .h3-dots.swiper-pagination-horizontal {
  left: auto;
  right: 36px;
  top: 50%;
  bottom: auto;
  width: auto;
}

/*======================
13. Inner Pages
========================*/
/*----- 13.1 Sidebar & Widgets -----*/
/* Northlite's sidebar is quiet: a small heading, a coral stroke, plain lists. Northlite sets each widget on linen */
.tn-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.tn-sidebar .widget {
  padding: 34px 32px;
  background: var(--tn-cream);
}
.tn-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.tn-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--tn-coral);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--tn-line);
  background: var(--tn-surface);
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-color: var(--tn-coral);
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--tn-coral);
  color: var(--tn-ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--tn-slate);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--tn-line-2);
  color: var(--tn-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--tn-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--tn-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--tn-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--tn-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--tn-surface);
  color: var(--tn-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--tn-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--tn-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--tn-slate);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tn-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--tn-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--tn-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts h3 a {
  color: var(--tn-heading);
}
.side-posts h3 a:hover {
  color: var(--tn-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--tn-text);
}
.widget-tags a:hover {
  color: var(--tn-accent-text);
}
.tn-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--tn-night);
  text-align: center;
}
.widget-cta .tn-script {
  display: block;
  color: var(--tn-coral-soft);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tn-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .tn-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--tn-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--tn-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--tn-accent-text);
}

/*----- 13.2 Rows, Choices & Pages -----*/
.tn-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--tn-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 30px;
  font-weight: 400;
}
.tn-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--tn-line);
}
.tn-kv li:first-child {
  border-top: 1px solid var(--tn-line);
}
.tn-kv li b {
  color: var(--tn-heading);
  font-weight: 500;
  text-align: end;
}
.tn-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--tn-cream);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tn-bg-cream .choice-card,
.tn-bg-cream-2 .choice-card {
  background: var(--tn-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--tn-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--tn-coral-rgb), 0.18);
}
.choice-card.is-checked {
  background: var(--tn-cream-2);
  box-shadow: inset 3px 0 0 var(--tn-coral);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--tn-heading);
  font-size: 17px;
  font-weight: 500;
}
.choice-body span {
  color: var(--tn-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--tn-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--tn-coral);
  box-shadow: none;
  color: var(--tn-slate);
}
.tn-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.tn-pagination a,
.tn-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tn-pagination a i {
  color: var(--tn-accent-text);
  font-size: 13px;
}
.tn-pagination .is-current,
.tn-pagination a:hover,
.tn-pagination a:hover i {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.tn-zoom {
  display: block;
  overflow: hidden;
}
.tn-zoom img {
  width: 100%;
  transition: transform 0.9s var(--tn-ease);
}
.tn-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--tn-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.tn-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 2px;
  background: var(--tn-line-2);
  accent-color: var(--tn-coral-deep);
  appearance: none;
  -webkit-appearance: none;
}
.tn-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--tn-surface);
  border-radius: 50%;
  background: var(--tn-coral);
  box-shadow: 0 2px 8px rgba(8, 11, 15, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.tn-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--tn-surface);
  border-radius: 50%;
  background: var(--tn-coral);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--tn-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--tn-cream);
  color: var(--tn-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tn-panel .chip-choice > span {
  background: var(--tn-cream);
}
.chip-choice:hover > span {
  background: var(--tn-cream-2);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--tn-coral-rgb), 0.25);
}
.chip-choice.is-checked > span {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.chip-choice > span small {
  color: var(--tn-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*----- 13.3 Quantity Stepper -----*/
.tn-qty {
  display: inline-flex;
  align-items: center;
  background: var(--tn-cream);
}
.tn-bg-cream .tn-qty {
  background: var(--tn-surface);
}
.tn-qty button {
  width: 46px;
  height: 54px;
  color: var(--tn-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tn-qty button:hover {
  background: var(--tn-cream-2);
  color: var(--tn-accent-text);
}
.tn-qty input {
  width: 52px;
  height: 54px;
  border: 0;
  border-inline: 1px solid var(--tn-line);
  background: transparent;
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: 0;
  -moz-appearance: textfield;
}
.tn-qty input::-webkit-outer-spin-button,
.tn-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.tn-qty.is-sm button {
  width: 36px;
  height: 42px;
}
.tn-qty.is-sm input {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/*======================
14. Works, Prints & Sittings
========================*/
/*----- 14.1 Choices & Swatches -----*/
.choice-grid {
  display: grid;
  gap: 10px;
}
.choice-grid.is-2 {
  grid-template-columns: repeat(2, 1fr);
}
.choice-grid.is-3 {
  grid-template-columns: repeat(3, 1fr);
}
.choice-grid.is-5 {
  grid-template-columns: repeat(5, 1fr);
}
.choice-grid .choice-card {
  align-items: flex-start;
  height: 100%;
  padding: 16px 16px 18px;
}
.choice-grid .choice-card.is-checked {
  box-shadow: inset 0 0 0 1px var(--tn-coral), inset 0 3px 0 var(--tn-coral);
}
.choice-card.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.choice-card .cc-body b {
  font-size: 14px;
  letter-spacing: 0.14em;
}
.choice-card .cc-body small {
  font-size: 13px;
}
.choice-card .cc-body em {
  margin-top: 4px;
  color: var(--tn-accent-text);
  font-size: 15px;
}
.choice-card.is-frame,
.choice-card.is-mat,
.choice-card.is-swatch {
  flex-direction: column;
  gap: 12px;
}
.fr-swatch,
.mt-swatch,
.bd-swatch {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 30px;
}
.fr-swatch.is-none {
  background: repeating-linear-gradient(45deg, var(--tn-line-2) 0 2px, transparent 2px 9px);
}
.fr-swatch.is-black {
  background: repeating-linear-gradient(90deg, #1A1A1A 0, #262626 3px, #161616 7px);
}
.fr-swatch.is-oak {
  background: repeating-linear-gradient(90deg, #B98A58 0, #C49866 4px, #AD7E4E 9px);
}
.fr-swatch.is-walnut {
  background: repeating-linear-gradient(90deg, #4E3220 0, #5C3C27 5px, #45291A 10px);
}
.fr-swatch.is-gilt {
  background: linear-gradient(135deg, #7A5A22 0%, #E8C877 30%, #9B7A36 55%, #F3DC9A 75%, #8C6A2E 100%);
}
.mt-swatch.is-none {
  background: repeating-linear-gradient(45deg, var(--tn-line-2) 0 2px, transparent 2px 9px);
}
.mt-swatch.is-white {
  background: #FBFAF6;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
}
.mt-swatch.is-ivory {
  background: #EFE8D8;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
}
.bd-swatch.is-olive {
  background: radial-gradient(ellipse at 30% 30%, #5A5C46, #2E3128);
}
.bd-swatch.is-umber {
  background: radial-gradient(ellipse at 30% 30%, #6A4E36, #2F2218);
}
.bd-swatch.is-slate {
  background: radial-gradient(ellipse at 30% 30%, #56656B, #232D31);
}
.swatch-rows li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tn-line);
}
.swatch-rows .bd-swatch {
  width: 56px;
  height: 40px;
}
.swatch-rows span:last-child {
  display: flex;
  flex-direction: column;
}
.swatch-rows b {
  color: var(--tn-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.swatch-rows small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}

/*----- 14.2 Tabs -----*/
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}
.tab-list button {
  height: 46px;
  padding: 0 22px;
  background: var(--tn-surface);
  color: var(--tn-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tab-list button.is-active {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.tab-panel {
  max-width: 860px;
}
.lv-rows.is-narrow {
  max-width: 560px;
  margin-top: 18px;
}

/*----- 14.3 The Print Page -----*/
.pp-wall {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding: 60px 30px;
  background: radial-gradient(ellipse 70% 70% at 30% 30%, #45473A 0%, #2E3128 52%, #1B1E19 100%);
  overflow: hidden;
}
.pp-wall .fs-mat img {
  width: min(400px, 60vw);
  aspect-ratio: auto;
  max-height: 440px;
  object-fit: contain;
}
.pp-zoom {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(238, 235, 230, 0.8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pp-zoom:hover {
  color: var(--tn-coral);
}
.pp-facts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.pp-facts-row li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-facts-row .tn-ico {
  width: 44px;
  height: 44px;
}
.pp-facts-row span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.pp-facts-row b {
  color: var(--tn-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pp-facts-row small {
  color: var(--tn-muted);
  font-size: 13px;
}
.pp-series {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 17px;
  font-style: italic;
}
.pp-title {
  margin: 8px 0 14px;
  font-size: clamp(26px, 2.2vw, 36px);
}
.pp-total {
  display: block;
  margin-bottom: 18px;
  color: var(--tn-accent-text);
  font-size: 32px;
}
.pp-edition {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 28px;
  padding: 18px 0 22px;
  background: var(--tn-surface);
}
.pp-edition div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px;
}
.pp-edition div + div {
  border-left: 1px solid var(--tn-line);
}
.pp-edition small {
  color: var(--tn-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pp-edition b {
  color: var(--tn-heading);
  font-size: 17px;
  font-weight: 600;
}
.pp-edition .tn-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.pp-group {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.pp-group legend {
  float: none;
  width: auto;
  margin-bottom: 12px;
}
.pp-breakdown {
  margin: 8px 0 26px;
}
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pp-actions .tn-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.register-wrap {
  max-width: 1000px;
  margin: 0 auto;
}

/*----- 14.4 Shop & Bag -----*/
.shop-side .tn-field {
  margin-bottom: 14px;
}
.tn-shop .tn-filter-tabs {
  margin-bottom: 40px;
}
.bl-dressed {
  display: block;
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-style: italic;
}
.bl-no {
  color: var(--tn-accent-text);
  font-size: 16px;
  white-space: nowrap;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0;
}
.article-buy .product-mini {
  border: 0;
  padding: 0;
}

/*----- 14.5 Portfolio -----*/
.pf-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 40px;
}
.pf-tools .tn-filter-tabs {
  margin: 0;
}
.pf-search {
  position: relative;
  width: min(340px, 100%);
}
.pf-search .tn-input {
  height: 48px;
  padding-right: 46px;
}
.pf-search i {
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -7px;
  color: var(--tn-coral);
  font-size: 14px;
  pointer-events: none;
}
/* the masonry: four columns of the base's portfolio, tiles keeping their photograph's shape */
.pf-masonry {
  columns: 4 260px;
  column-gap: 14px;
}
.pf-item {
  margin-bottom: 26px;
  break-inside: avoid;
}
.work-card.is-tile .wk-img img {
  aspect-ratio: auto;
}
.pf-item.is-wide .wk-img img {
  aspect-ratio: 3 / 2;
}
.pf-item.is-tall .wk-img img {
  aspect-ratio: 3 / 4;
}
.pf-item.is-square .wk-img img {
  aspect-ratio: 1 / 1;
}
.work-card.is-tile .wk-body {
  padding-top: 14px;
}

/*----- 14.6 Gallery Wall -----*/
/* the justified wall: rows of works at their own proportions, edge to edge on thin gutters */
.wall-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wall-grid::after {
  content: "";
  flex-grow: 10;
}
.wall-item {
  position: relative;
  display: block;
  height: 300px;
  background: #0A0A0A;
  overflow: hidden;
}
.wall-item.is-wide {
  flex: 1.5 1 450px;
}
.wall-item.is-square {
  flex: 1 1 300px;
}
.wall-item.is-tall {
  flex: 0.72 1 216px;
}
.wall-item .tn-mat,
.wall-item img {
  height: 100%;
}
.wall-item img {
  object-fit: cover;
}
.wall-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 34px 20px 16px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.82) 100%);
  color: rgba(238, 235, 230, 0.8);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wall-cap b {
  color: #EEEBE6;
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wall-cap small {
  font-family: var(--tn-ff-display);
  font-size: 14px;
  font-style: italic;
}
.wall-item:hover .wall-cap,
.wall-item:focus-visible .wall-cap {
  opacity: 1;
}

/*----- 14.7 Work Pages -----*/
.work-big {
  display: grid;
  gap: 16px;
}
.wb-img {
  display: block;
  background: #0A0A0A;
}
.wb-img img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.wb-img.is-detail img {
  aspect-ratio: 21 / 9;
}
.work-info {
  margin-top: 60px;
}
.work-info h2 {
  margin-top: 4px;
}
.work-info .tn-lead {
  margin: 22px 0 18px;
}
.work-share {
  display: inline-flex;
  gap: 14px;
}
.work-share a:hover {
  color: var(--tn-accent-text);
}
.work-editions li {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tn-line);
}
.work-editions li:first-child {
  border-top: 1px solid var(--tn-line);
}
.we-size {
  display: flex;
  flex-direction: column;
}
.we-size b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-figure);
  font-size: 17px;
  font-weight: 400;
}
.we-size small {
  color: var(--tn-muted);
  font-size: 12.5px;
}
.we-left {
  color: var(--tn-text);
  font-size: 14px;
  font-weight: 600;
}
.we-next {
  color: var(--tn-heading);
}
.we-price {
  color: var(--tn-accent-text);
  font-size: 19px;
  font-weight: 400;
}
.work-editions li.is-sold-out .we-left {
  text-decoration: line-through;
  text-decoration-color: var(--tn-coral);
}
.work-slider-wrap {
  position: relative;
}
.work-slider img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
}
.work-slider-wrap .mini-nav {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  display: flex;
  gap: 10px;
}
.notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ng-item {
  display: block;
  background: #0A0A0A;
}
.ng-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ng-item.is-wide {
  grid-column: 1 / 3;
}
.ng-item.is-wide img {
  aspect-ratio: 16 / 10;
}
.notes-side {
  position: sticky;
  top: 120px;
}
.notes-side .tn-lead {
  margin: 22px 0 16px;
}
.notes-side .work-facts {
  margin: 22px 0 30px;
}
.notes-ed-title {
  margin-bottom: 14px;
}
.notes-side .work-editions {
  margin-bottom: 30px;
}
.notes-side .work-editions li {
  grid-template-columns: 1.2fr 1fr auto;
}
.notes-side .we-next {
  display: none;
}
.tn-work-nav {
  padding: 34px 0;
  border-top: 1px solid var(--tn-line);
  border-bottom: 1px solid var(--tn-line);
}
.work-nav {
  margin: 0;
}
.pn-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pn-grid:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}

/*----- 14.8 Series, Exhibitions & About -----*/
.ex-photo-pair,
.sit-photos,
.about-stack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: end;
  gap: 16px;
}
.ex-photo-pair > span,
.sit-photos > span,
.about-stack > span {
  display: block;
  background: #0A0A0A;
}
.ex-photo-pair img,
.sit-photos img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.ex-photo-pair .ep-b,
.sit-photos .sp-b {
  margin-bottom: -40px;
}
.about-stack {
  grid-template-columns: 1fr;
}
.about-stack .as-a img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.about-stack .as-b {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 52%;
  border: 10px solid var(--tn-bg);
}
.about-stack .as-b img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about-sign {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.sign-word {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 40px;
  font-style: italic;
  line-height: 1.1;
}
.about-sign small {
  color: var(--tn-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.way-card {
  height: 100%;
  padding: 40px 34px;
  background: var(--tn-surface);
  border-top: 1px solid var(--tn-coral);
}
.way-card .tn-ico {
  margin-bottom: 20px;
}
.way-card h3 {
  margin-bottom: 10px;
}
.profile-photo {
  display: block;
  background: #0A0A0A;
}
.profile-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.tn-profile .tn-lead {
  margin: 22px 0 16px;
}
.map-frame,
.contact-map {
  position: relative;
  height: 100%;
  min-height: 420px;
  background: var(--tn-cream);
}
.map-frame iframe,
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.7) contrast(1.05);
}
.contact-map {
  min-height: 300px;
  margin-bottom: 24px;
}
.tn-ex-facts {
  padding: 40px 0;
}
.tn-ex-facts .facts-strip {
  margin: 0;
}

/*----- 14.9 Sittings & Booking -----*/
.light-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.light-table li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: rgba(238, 235, 230, 0.06);
}
.light-table li span {
  color: var(--tn-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.light-table li b {
  color: var(--tn-heading);
  font-size: 22px;
  font-weight: 400;
}
.light-table li small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 14px;
  font-style: italic;
}
.light-table li.is-now {
  background: var(--tn-coral);
}
.light-table li.is-now span,
.light-table li.is-now b,
.light-table li.is-now small {
  color: var(--tn-ink);
}
.wz-note {
  margin-bottom: 16px;
  font-size: 15px;
}
.tn-wizard .tn-label {
  margin-top: 6px;
}
.tn-wizard .tn-label small {
  color: var(--tn-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}
.tn-wizard legend {
  float: none;
  width: auto;
  margin-bottom: 20px;
}
.tn-wizard fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.date-row {
  margin-bottom: 24px;
}
.date-choice > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}
.date-choice small {
  color: var(--tn-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.date-choice b {
  font-size: 24px;
  font-weight: 400;
}
.date-choice.is-checked {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.date-choice.is-checked small {
  color: var(--tn-ink);
}
.chip-choice > span small {
  display: block;
  font-size: 10px;
}
.booking-summary {
  position: sticky;
  top: 110px;
}
.booking-summary .sum-total {
  margin: 22px 0 10px;
}

/*----- 14.10 Proofing Gallery -----*/
.tn-proof-facts {
  padding: 40px 0;
}
.tn-proof-facts .facts-strip {
  margin: 0;
}
.proof-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 36px;
}
.proof-head p {
  max-width: 620px;
  margin: 12px 0 0;
}
.proof-head .tn-filter-tabs {
  margin: 0;
}
.proof-head .tn-filter-tabs span {
  margin-left: 6px;
  color: var(--tn-accent-text);
}
.proof-head .tn-filter-tabs .is-active span {
  color: var(--tn-ink);
}
.proof-grid {
  columns: 4 260px;
  column-gap: 14px;
}
.proof {
  position: relative;
  margin-bottom: 14px;
  break-inside: avoid;
}
.proof-pick {
  position: relative;
  display: block;
  cursor: pointer;
}
.proof-pick img {
  display: block;
  width: 100%;
}
/* the base's numbered corner: a triangle notch with the frame's number */
.proof-no {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
  padding: 10px 10px 0 0;
  color: var(--tn-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.proof-pick::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  width: 74px;
  height: 74px;
  background: var(--tn-bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.proof-tick {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  color: transparent;
  font-size: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(238, 235, 230, 0.7);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.proof.is-picked .proof-tick {
  background: var(--tn-coral);
  color: var(--tn-ink);
  box-shadow: none;
}
.proof.is-picked .proof-pick img {
  outline: 3px solid var(--tn-coral);
  outline-offset: -3px;
}
.proof-pick input:focus-visible ~ .proof-tick {
  outline: 2px solid var(--tn-coral);
  outline-offset: 3px;
}
.proof-zoom {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  color: #EEEBE6;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
.proof:hover .proof-zoom,
.proof-zoom:focus-visible {
  opacity: 1;
}
.proof-zoom:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.proof-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  margin-top: 40px;
  padding: 18px 0;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3);
}
.proof-bar .container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
}
.pb-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
}
.pb-figures span {
  display: flex;
  flex-direction: column;
}
.pb-figures small {
  color: var(--tn-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pb-figures b {
  color: var(--tn-heading);
  font-size: 22px;
  font-weight: 400;
}
.pb-actions {
  display: flex;
  gap: 10px;
}
.proof-bar .form-status {
  flex-basis: 100%;
  margin: 0;
}

/*----- 14.11 Edition Register -----*/
.tn-register-totals {
  padding: 40px 0;
}
.tn-register-totals .facts-strip {
  margin: 0;
}
.register-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.tn-register .tn-filter-tabs {
  justify-content: flex-start;
}
.register-list {
  display: grid;
  gap: 10px;
}
.rg-row {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 0.8fr;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  background: var(--tn-surface);
}
.rg-work {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.rg-work img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
}
.rg-work span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rg-work b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rg-work small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-display);
  font-size: 14px;
  font-style: italic;
}
.rg-work:hover b {
  color: var(--tn-accent-text);
}
.rg-size {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rg-size small {
  color: var(--tn-muted);
  font-family: var(--tn-ff-figure);
  font-size: 13px;
}
.rg-size b {
  color: var(--tn-heading);
  font-size: 13.5px;
  font-weight: 600;
}
.rg-size em {
  color: var(--tn-muted);
  font-family: var(--tn-ff-figure);
  font-size: 13px;
  font-style: normal;
}
.rg-size.is-sold-out b {
  color: var(--tn-muted);
}
.rg-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.rg-price small {
  color: var(--tn-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.rg-price b {
  color: var(--tn-accent-text);
  font-size: 19px;
  font-weight: 400;
}

/*----- 14.12 Print Care -----*/
.care-photo {
  display: block;
  background: #0A0A0A;
}
.care-photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.dc-result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
  border-top: 1px solid var(--tn-line);
}
.dc-result div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px 18px 0;
}
.dc-result div + div {
  padding-left: 18px;
  border-left: 1px solid var(--tn-line);
}
.dc-result small {
  color: var(--tn-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dc-result b {
  color: var(--tn-heading);
  font-size: 21px;
  font-weight: 400;
}
.dc-result div:first-child b {
  color: var(--tn-accent-text);
  font-size: 28px;
}
.dc-meter {
  margin-top: 6px;
}

/*======================
15. Studio Pages
========================*/
/*----- 15.1 Panels & Wizards -----*/
.tn-panel.is-night {
  background: var(--tn-night);
  box-shadow: none;
}
.tn-panel h2,
.tn-panel h3 {
  margin-bottom: 20px;
}
.wz-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 36px;
}
.wz-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--tn-cream);
  color: var(--tn-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: default;
}
.wz-steps li span {
  color: var(--tn-accent-text);
  font-family: var(--tn-ff-display);
  font-size: 20px;
  letter-spacing: 0;
}
.wz-steps li.is-done {
  cursor: pointer;
  color: var(--tn-heading);
}
.wz-steps li.is-active {
  background: var(--tn-slate);
  color: #EEEBE6;
}
.wz-steps li.is-active span {
  color: var(--tn-coral-soft);
}
.wz-step {
  display: none;
}
.wz-step.is-active {
  display: block;
}
.wz-step > h3 {
  margin-bottom: 24px;
}
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--tn-line);
}
.wz-nav .tn-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wz-review li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--tn-line);
}
.wz-review li span {
  color: var(--tn-muted);
}
.wz-review li b {
  color: var(--tn-heading);
  font-weight: 600;
  text-align: end;
}
.wz-review + .tn-check {
  margin-top: 22px;
}
.wz-done {
  padding: 20px 0 10px;
  text-align: center;
}
.done-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 26px;
}
.choice-list.is-row {
  grid-template-columns: repeat(3, 1fr);
}
.choice-list.is-row .choice-card {
  align-items: flex-start;
  padding: 18px 18px 20px;
}
.cc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-body b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.25;
}
.cc-body small {
  color: var(--tn-muted);
  font-size: 14px;
  line-height: 1.45;
}
.cc-price {
  margin-top: 6px;
  color: var(--tn-accent-text);
  font-size: 14px;
  font-weight: 700;
}
.choice-ico .tn-ico {
  width: 40px;
  height: 40px;
}
.choice-ico {
  background: var(--tn-surface);
}
/* date chips */
.date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.date-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 82px;
  padding: 10px 6px 12px;
  background: var(--tn-cream);
  color: var(--tn-heading);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.date-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.date-choice .dc-week,
.date-choice .dc-month {
  color: var(--tn-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.date-choice .dc-num {
  font-family: var(--tn-ff-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}
.date-choice:hover {
  background: var(--tn-cream-2);
}
.date-choice:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--tn-coral-rgb), 0.3);
}
.date-choice.is-checked {
  background: var(--tn-slate);
  color: #EEEBE6;
}
.date-choice.is-checked .dc-week,
.date-choice.is-checked .dc-month {
  color: var(--tn-coral-soft);
}
.slot-group + .slot-group {
  margin-top: 18px;
}
.slot-head {
  display: block;
  margin-bottom: 10px;
  color: var(--tn-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slot-row .chip-choice > span {
  height: 42px;
  padding: 0 16px;
  border-radius: 0;
  font-size: 15px;
}
.party-qty {
  margin-bottom: 6px;
}
.booking-summary h3,
.event-estimate h3 {
  margin-bottom: 18px;
}
.booking-summary .tn-label {
  margin-top: 26px;
  color: var(--tn-coral-soft);
}
.bs-note,
.ee-per {
  margin: 18px 0 0;
  font-size: 14.5px;
}
.bs-note a {
  color: var(--tn-coral-soft);
  text-decoration: underline;
}
.tn-panel.is-night .sum-total b {
  color: #EEEBE6;
}
.event-estimate .ee-per b {
  color: #EEEBE6;
}


/*----- 15.2 Account Dashboard -----*/
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--tn-muted);
  font-size: 14px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--tn-cream);
  color: var(--tn-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .tn-ico {
  width: 34px;
  height: 34px;
}
.dash-tabs button.is-active {
  background: var(--tn-slate);
  color: #EEEBE6;
}
.dash-tabs button.is-active .ico-day {
  display: none;
}
.dash-tabs button.is-active .ico-night {
  display: block;
}
.dash-panel > h2 {
  margin-bottom: 24px;
}
.table-wrap {
  margin-bottom: 30px;
  overflow-x: auto;
}
.tn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tn-table th {
  padding: 12px 14px;
  background: var(--tn-cream);
  color: var(--tn-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
}
.tn-table td {
  padding: 14px;
  border-bottom: 1px solid var(--tn-line);
  vertical-align: top;
}
.tn-table td:first-child {
  color: var(--tn-heading);
  font-weight: 700;
  white-space: nowrap;
}
.my-seats {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.my-seats li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 16px 20px;
  background: var(--tn-cream);
}
.my-seats li b {
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-weight: 400;
  text-transform: uppercase;
}
.my-seats li.is-empty {
  color: var(--tn-muted);
}
.account-form.is-plain {
  padding: 0;
  box-shadow: none;
}

/*----- 15.3 Contact & Articles -----*/
.contact-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}
.contact-hours {
  margin-top: 24px;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0;
  padding: 22px 26px;
}
.sum-hint {
  margin: 14px 0 0;
  color: var(--tn-muted);
  font-size: 14px;
  text-align: center;
}

/*======================
16. Print Shop
========================*/
/*----- 16.1 Shop Grid -----*/
.side-posts .thumb.is-product {
  background: var(--tn-shelf);
}
.side-posts .thumb.is-product img {
  object-fit: contain;
}
.tr-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--tn-accent-text);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tn-line-2);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  font-size: 22px;
  font-weight: 500;
  color: var(--tn-heading);
}
.shop-sort {
  width: 230px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
/* the base's shop tile: the packshot on its cream ground, the category, the name in Lora capitals and the price
   centred under it; on hover the tile lifts, the jar eases forward, the corner folds and the bag button rises */
.product-card {
  height: 100%;
  text-align: center;
  transition: transform 0.5s var(--tn-ease);
}
.product-card:hover {
  transform: translateY(-6px);
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: var(--tn-shelf);
  transition: box-shadow 0.5s var(--tn-ease);
}
.product-card:hover .pc-media {
  box-shadow: var(--tn-shadow-lg);
}
.pc-img {
  display: block;
}
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.32);
  transition: transform 1s var(--tn-ease);
}
.product-card:hover .pc-img img {
  transform: scale(1.42);
}
.pc-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  color: var(--tn-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pc-badge.is-sale {
  color: var(--tn-red-text);
}
[data-theme="light"] .pc-badge {
  color: #6E6219;
}
[data-theme="light"] .pc-badge.is-sale {
  color: #B23B1E;
}
.pc-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 6px 16px rgba(var(--tn-slate-rgb), 0.12);
  color: var(--tn-slate);
  font-size: 14px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.35s var(--tn-ease), transform 0.35s var(--tn-ease), background-color 0.3s var(--tn-ease), color 0.3s var(--tn-ease);
}
.pc-act:nth-child(2) {
  transition-delay: 0.05s;
}
.product-card:hover .pc-act,
.pc-act:focus,
.pc-act.is-on {
  opacity: 1;
  transform: none;
}
.pc-act:hover,
.pc-act.is-on {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.pc-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  background: var(--tn-slate);
  color: #EEEBE6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 0.45s var(--tn-ease), background-color 0.3s var(--tn-ease);
}
.product-card:hover .pc-add,
.pc-add:focus {
  transform: none;
}
.pc-add:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.pc-body {
  padding: 22px 10px 6px;
}
.pc-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tn-accent-text);
}
.pc-body h3 {
  margin: 6px 0 6px;
}
.pc-body h3 a {
  color: var(--tn-heading);
}
.pc-body h3 a:hover {
  color: var(--tn-accent-text);
}
.pc-price {
  color: var(--tn-text);
  font-size: 16px;
  font-weight: 600;
}
.pc-price del {
  margin-left: 6px;
  font-size: 14px;
  color: var(--tn-muted);
}

/*----- 16.2 Product Page -----*/
.pd-main {
  position: relative;
  padding: 20px;
  background: var(--tn-shelf);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pd-thumbs button {
  padding: 4px;
  background: var(--tn-shelf);
  box-shadow: inset 0 0 0 1px var(--tn-line-2);
  transition: box-shadow 0.3s var(--tn-ease);
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  box-shadow: inset 0 0 0 2px var(--tn-coral);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-info h2 {
  margin: 6px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--tn-accent-text);
}
.pd-price del {
  margin-left: 10px;
  font-size: 26px;
  color: var(--tn-muted);
}
.pd-info .tn-kv {
  margin: 24px 0 30px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pd-buy .tn-btn {
  height: 54px;
}
.pd-wish {
  width: 54px;
  height: 54px;
}
.pd-wish.is-on {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.pd-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14.5px;
}
.pd-note i {
  font-size: 26px;
  color: var(--tn-accent-text);
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--tn-line-2);
}
.pd-tablist button {
  position: relative;
  padding: 0 0 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--tn-muted);
}
.pd-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--tn-coral);
  transform: scaleX(0);
  transition: transform 0.4s var(--tn-ease);
}
.pd-tablist button.is-active {
  color: var(--tn-heading);
}
.pd-tablist button.is-active::after {
  transform: scaleX(1);
}
.pd-tabs [role="tabpanel"] {
  max-width: 900px;
}
.review-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--tn-line);
}
.review-list img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  margin-right: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--tn-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 16.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--tn-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--tn-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto auto 40px;
}
.bl-img {
  display: block;
  background: #0A0A0A;
}
.bl-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.bl-body h3 {
  margin: 6px 0 4px;
}
.bl-body h3 a {
  color: var(--tn-heading);
}
.bl-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tn-accent-text);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--tn-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--tn-muted);
}
.bl-total {
  min-width: 90px;
  font-family: var(--tn-ff-figure);
  font-size: 20px;
  font-weight: 400;
  text-align: right;
  color: var(--tn-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--tn-ease), color 0.3s var(--tn-ease);
}
.bl-remove:hover {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--tn-line-2);
  background: var(--tn-surface);
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--tn-coral);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--tn-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--tn-coral);
  transition: width 0.8s var(--tn-ease);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--tn-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tn-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--tn-shelf);
  box-shadow: inset 0 0 0 1px var(--tn-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 11px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--tn-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--tn-heading);
}
.order-summary .tn-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--tn-accent-text);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--tn-accent-text);
}

/*----- 16.4 Toast -----*/
.tn-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--tn-slate);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--tn-mat);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--tn-ease), transform 0.4s var(--tn-ease), visibility 0.4s;
}
.tn-toast i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 11px;
}
.tn-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/*======================
17. Blog & Account
========================*/
/*----- 17.1 Blog List -----*/
/* Northlite's blog: wide photo posts with a coral date tile, and coloured quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--tn-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .tn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--tn-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .tn-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--tn-accent-text);
}
.bp-body h3 a {
  color: var(--tn-heading);
}
.bp-body h3 a:hover {
  color: var(--tn-accent-text);
}
.bp-body .tn-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a night card with the title set large in light caps and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--tn-slate);
  --tn-heading: #EEEBE6;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: var(--tn-coral-soft);
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #EEEBE6;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #EEEBE6;
}
.blog-post.is-quote h3 a:hover {
  color: var(--tn-coral-soft);
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(238, 235, 230, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(238, 235, 230, 0.1);
  font-size: 120px;
}

/*----- 17.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .tn-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--tn-cream-2);
  border-inline-start: 4px solid var(--tn-coral);
}
.article-quote p {
  margin-bottom: 16px;
  color: var(--tn-heading);
  font-family: var(--tn-ff-display);
  font-size: 26px;
  font-style: italic;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--tn-accent-text);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tn-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--tn-line);
}
.article-rows dt {
  color: var(--tn-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--tn-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tn-coral);
  color: var(--tn-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--tn-slate);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--tn-cream);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .tn-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--tn-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--tn-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tn-cream);
  color: var(--tn-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.post-nav .pn-all {
  color: var(--tn-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--tn-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--tn-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--tn-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 17.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--tn-surface);
  box-shadow: var(--tn-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--tn-slate);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.1) 0%, rgba(8, 11, 15, 0.55) 45%, rgba(8, 11, 15, 0.95) 100%);
}
.account-side > .tn-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 76px;
  height: 76px;
  padding: 14px;
  border-radius: 50%;
  background: var(--tn-charcoal);
  object-fit: contain;
}
.as-copy {
  margin-top: auto;
}
.as-copy .tn-script {
  color: var(--tn-coral);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .tn-avatars .faces img,
.as-copy .tn-avatars .more {
  border-color: var(--tn-slate);
}
.account-form {
  padding: 56px 54px;
}
.account-form .tn-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--tn-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--tn-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--tn-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--tn-coral);
  transition: width 0.4s var(--tn-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--tn-coral);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--tn-coral);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--tn-muted);
  font-size: 13px;
}

/*----- 17.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other: Northlite's split, with the seal turning on the seam */
.tn-bare-page {
  min-height: 100vh;
  background: var(--tn-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -56px;
  z-index: 2;
  width: 112px;
  height: 112px;
  margin-top: -56px;
  padding: 22px;
  border-radius: 50%;
  background: var(--tn-charcoal);
  box-shadow: 0 0 0 8px rgba(242, 108, 79, 0.18);
  object-fit: contain;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .tn-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .tn-rule {
  margin: 24px 0;
}
.bare-inner .tn-lead {
  max-width: 560px;
}
.bare-inner .tn-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--tn-accent-text);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .tn-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--tn-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--tn-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--tn-surface);
  color: var(--tn-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-gold {
  background: var(--tn-coral);
  color: var(--tn-ink);
}
.launch-count b {
  font-family: var(--tn-ff-figure);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--tn-surface);
  color: var(--tn-heading);
  font-family: var(--tn-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--tn-coral);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: var(--tn-mat);
  color: var(--tn-ink);
}

/*======================
18. Subheader
========================*/
/* the base's page title: a band, the title in widely tracked capitals centred over a coral hairline wider than it, a lead
   in the serif's italic under it, the craquelure spreading across the band. Some pages lay it over a photograph instead. */
.tn-subheader {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 90px 0 80px;
  overflow: clip;
  text-align: center;
}
.tn-subheader.is-band {
  background: var(--tn-cream);
}
.tn-subheader .sub-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.tn-subheader.is-photo {
  min-height: 500px;
  background: #121212;
  --tn-heading: #EEEBE6;
  --tn-text: rgba(238, 235, 230, 0.84);
  --tn-muted: rgba(238, 235, 230, 0.7);
  --tn-accent-text: #F58A71;
  --gl-1: #121212;
  --gl-2: #EEEBE6;
  --gl-3: #4A4A36;
}
.tn-subheader.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(12, 12, 12, 0.72) 0%, rgba(12, 12, 12, 0.5) 70%, rgba(12, 12, 12, 0.7) 100%);
}
.tn-subheader .tn-gl {
  z-index: 0;
}
.tn-subheader .container {
  position: relative;
  z-index: 1;
}
/* clear the header that lies over the page on Home 1 style pages */
.sub-copy {
  max-width: 900px;
  margin: 0 auto;
}
.sub-copy h1 {
  font-size: clamp(32px, 3.4vw, 56px);
  letter-spacing: 0.36em;
  margin-right: -0.36em;
}
.sub-copy .tn-rule {
  width: min(420px, 80%);
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.sub-copy .tn-lead {
  max-width: 640px;
  margin: 22px auto 0;
}
.tn-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  color: var(--tn-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.tn-crumbs a {
  color: var(--tn-heading);
}
.tn-crumbs a:hover {
  color: var(--tn-accent-text);
}
.tn-crumbs i {
  color: var(--tn-coral);
  font-size: 7px;
}
.tn-crumbs span {
  color: var(--tn-accent-text);
}

/*======================
19. Footer
========================*/
/* the base's slate footer on every page: the studio and its contacts on one side, the viewing room and the letter on the
   other, and in the middle the cloth - linen falling and settling over a still life not yet shown - over the logo */
.tn-footer {
  position: relative;
  isolation: isolate;
  padding-top: 90px;
  background: var(--tn-night);
  /* the cloth: linen, its shadow and the coral threads, the same in both themes */
  --cloth-linen: #EFEAE0;
  --cloth-shade: #1A2326;
  --cloth-thread: #F26C4F;
}
.footer-main {
  padding-bottom: 70px;
}
.tn-footer .widget h2 {
  margin-bottom: 22px;
}
.footer-address {
  margin-bottom: 18px;
  font-family: var(--tn-ff-display);
  font-size: 18px;
  font-style: italic;
  color: var(--tn-heading);
}
.footer-contact li + li {
  margin-top: 10px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--tn-text);
}
.footer-contact a i {
  width: 16px;
  color: var(--tn-coral-soft);
}
.footer-contact a:hover {
  color: var(--tn-coral-soft);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-cloth {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 260px;
  margin: -40px auto 6px;
}
/* a soft table shadow under the cloth */
.footer-cloth::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6%;
  height: 18%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
}
.tn-cloth {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.tn-cloth.is-on {
  opacity: 1;
}
.footer-word {
  display: inline-block;
  margin-bottom: 6px;
}
.footer-word img {
  display: block;
  height: 76px;
  width: auto;
}
.footer-brand p {
  max-width: 340px;
  margin: 18px 0 22px;
  font-family: var(--tn-ff-display);
  font-size: 16px;
  font-style: italic;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.footer-social a {
  color: var(--tn-coral-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.footer-social a:hover {
  color: #EEEBE6;
}
.footer-hours .hours-list li span {
  color: var(--tn-muted);
}
.footer-hours .nl-title {
  margin: 34px 0 16px;
}
.footer-note {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--tn-muted);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 28px 0;
  border-top: 1px solid var(--tn-coral);
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--tn-coral-soft);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.footer-links a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}