/* src/theme-tokens.css */
/*
  UXPIN THEME TOKENS - integrated with the Wire theme editor.
  This file is the single source of truth for the design: every color, font,
  radius and shadow lives here as a CSS variable.
  KEEP THE STRUCTURE: exactly one "html:root:not(.dark)" block (light scheme)
  and one "html:root.dark" block (dark scheme), one "--token: value;" per line.
  Change VALUES or add/remove token lines - never rename or merge the blocks.
  Tailwind utilities read these through tailwind.config.js (bg-bg, text-text,
  bg-primary, font-display, ...), so editing a token restyles the whole page.
*/
html:root:not(.dark) {
  --color-bg: #f6f4ef;
  --color-surface: #ece8e0;
  --color-text: #121211;
  --color-muted: #5c5a55;
  --color-primary: #121211;
  --color-primary-contrast: #f6f4ef;
  --color-accent: #9a3b1f;
  --color-accent-contrast: #ffffff;
  --color-border: #cfc9bd;
  --color-field: #8a857a;
  --color-dark: #0e0e0d;
  --color-on-dark: #edeae3;
  --color-muted-on-dark: #a8a49a;
  --color-accent-on-dark: #d9805c;
  --color-border-on-dark: #34332f;
  --color-error: #a12a1e;
  --color-error-bg: #fef2f2;
  --color-success: #2f6b3f;
  --color-success-bg: #f0fdf4;
  --color-lightbox: rgb(14 14 13 / 0.96);
  --color-scrim: rgb(14 14 13 / 0.72);
  --color-vignette: rgb(14 14 13 / 0.28);
  --color-tone-salt-1: #e9e2d0;
  --color-tone-salt-2: #c9b98f;
  --color-tone-salt-3: #8e9aa0;
  --color-tone-salt-4: #3f4a4f;
  --color-tone-ferry-1: #0f1e2e;
  --color-tone-ferry-2: #26425a;
  --color-tone-ferry-3: #c27a3a;
  --color-tone-ferry-4: #070c12;
  --color-tone-tailor-1: #5a4636;
  --color-tone-tailor-2: #8c6b4f;
  --color-tone-tailor-3: #c8b08a;
  --color-tone-tailor-4: #2a201a;
  --color-tone-kiln-1: #b5683f;
  --color-tone-kiln-2: #d9a57a;
  --color-tone-kiln-3: #6b3a2a;
  --color-tone-kiln-4: #2b1a14;
  --color-tone-winter-1: #d6dadb;
  --color-tone-winter-2: #98a4a8;
  --color-tone-winter-3: #51606a;
  --color-tone-winter-4: #1d262b;
  --color-tone-bread-1: #7c8050;
  --color-tone-bread-2: #bfb27a;
  --color-tone-bread-3: #4b4a2b;
  --color-tone-bread-4: #1e1f10;
  --display-font: "Newsreader", Georgia, serif;
  --body-font: "Hanken Grotesk", system-ui, sans-serif;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
  --shadow-sm: none;
  --shadow-md: 0px 1px 0px 0px rgba(18, 18, 17, 0.06);
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 200ms;
  --dur-link: 300ms;
  --dur-slow: 1100ms;
}
html:root.dark {
  --color-bg: #0e0e0d;
  --color-surface: #181816;
  --color-text: #edeae3;
  --color-muted: #a8a49a;
  --color-primary: #edeae3;
  --color-primary-contrast: #0e0e0d;
  --color-accent: #d9805c;
  --color-accent-contrast: #0e0e0d;
  --color-border: #34332f;
  --color-field: #8a857a;
  --color-dark: #0e0e0d;
  --color-on-dark: #edeae3;
  --color-muted-on-dark: #a8a49a;
  --color-accent-on-dark: #d9805c;
  --color-border-on-dark: #34332f;
  --color-error: #f08a7e;
  --color-error-bg: #2a1411;
  --color-success: #7cc18d;
  --color-success-bg: #12231a;
  --color-lightbox: rgb(14 14 13 / 0.96);
  --color-scrim: rgb(14 14 13 / 0.72);
  --color-vignette: rgb(14 14 13 / 0.28);
  --color-tone-salt-1: #e9e2d0;
  --color-tone-salt-2: #c9b98f;
  --color-tone-salt-3: #8e9aa0;
  --color-tone-salt-4: #3f4a4f;
  --color-tone-ferry-1: #0f1e2e;
  --color-tone-ferry-2: #26425a;
  --color-tone-ferry-3: #c27a3a;
  --color-tone-ferry-4: #070c12;
  --color-tone-tailor-1: #5a4636;
  --color-tone-tailor-2: #8c6b4f;
  --color-tone-tailor-3: #c8b08a;
  --color-tone-tailor-4: #2a201a;
  --color-tone-kiln-1: #b5683f;
  --color-tone-kiln-2: #d9a57a;
  --color-tone-kiln-3: #6b3a2a;
  --color-tone-kiln-4: #2b1a14;
  --color-tone-winter-1: #d6dadb;
  --color-tone-winter-2: #98a4a8;
  --color-tone-winter-3: #51606a;
  --color-tone-winter-4: #1d262b;
  --color-tone-bread-1: #7c8050;
  --color-tone-bread-2: #bfb27a;
  --color-tone-bread-3: #4b4a2b;
  --color-tone-bread-4: #1e1f10;
  --display-font: "Newsreader", Georgia, serif;
  --body-font: "Hanken Grotesk", system-ui, sans-serif;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
  --shadow-sm: none;
  --shadow-md: 0px 1px 0px 0px rgba(0, 0, 0, 0.4);
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 200ms;
  --dur-link: 300ms;
  --dur-slow: 1100ms;
}


/* src/styles.css */
/*
  Custom CSS beyond Tailwind utilities. Plain CSS only.
  Colors and fonts reference tokens from theme-tokens.css.
*/
html:root:not(.dark) { color-scheme: light; }
html:root.dark { color-scheme: dark; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.band-dark :focus-visible, .lb :focus-visible { outline-color: var(--color-accent-on-dark); }
.skip { position: absolute; left: 16px; top: -60px; padding: 12px 16px; background: var(--color-primary); color: var(--color-primary-contrast); z-index: 100; }
.skip:focus { top: 8px; }

/* type */
.h1, .h2, .h3, .lead, .quote, .wordmark { font-family: var(--display-font); font-weight: 300; }
.h1 { font-size: clamp(56px, 11vw, 168px); line-height: 0.92; letter-spacing: -0.04em; }
.h1--case { font-size: clamp(48px, 9vw, 128px); }
.h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 400; }
.lead { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; letter-spacing: -0.01em; }
.subtitle { font-size: 20px; line-height: 1.45; }
.cap { font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--color-muted); }
.band-dark .muted { color: var(--color-muted-on-dark); }
.accent { color: var(--color-accent); }
.band-dark .accent { color: var(--color-accent-on-dark); }
.italic { font-style: italic; }

/* layout */
.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 56px 0; border-top: 1px solid var(--color-border); }
.band-dark { background: var(--color-dark); color: var(--color-on-dark); border-top-color: var(--color-border-on-dark); }
.sec-head { display: grid; gap: 16px; margin-bottom: 40px; }
.col-text { max-width: 640px; }
.col-text p + p { margin-top: 1.2em; }
@media (min-width: 768px) {
  .sec { padding: 96px 0; }
  .sec-head { grid-template-columns: 3fr 9fr; align-items: baseline; margin-bottom: 40px; }
}
.link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-link) var(--ease-standard), color var(--dur-fast); padding-bottom: 2px; }
.link:hover, .link--on { background-size: 100% 1px; }
.link--accent:hover { color: var(--color-accent); }
.btn { display: inline-block; padding: 16px 28px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.nav-in { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.wordmark { font-size: 24px; letter-spacing: -0.02em; font-weight: 400; }
.nav-links { display: flex; gap: 28px; }
.nav-toggle { display: none; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; color: inherit; }
@media (max-width: 767px) {
  .js-nav .nav-toggle { display: block; }
  .js-nav .nav-links { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 8px 24px 16px; }
  .js-nav .nav-links.open { display: flex; }
  .js-nav .nav-links a { padding: 14px 0; border-top: 1px solid var(--color-border); }
  .nav-links { gap: 16px; font-size: 11px; }
}

/* plates: CSS gradient stand-ins for photographs */
.plate { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; aspect-ratio: var(--ar, 3 / 2); cursor: zoom-in; background-color: var(--t4); transition: transform var(--dur-slow) var(--ease-standard); }
.plate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 40%, var(--color-vignette) 100%); z-index: 1; }
.plate::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0.32; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.frame { overflow: hidden; position: relative; }
.frame:hover .plate { transform: scale(1.04); }
.ar-45 { --ar: 4 / 5; } .ar-32 { --ar: 3 / 2; } .ar-23 { --ar: 2 / 3; } .ar-169 { --ar: 16 / 9; } .ar-11 { --ar: 1 / 1; } .ar-21 { --ar: 21 / 9; }
.tone-salt { --t1: var(--color-tone-salt-1); --t2: var(--color-tone-salt-2); --t3: var(--color-tone-salt-3); --t4: var(--color-tone-salt-4); }
.tone-ferry { --t1: var(--color-tone-ferry-1); --t2: var(--color-tone-ferry-2); --t3: var(--color-tone-ferry-3); --t4: var(--color-tone-ferry-4); }
.tone-tailor { --t1: var(--color-tone-tailor-1); --t2: var(--color-tone-tailor-2); --t3: var(--color-tone-tailor-3); --t4: var(--color-tone-tailor-4); }
.tone-kiln { --t1: var(--color-tone-kiln-1); --t2: var(--color-tone-kiln-2); --t3: var(--color-tone-kiln-3); --t4: var(--color-tone-kiln-4); }
.tone-winter { --t1: var(--color-tone-winter-1); --t2: var(--color-tone-winter-2); --t3: var(--color-tone-winter-3); --t4: var(--color-tone-winter-4); }
.tone-bread { --t1: var(--color-tone-bread-1); --t2: var(--color-tone-bread-2); --t3: var(--color-tone-bread-3); --t4: var(--color-tone-bread-4); }
.g-a { background-image: radial-gradient(ellipse at 28% 24%, var(--t2), transparent 55%), linear-gradient(180deg, var(--t1) 0 56%, var(--t3) 56% 100%); }
.g-b { background-image: radial-gradient(circle at 70% 38%, var(--t3), transparent 34%), linear-gradient(160deg, var(--t4), var(--t2)); }
.g-c { background-image: linear-gradient(90deg, var(--t4) 0 7%, transparent 7%), radial-gradient(ellipse at 50% 110%, var(--t3), transparent 62%), linear-gradient(180deg, var(--t1), var(--t2)); }
.g-d { background-image: conic-gradient(from 210deg at 22% 82%, var(--t1), var(--t2), var(--t3), var(--t4), var(--t1)); }
.g-e { background-image: linear-gradient(180deg, transparent 30%, var(--t4)), repeating-linear-gradient(100deg, var(--t1) 0 26px, var(--t2) 26px 52px); }
.g-f { background-image: radial-gradient(circle at 50% 46%, var(--t1) 0 16%, transparent 17%), radial-gradient(circle at 50% 46%, var(--t2) 0 30%, transparent 31%), linear-gradient(135deg, var(--t3), var(--t4)); }
.g-g { background-image: linear-gradient(0deg, var(--t4) 0 18%, transparent 18%), linear-gradient(90deg, transparent 0 62%, var(--t3) 62% 64%, transparent 64%), radial-gradient(ellipse at 70% 30%, var(--t2), transparent 50%), linear-gradient(180deg, var(--t1), var(--t3)); }
.g-h { background-image: linear-gradient(115deg, var(--t4) 0 30%, transparent 30%), linear-gradient(65deg, var(--t3) 0 20%, transparent 20%), linear-gradient(180deg, var(--t2), var(--t1)); }
.fig { margin: 0; }
.fig .cap { margin-top: 12px; color: var(--color-muted); }
.band-dark .fig .cap { color: var(--color-muted-on-dark); }

/* project grid tile */
.grid-work { display: grid; gap: 40px 24px; }
@media (min-width: 600px) {
  .grid-work { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .grid-work .tile, .grid-work .tile--wide, .grid-work .tile--narrow { grid-column: auto; }
  .grid-work .tile--offset { margin-top: 0; }
}
@media (min-width: 1000px) {
  .grid-work { grid-template-columns: repeat(3, 1fr); }
}
.grid-work .plate { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.grid-work .plate[aria-label*="salt flats"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d4cdb8'/%3E%3Cstop offset='1' stop-color='%23f1ead8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='450' fill='url(%23a)'/%3E%3Ccircle cx='450' cy='175' r='34' fill='%23f8f1dc'/%3E%3Crect y='232' width='600' height='218' fill='%23b4bdbd'/%3E%3Cpolygon points='-20,450 120,300 250,300 230,450' fill='%23ebe4d2' stroke='%238e9aa0' stroke-width='4'/%3E%3Cpolygon points='250,300 470,300 520,450 230,450' fill='%23dcd4be' stroke='%238e9aa0' stroke-width='4'/%3E%3Cpolygon points='470,300 620,300 620,450 520,450' fill='%23ebe4d2' stroke='%238e9aa0' stroke-width='4'/%3E%3Cpolygon points='360,300 410,236 460,300' fill='%23f8f4e8'/%3E%3Cpolygon points='410,236 460,300 428,300' fill='%23c9b98f'/%3E%3Cpolygon points='80,300 112,256 144,300' fill='%23f8f4e8'/%3E%3Cpolygon points='112,256 144,300 126,300' fill='%23c9b98f'/%3E%3Ccircle cx='300' cy='272' r='8' fill='%233f4a4f'/%3E%3Crect x='293' y='280' width='14' height='38' fill='%233f4a4f'/%3E%3Cline x1='310' y1='286' x2='350' y2='336' stroke='%233f4a4f' stroke-width='3'/%3E%3Cline x1='340' y1='332' x2='362' y2='338' stroke='%233f4a4f' stroke-width='3'/%3E%3C/svg%3E"); }
.grid-work .plate[aria-label*="ferry"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230b1622'/%3E%3Cstop offset='1' stop-color='%2326425a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='450' fill='url(%23a)'/%3E%3Crect y='300' width='600' height='150' fill='%23122234'/%3E%3Cpolygon points='110,300 490,300 455,346 150,346' fill='%2304070b'/%3E%3Crect x='170' y='250' width='250' height='50' fill='%2304070b'/%3E%3Crect x='215' y='212' width='160' height='38' fill='%2304070b'/%3E%3Crect x='275' y='176' width='40' height='36' fill='%2304070b'/%3E%3Crect x='292' y='150' width='6' height='26' fill='%2304070b'/%3E%3Ccircle cx='295' cy='148' r='5' fill='%23e8a15c'/%3E%3Cg fill='%23d98a3e'%3E%3Crect x='186' y='268' width='14' height='10'/%3E%3Crect x='212' y='268' width='14' height='10'/%3E%3Crect x='238' y='268' width='14' height='10'/%3E%3Crect x='264' y='268' width='14' height='10'/%3E%3Crect x='290' y='268' width='14' height='10'/%3E%3Crect x='316' y='268' width='14' height='10'/%3E%3Crect x='342' y='268' width='14' height='10'/%3E%3Crect x='368' y='268' width='14' height='10'/%3E%3Crect x='394' y='268' width='14' height='10'/%3E%3Crect x='232' y='224' width='14' height='10'/%3E%3Crect x='262' y='224' width='14' height='10'/%3E%3Crect x='292' y='224' width='14' height='10'/%3E%3Crect x='322' y='224' width='14' height='10'/%3E%3Crect x='350' y='224' width='14' height='10'/%3E%3C/g%3E%3Cg stroke='%23d98a3e' stroke-width='3' opacity='.45'%3E%3Cline x1='200' y1='356' x2='200' y2='384'/%3E%3Cline x1='250' y1='356' x2='250' y2='396'/%3E%3Cline x1='300' y1='356' x2='300' y2='410'/%3E%3Cline x1='350' y1='356' x2='350' y2='392'/%3E%3Cline x1='400' y1='356' x2='400' y2='380'/%3E%3C/g%3E%3C/svg%3E"); }
.grid-work .plate[aria-label*="tailor"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.5' cy='.45' r='.7'%3E%3Cstop offset='0' stop-color='%23d9bf94'/%3E%3Cstop offset='1' stop-color='%238c6b4f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='600' height='450' fill='%235a4636'/%3E%3Crect x='190' y='24' width='220' height='34' fill='%232a201a'/%3E%3Crect x='204' y='38' width='192' height='4' fill='%23c8b08a'/%3E%3Crect x='110' y='74' width='380' height='340' fill='%232a201a'/%3E%3Crect x='124' y='88' width='352' height='312' fill='url(%23g)'/%3E%3Crect x='124' y='340' width='352' height='60' fill='%236b4f38'/%3E%3Cpath d='M300 150 q26 -4 26 14 l0 10 q42 8 52 40 l10 70 h-176 l10 -70 q10 -32 52 -40 l0 -10 q0 -18 26 -14z' fill='%23382a20'/%3E%3Crect x='294' y='150' width='12' height='36' fill='%23c8b08a'/%3E%3Cline x1='300' y1='186' x2='300' y2='300' stroke='%23c8b08a' stroke-width='2'/%3E%3Ccircle cx='300' cy='214' r='4' fill='%23c8b08a'/%3E%3Ccircle cx='300' cy='244' r='4' fill='%23c8b08a'/%3E%3Ccircle cx='300' cy='274' r='4' fill='%23c8b08a'/%3E%3Crect x='294' y='300' width='12' height='40' fill='%232a201a'/%3E%3Cpath d='M150 120 q40 40 0 80' stroke='%23f4ead2' stroke-width='5' fill='none'/%3E%3Cg stroke='%232a201a' stroke-width='4'%3E%3Cline x1='410' y1='330' x2='450' y2='296'/%3E%3Cline x1='410' y1='296' x2='450' y2='330'/%3E%3C/g%3E%3Crect x='150' y='312' width='22' height='28' fill='%23a33a2a'/%3E%3Crect x='178' y='312' width='22' height='28' fill='%23c8b08a'/%3E%3C/svg%3E"); }
.grid-work .plate[aria-label*="kiln bricks"], .grid-work .plate[aria-label*="Kiln Town"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450'%3E%3Cdefs%3E%3Cpattern id='b' width='60' height='30' patternUnits='userSpaceOnUse'%3E%3Crect width='60' height='30' fill='%236b3a2a'/%3E%3Crect x='1' y='1' width='28' height='13' fill='%23b5683f'/%3E%3Crect x='31' y='1' width='28' height='13' fill='%23a85e38'/%3E%3Crect x='-14' y='16' width='28' height='13' fill='%23a85e38'/%3E%3Crect x='16' y='16' width='28' height='13' fill='%23b5683f'/%3E%3Crect x='46' y='16' width='28' height='13' fill='%23a85e38'/%3E%3C/pattern%3E%3CradialGradient id='f' cx='.5' cy='.75' r='.6'%3E%3Cstop offset='0' stop-color='%23f2c58f'/%3E%3Cstop offset='.5' stop-color='%23d9803f'/%3E%3Cstop offset='1' stop-color='%232b1a14'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='600' height='450' fill='url(%23b)'/%3E%3Cpath d='M190 450 V250 a110 110 0 0 1 220 0 V450z' fill='%232b1a14'/%3E%3Cpath d='M214 450 V252 a86 86 0 0 1 172 0 V450z' fill='url(%23f)'/%3E%3Cg fill='%23c9753f' stroke='%232b1a14' stroke-width='3'%3E%3Crect x='24' y='388' width='110' height='28'/%3E%3Crect x='24' y='416' width='110' height='28'/%3E%3Crect x='40' y='360' width='110' height='28'/%3E%3Crect x='466' y='388' width='110' height='28'/%3E%3Crect x='466' y='416' width='110' height='28'/%3E%3Crect x='450' y='360' width='110' height='28'/%3E%3C/g%3E%3Crect x='170' y='140' width='260' height='14' fill='%232b1a14' opacity='.55'/%3E%3C/svg%3E"); }
.grid-work .plate[aria-label*="fairground"], .grid-work .plate[aria-label*="Winter Fair"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2351606a'/%3E%3Cstop offset='1' stop-color='%23d6dadb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='450' fill='url(%23a)'/%3E%3Crect y='376' width='600' height='74' fill='%23e8edef'/%3E%3Cg stroke='%231d262b' stroke-width='5' fill='none'%3E%3Ccircle cx='300' cy='206' r='122'/%3E%3Ccircle cx='300' cy='206' r='70'/%3E%3Cline x1='300' y1='206' x2='422' y2='206'/%3E%3Cline x1='300' y1='206' x2='386' y2='292'/%3E%3Cline x1='300' y1='206' x2='300' y2='328'/%3E%3Cline x1='300' y1='206' x2='214' y2='292'/%3E%3Cline x1='300' y1='206' x2='178' y2='206'/%3E%3Cline x1='300' y1='206' x2='214' y2='120'/%3E%3Cline x1='300' y1='206' x2='300' y2='84'/%3E%3Cline x1='300' y1='206' x2='386' y2='120'/%3E%3Cline x1='300' y1='206' x2='236' y2='392'/%3E%3Cline x1='300' y1='206' x2='364' y2='392'/%3E%3C/g%3E%3Cg fill='%2398a4aa' stroke='%231d262b' stroke-width='3'%3E%3Crect x='408' y='194' width='28' height='26'/%3E%3Crect x='372' y='280' width='28' height='26'/%3E%3Crect x='286' y='316' width='28' height='26'/%3E%3Crect x='200' y='280' width='28' height='26'/%3E%3Crect x='164' y='194' width='28' height='26'/%3E%3Crect x='200' y='108' width='28' height='26'/%3E%3Crect x='286' y='72' width='28' height='26'/%3E%3Crect x='372' y='108' width='28' height='26'/%3E%3C/g%3E%3Cg%3E%3Crect x='20' y='320' width='110' height='60' fill='%2351606a'/%3E%3Cpolygon points='10,320 75,282 140,320' fill='%231d262b'/%3E%3Crect x='470' y='320' width='110' height='60' fill='%2351606a'/%3E%3Cpolygon points='460,320 525,282 590,320' fill='%231d262b'/%3E%3C/g%3E%3Cg fill='%23f6dfa6'%3E%3Ccircle cx='30' cy='312' r='4'/%3E%3Ccircle cx='55' cy='306' r='4'/%3E%3Ccircle cx='80' cy='304' r='4'/%3E%3Ccircle cx='105' cy='306' r='4'/%3E%3Ccircle cx='130' cy='312' r='4'/%3E%3Ccircle cx='480' cy='312' r='4'/%3E%3Ccircle cx='505' cy='306' r='4'/%3E%3Ccircle cx='530' cy='304' r='4'/%3E%3Ccircle cx='555' cy='306' r='4'/%3E%3Ccircle cx='580' cy='312' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
.grid-work .plate[aria-label*="bakery"], .grid-work .plate[aria-label*="Border Bread"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450'%3E%3Crect width='600' height='450' fill='%237c8050'/%3E%3Cpolygon points='0,0 260,0 560,450 300,450' fill='%23f1e8b4' opacity='.18'/%3E%3Crect x='60' y='108' width='480' height='14' fill='%234b4a2b'/%3E%3Crect x='60' y='228' width='480' height='14' fill='%234b4a2b'/%3E%3Crect x='60' y='348' width='480' height='14' fill='%234b4a2b'/%3E%3Cg fill='%23c9aa62' stroke='%234b4a2b' stroke-width='3'%3E%3Cellipse cx='130' cy='88' rx='52' ry='20'/%3E%3Cellipse cx='250' cy='88' rx='46' ry='20'/%3E%3Cellipse cx='360' cy='88' rx='52' ry='20'/%3E%3Cellipse cx='470' cy='88' rx='44' ry='20'/%3E%3Cellipse cx='150' cy='208' rx='60' ry='20'/%3E%3Cellipse cx='290' cy='208' rx='48' ry='20'/%3E%3Cellipse cx='420' cy='208' rx='60' ry='20'/%3E%3Ccircle cx='140' cy='322' r='26'/%3E%3Ccircle cx='220' cy='322' r='26'/%3E%3Ccircle cx='300' cy='322' r='26'/%3E%3Ccircle cx='380' cy='322' r='26'/%3E%3Ccircle cx='460' cy='322' r='26'/%3E%3C/g%3E%3Cg stroke='%234b4a2b' stroke-width='3' fill='none'%3E%3Cpath d='M105 82 l12 8 M125 78 l12 8 M145 82 l12 8'/%3E%3Cpath d='M130 202 l12 8 M150 198 l12 8 M170 202 l12 8'/%3E%3C/g%3E%3Crect y='388' width='600' height='62' fill='%234b4a2b'/%3E%3C/svg%3E"); }
.tile { display: block; }
.tile.is-hidden { display: none; }
.tile .over { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 48px 20px 18px; color: var(--color-on-dark); background: linear-gradient(0deg, var(--color-scrim), transparent); opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.tile:hover .over, .tile:focus-visible .over { opacity: 1; transform: none; }
@media (hover: none) { .tile .over { opacity: 1; transform: none; } }
.tile .plate { cursor: pointer; }
.tile .plate:focus-visible { outline-offset: -4px; }
.tile-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; }
.tile-title { font-family: var(--display-font); font-size: 24px; line-height: 1.15; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 12px 18px; min-height: 44px; font: 500 13px/1 var(--body-font); letter-spacing: 0.06em; text-transform: uppercase; background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.chip:hover { background: var(--color-surface); }
.chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-contrast); }

/* lists */
.rows { border-top: 1px solid var(--color-border); }
.band-dark .rows, .band-dark .row { border-color: var(--color-border-on-dark); }
.row { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
@media (min-width: 768px) { .row { grid-template-columns: 1fr 2fr 80px; align-items: baseline; } .row--2 { grid-template-columns: 120px 1fr; } }
.facts { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; text-align: right; }

/* case study */
.case-hero { position: relative; }
.case-hero .plate { aspect-ratio: auto; height: 80vh; min-height: 420px; cursor: zoom-in; }
.case-title { padding: 48px 0 64px; }
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 4fr 8fr; gap: 64px; } .split--r { grid-template-columns: 8fr 4fr; } .sticky-col { position: sticky; top: 104px; align-self: start; } }
.lay { margin-top: 64px; display: grid; gap: 24px; }
@media (min-width: 768px) {
  .lay--pair { grid-template-columns: 1fr 1fr; }
  .lay--pair-uneven { grid-template-columns: 7fr 5fr; align-items: end; }
  .lay--trio { grid-template-columns: repeat(3, 1fr); }
  .lay--inset { padding: 0 12%; }
}
.quote-block { padding: 96px 0; text-align: left; }
.quote { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -0.02em; max-width: 960px; margin: 0; }
.filmstrip { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--color-muted) transparent; }
.filmstrip .fig { flex: 0 0 82vw; scroll-snap-align: start; }
@media (min-width: 768px) { .filmstrip .fig { flex-basis: 52vw; } }
.next { display: block; padding: 96px 0; }
.next .h1 { font-size: clamp(48px, 9vw, 140px); transition: color var(--dur-link); }
.next:hover .h1 { color: var(--color-accent-on-dark); }

/* hero */
.hero { padding: 48px 0 64px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--color-border); }
@media (min-width: 768px) { .hero { padding: 96px 0 96px; } }
.about-teaser { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .about-teaser { grid-template-columns: 5fr 7fr; gap: 96px; } }
.cta-link { font-family: var(--display-font); font-weight: 300; font-size: clamp(32px, 7vw, 104px); line-height: 1; letter-spacing: -0.03em; word-break: break-word; }

/* form */
.form { display: grid; gap: 32px; max-width: 640px; }
.field label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 0; font: 400 17px/1.4 var(--body-font); color: var(--color-text); background: transparent; border: 0; border-bottom: 1px solid var(--color-field); border-radius: 0; transition: border-color var(--dur-fast); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--color-primary); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--color-accent); margin-bottom: -1px; }
.field.invalid input, .field.invalid textarea { border-bottom-color: var(--color-error); }
.msg-err { display: none; margin-top: 6px; font-size: 14px; color: var(--color-error); }
.field.invalid .msg-err { display: block; }
.alert { display: none; padding: 16px 20px; border-left: 3px solid var(--color-success); background: var(--color-success-bg); }
.alert.show { display: block; }
.alert--err { border-left-color: var(--color-error); background: var(--color-error-bg); }
.alert strong { display: block; }

/* footer */
.foot { padding: 96px 0 32px; }
.foot-grid { display: grid; gap: 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--color-border-on-dark); }
@media (min-width: 768px) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
.foot ul { list-style: none; margin: 8px 0 0; padding: 0; }
.foot li { padding: 4px 0; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 56px 16px 24px; background: var(--color-lightbox); color: var(--color-on-dark); opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard); }
.lb.open { display: flex; }
.lb.show { opacity: 1; }
.lb-stage { width: min(92vw, 1100px); max-height: 74vh; display: flex; justify-content: center; }
.lb-stage .plate { width: auto; height: auto; max-width: 100%; max-height: 74vh; aspect-ratio: var(--ar, 3 / 2); cursor: default; flex: 0 1 auto; }
.lb-btn { position: absolute; background: none; border: 0; color: var(--color-on-dark); font: 500 12px/1 var(--body-font); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 12px; min-height: 44px; cursor: pointer; }
.lb-btn:hover { color: var(--color-accent-on-dark); }
.lb-close { top: 8px; right: 8px; } .lb-prev { left: 4px; bottom: 8px; } .lb-next { right: 4px; bottom: 8px; }
.lb-cap { text-align: center; max-width: 640px; }
@media (min-width: 768px) { .lb-prev, .lb-next { bottom: auto; top: 50%; } }

.to-top { display: inline-block; margin-top: 24px; }

/* photographic plates */
.img-salt, .grid-work .plate.img-salt { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403656215-7872eb75172266b8.png"); background-size: cover; background-position: center; }
.img-ferry, .grid-work .plate.img-ferry { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403672059-6fb2d1a8a0469833.png"); background-size: cover; background-position: center; }
.img-tailor, .grid-work .plate.img-tailor { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403699612-b1043993638dcdd4.png"); background-size: cover; background-position: center; }
.img-salt, .grid-work .plate.img-salt, .img-ferry, .grid-work .plate.img-ferry, .img-tailor, .grid-work .plate.img-tailor { background-position: center top; }
.img-chalk, .img-bolts, .img-iron, .img-salt2, .img-ferry2, .img-ferry3, .img-ferry4, .img-salt3, .img-ferry5, .img-ferry6, .img-ferry7, .img-salt4, .img-salt5 { background-size: cover; background-position: center top; }
.img-chalk { background-image
: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403848673-a206ec9c64f6f12a.png"); }
.img-bolts { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403864879-139855f48818c9ce.png"); }
.img-iron { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403885079-da1dafaf8808f0e0.png"); }
.img-salt2 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403903115-67891809e26c53c7.png"); }
.img-ferry2 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792403918383-bfc44ce27f7b1721.png"); }

.img-ferry3 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404302436-507fd523603f82de.png"); }
.img-ferry4 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404320614-7a23fa500eb47514.png"); }
.img-salt3 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404338835-aa483d4d8f96dcb1.png"); }

.img-ferry5 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404470720-54bc84024e513910.png"); }
.img-ferry6 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404485583-57dbddbf8c0bfa78.png"); }
.img-ferry7 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404500006-c450a126d17e8035.png"); }
.img-salt4 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404520883-359693b56bed17c4.png"); }
.img-salt5 { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404537887-02c472fb70608982.png"); }


/* magazine covers (home work grid) */
.grid-work .plate.cover { position: relative; aspect-ratio: 3 / 4; background-size: cover; background-position: center top; }
.grid-work .plate.cover::before { content: attr(data-issue); position: absolute; top: 16px; left: 16px; z-index: 2; font: 500 12px/1 var(--body-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-dark); }
.grid-work .plate.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-scrim), transparent 28%); opacity: 0.7; pointer-events: none; }
.grid-work .plate.cover-salt { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404069814-35a23f2cb944b68f.png"); }
.grid-work .plate.cover-ferry { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404089520-7db34f3db8df84b0.png"); }
.grid-work .plate.cover-tailor { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404110091-a646352fc8cfeea7.png"); }
.grid-work .plate.cover-kiln { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404132698-5d71463e4ac0a37f.png"); }
.grid-work .plate.cover-winter { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404151433-a06058452dc5c10c.png"); }

.grid-work .plate.cover-bread { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404255481-ed0a0e70fa2c8eb6.png"); }


/* work page archive covers */
.img-kiln, .img-winter, .img-bread, .grid-work .plate.img-kiln, .grid-work .plate.img-winter, .grid-work .plate.img-bread { background-size: cover; background-position: center top; }
.img-kiln, .grid-work .plate.img-kiln { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404132698-5d71463e4ac0a37f.png"); }
.img-winter, .grid-work .plate.img-winter { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404151433-a06058452dc5c10c.png"); }
.img-bread, .grid-work .plate.img-bread { background-image: url("https://uc.uxpin.com/playground/124f436f-fcde-4d7f-8423-1e261a453485/images/1792404255481-ed0a0e70fa2c8eb6.png"); }

/* motion safety */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .frame:hover .plate { transform: none; }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}
:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.flex-wrap {
  flex-wrap: wrap;
}
.border {
  border-width: 1px;
}
.bg-bg {
  background-color: var(--color-bg);
}
.font-body {
  font-family: var(--body-font);
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.text-text {
  color: var(--color-text);
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}