/* Sakk. A sheet of warm paper, black type, tinted cards. */

@font-face { font-family: "Lama Sans"; src: url("../fonts/lama-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lama Sans"; src: url("../fonts/lama-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lama Sans"; src: url("../fonts/lama-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lama Sans"; src: url("../fonts/lama-sans-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Gene"; src: url("../fonts/gene-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hibr"; src: url("../fonts/hibr-vf.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0, U+00AB, U+00BB, U+00D7, U+0600-06FF, U+200C-200F, U+2013-2014, U+2018-201D, U+2022, U+2026, U+FDF2; }

:root {
	--bg: #f4f0e7;
	--paper: #f4f0e7;
	--ink: #000000;
	--ink-2: #6f6f6f;
	--line: #e6e6e6;
	--accent: #efece4;      /* hero and call to action blocks; override per font with sakk_accent */
	--accent-ink: #000000;
	--ui: "Hibr", "Lama Sans", system-ui, -apple-system, sans-serif;  /* Hibr for Arabic, Lama Sans fills Latin letters */
	--font: var(--ui);
	--gutter: clamp(16px, 4vw, 72px);
	--max: 1440px;
	--radius: 28px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--cover-ratio: 3 / 2;  /* font cover images in the grid; export covers at 1500 x 1000 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font: 400 17px/1.7 var(--ui); font-feature-settings: "kern", "liga";
	-webkit-font-smoothing: antialiased;
}
/* Paper: fine grain, a few fibres and a soft mottle, fixed behind the page */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .14' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .28 0 0 0 1 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .8 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); background-size: 300px, 500px, 900px; opacity: .12; mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }

/* Header: logo centred on load, slides to the start edge on scroll */
.site-header {
	position: sticky; top: 0; z-index: 50; height: 72px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 var(--gutter); background: rgb(244 240 231 / .9);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.site-header { transition: background-color .3s, backdrop-filter .3s; }
.site-header:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); font-weight: 700; font-size: 22px; white-space: nowrap; transition: inset-inline-start .5s var(--ease), transform .5s var(--ease); }
[dir=ltr] .brand { transform: translate(-50%, -50%); }
.brand img { height: 36px; width: auto; }
.sakk-logo { display: block; width: auto; fill: currentColor; }
.wordmark { display: block; font-family: "Gene", var(--ui); font-weight: 700; font-size: 20px; letter-spacing: .3em; padding-left: .3em; direction: ltr; line-height: 1; }
.brand { color: var(--ink); line-height: 0; }
.brand .sakk-logo { height: 30px; }
.site-header.scrolled .brand { inset-inline-start: var(--gutter); transform: translate(0, -50%); }
.nav { display: flex; gap: 34px; align-items: center; margin-inline-start: auto; }
.nav li, .foot-nav li { list-style: none; margin: 0; padding: 0; display: contents; }
.nav a { font-size: 18px; color: #3d3a35; transition: color .2s; }
.nav a:hover, .nav a.current-menu-item { color: var(--ink); }
.sakk-cart { color: var(--ink) !important; font-weight: 600; }
.sakk-cart span { display: inline-block; min-width: 20px; text-align: center; margin-inline-start: 4px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12px; line-height: 20px; }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 8px; width: 24px; height: 2px; background: var(--ink); content: ""; transition: transform .3s var(--ease); }
.nav-toggle span { top: 19px; } .nav-toggle span::before { top: -7px; left: 0; } .nav-toggle span::after { top: 7px; left: 0; }
@media (max-width: 760px) {
	.nav-toggle { display: block; margin-inline-start: auto; }
	.brand, .site-header.scrolled .brand { inset-inline-start: var(--gutter); transform: translate(0, -50%); }
	.nav { position: fixed; inset: 72px 0 0; flex-direction: column; justify-content: center; gap: 28px; background: var(--bg); transform: translateY(-110%); transition: transform .4s var(--ease); margin: 0; }
	.nav a { font-size: 28px; }
	body.nav-open .nav { transform: none; }
	body.nav-open .nav-toggle span { background: transparent; }
	body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
	body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
}

/* Blocks: every section is a rounded card inside the page gutter */
.site-main { padding: 0 var(--gutter) var(--gutter); max-width: var(--max); margin-inline: auto; }
.block { border-radius: var(--radius); padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); margin-top: 16px; }
.block-accent { background: var(--accent); color: var(--accent-ink); }
.block-dark { background: #000; color: #fff; }
.block-dark ::selection { background: #fff; color: #000; }
.kicker { color: inherit; opacity: .55; font-size: 14px; margin: 0 0 14px; }
.h-big { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.25; font-weight: 700; max-width: 22ch; margin-bottom: 40px; }
.btn { display: inline-block; padding: 13px 24px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; transition: transform .2s var(--ease), opacity .2s; border: 0; cursor: pointer; }
.btn:hover { transform: translateY(-1px); opacity: .88; }

/* Home */
.hero { min-height: 58vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 48px 0; }
.hero-title { font-size: clamp(28px, 4.2vw, 68px); line-height: 1.25; font-weight: 700; max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.hairline { border: 0; border-top: 1px solid var(--ink); margin: 0; }
@media (min-resolution: 2dppx) { .hairline { border-top-width: .5px; } }

/* Home: a fold in the paper between the slogan and the fonts */
.fold { height: 26px; width: 100vw; margin-inline: calc(50% - 50vw); pointer-events: none;
	background: linear-gradient(180deg, rgb(255 255 255 / 0) 0, rgb(255 255 255 / .45) 46%, rgb(120 105 85 / .12) 54%, rgb(120 105 85 / 0) 100%); }

/* Home cards: the font's colour mixed into the paper, its name set in the font, one large pale letter behind */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-block: clamp(40px, 4vw, 64px); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 330px; padding: 28px 28px 26px; border-radius: 34px; background: color-mix(in srgb, var(--c, #D9B98A) 46%, #fbf8f2); color: #111; transition: transform .5s var(--ease); }
.tile:hover { transform: translateY(-4px); }
.tile-glyph { position: absolute; left: -10px; top: -40px; font-size: 300px; line-height: 1; color: rgb(255 255 255 / .38); pointer-events: none; transition: transform .8s var(--ease); }
.tile:hover .tile-glyph { transform: translateY(-6px) scale(1.03); }
.tile-label { position: relative; font-size: 15px; color: #222; }
.tile-name { position: relative; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.25; margin-top: 6px; }
.tile-foot { position: relative; margin-top: auto; display: flex; align-items: center; gap: 18px; }
.tile-go { flex: none; width: 58px; height: 58px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease); }
.tile:hover .tile-go { transform: translateX(-4px); }
.tile-price { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.tile-price i { display: block; height: 1.5px; background: rgb(0 0 0 / .18); }
.hero-sub { margin-top: 24px; opacity: .65; font-size: clamp(17px, 1.4vw, 21px); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; }
.sec-head h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); }
.more { color: var(--ink-2); font-size: 15px; }
.more:hover { color: var(--ink); }
.page-head { padding: clamp(40px, 6vw, 96px) 0 24px; }
.page-head h1 { font-size: clamp(36px, 5vw, 72px); font-weight: 700; }
.page-head time, .page-head .work-type { display: block; color: var(--ink-2); margin-top: 12px; }

/* Font grid: cover image cards, four across */
.block.fonts { padding-inline: 0; }
.block.fonts .sec-head { padding-inline: 2px; }
.font-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(16px, 2.2vw, 36px); }
@media (max-width: 1200px) { .font-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .font-grid { grid-template-columns: 1fr; } }
.font-card { display: flex; flex-direction: column; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--bg); }
.font-cover { display: block; aspect-ratio: var(--cover-ratio); overflow: hidden; background: var(--accent); border-bottom: 1px solid var(--ink); }
.font-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.font-card:hover .font-cover img { transform: scale(1.025); }
.font-cover-empty { display: flex; height: 100%; align-items: center; justify-content: center; padding: 8%; font-size: clamp(28px, 3vw, 44px); font-weight: 700; line-height: 1.2; text-align: center; }
.font-card-meta { display: flex; align-items: baseline; gap: 16px; padding: 18px 20px 34px; font-size: 17px; }
.font-card-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-card-name > span:first-child { font-weight: 500; }
.font-card-tag { color: var(--ink-2); }
.font-price { flex: none; font-size: 19px; font-weight: 500; }
.font-price .woocommerce-Price-currencySymbol { margin-inline-end: 1px; }
.fonts.free .font-price { color: var(--ink-2); }

/* Prose */
.prose { max-width: 66ch; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.9; }
.prose h2, .prose h3 { margin: 2em 0 .6em; }
.prose img, .prose figure { margin: 2.5em 0; max-width: none; width: 100%; border-radius: 20px; }

/* Font page */
.font-hero { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; position: relative; }
.font-big { font-family: var(--font); font-size: clamp(52px, 9.5vw, 168px); line-height: 1.15; font-weight: 700; max-width: 14ch; }
.hero-cta { position: absolute; bottom: clamp(24px, 4vw, 48px); inset-inline-start: clamp(24px, 5vw, 80px); }
@media (max-width: 640px) { .hero-cta { position: static; margin-top: 32px; align-self: flex-start; } }

.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }
.story-grid .h-big { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }
.stat-n { display: block; font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1; }
.stat-t { display: block; color: var(--ink-2); font-size: 15px; margin-top: 10px; max-width: 26ch; }

.cards { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(clamp(24px, 5vw, 80px) * -1); padding: 0 clamp(24px, 5vw, 80px); }
.cards::-webkit-scrollbar { display: none; }
.card { flex: 0 0 min(78vw, 720px); margin: 0; scroll-snap-align: start; border-radius: 24px; overflow: hidden; background: #f3f3f3; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.weight-list { display: flex; flex-direction: column; }
.weight-row { display: grid; grid-template-columns: 9ch 1fr; gap: 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.weight-row:last-child { border-bottom: 1px solid var(--line); }
.weight-name { color: var(--ink-2); font-size: 14px; }
.weight-text { font-family: var(--font); font-size: clamp(28px, 4.2vw, 60px); line-height: 1.3; }

/* FAQ: two columns of question + answer, no accordion */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.faq-item p { color: var(--ink-2); margin: 0; max-width: 46ch; }

/* Buy: accent card, licence cards, one button */
.buy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.buy-lead { font-size: clamp(20px, 2.2vw, 30px); margin: 0; opacity: .7; }
.buy-title { font-family: var(--font); font-size: clamp(44px, 6vw, 96px); font-weight: 700; line-height: 1.4; margin: 8px 0 32px; }
.licences { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; width: min(100%, 760px); margin-bottom: 20px; text-align: start; }
.licence { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.7); border: 2px solid transparent; cursor: pointer; transition: border-color .2s, background .2s; }
.licence:hover { background: #fff; }
.licence input { position: absolute; opacity: 0; pointer-events: none; }
.licence:has(input:checked) { border-color: #000; background: #fff; }
.licence-name { font-weight: 700; font-size: 17px; }
.licence-desc { font-size: 13px; opacity: .65; min-height: 1.4em; }
.licence-price { font-weight: 700; margin-top: 8px; font-size: 18px; }
.buy-form .variations, .buy-form .reset_variations, .buy-form .quantity, .buy-form .woocommerce-variation-description { display: none !important; }
.buy-form .woocommerce-variation-price { display: none; }
.buy-form .single_add_to_cart_button, .buy-form .button, .btn-big { border: 0; border-radius: 99px; background: #000; color: #fff; padding: 16px 40px; cursor: pointer; font-weight: 700; font-size: 17px; }
.buy-form .single_add_to_cart_button.disabled { opacity: .4; }
.buy-form .woocommerce-variation-add-to-cart { display: flex; justify-content: center; }
.buy-note { margin: 16px 0 0; font-size: 14px; opacity: .65; }
.license-notes { margin: 20px 0 0; max-width: 60ch; opacity: .6; font-size: 14px; }

/* Checkout: one column, plain */
.woocommerce-checkout .site-main { max-width: 720px; padding-top: 40px; }
.woocommerce-checkout .page-head h1 { font-size: 32px; }
.woocommerce-checkout .woocommerce-form-coupon-toggle, .woocommerce-checkout .woocommerce-form-login-toggle { font-size: 14px; color: var(--ink-2); margin-bottom: 20px; }
.woocommerce-checkout .woocommerce-info { border: 0; padding: 0; margin: 0 0 12px; background: none; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout .form-row { margin: 0 0 16px; }
.woocommerce-checkout label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.woocommerce-checkout .form-row .required { display: none; }
.woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font-size: 16px; width: 100%; }
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding: 0; }
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
.woocommerce-checkout .description { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.woocommerce-checkout h3 { font-size: 18px; margin: 32px 0 16px; }
.woocommerce-checkout #order_review { background: #f6f6f6; border-radius: 20px; padding: 24px; }
.woocommerce-checkout table.shop_table { width: 100%; border-collapse: collapse; font-size: 15px; }
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: start; }
.woocommerce-checkout table.shop_table tfoot tr:last-child th, .woocommerce-checkout table.shop_table tfoot tr:last-child td { border: 0; font-weight: 700; font-size: 18px; }
.woocommerce-checkout .wc_payment_methods { list-style: none; padding: 0; margin: 16px 0; }
.woocommerce-checkout .wc_payment_method { padding: 10px 0; }
.woocommerce-checkout .wc_payment_method label { display: inline; color: var(--ink); font-size: 16px; margin-inline-start: 6px; }
.woocommerce-checkout .payment_box { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.woocommerce-checkout #place_order { width: 100%; margin-top: 12px; padding: 16px; font-size: 17px; border-radius: 99px; }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 12px; color: var(--ink-2); }
.woocommerce-order-received .site-main { max-width: 720px; padding-top: 40px; }
.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 28px; font-weight: 700; margin-bottom: 24px; }
.woocommerce-order-received .woocommerce-thankyou-order-details { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; color: var(--ink-2); font-size: 14px; }
.woocommerce-order-received .woocommerce-thankyou-order-details strong { display: block; color: var(--ink); font-size: 16px; }
.woocommerce-order-received .download-file .button { padding: 8px 16px; font-size: 14px; }

/* Tech details */
.tech { padding: 24px 0 0; }
.tech details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.tech summary { cursor: pointer; list-style: none; color: var(--ink-2); display: flex; justify-content: space-between; }
.tech summary::-webkit-details-marker { display: none; }
.tech summary::after { content: "+"; }
.tech details[open] summary::after { content: "−"; }
.tech-list { display: grid; grid-template-columns: 12ch 1fr; gap: 10px 24px; margin: 24px 0 0; font-size: 15px; max-width: 70ch; }
.tech-list dt { color: var(--ink-2); } .tech-list dd { margin: 0; }

/* Posts */
.post-row { display: flex; justify-content: space-between; padding: 20px 0; border-top: 1px solid var(--line); }
.post-row time { color: var(--ink-2); }
.pagination, .woocommerce-pagination { padding: 40px 0; display: flex; gap: 16px; color: var(--ink-2); }

/* WooCommerce cart/checkout */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main { padding-top: 48px; max-width: 1100px; }
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { text-align: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button { border: 0; border-radius: 99px; background: #000; color: #fff; padding: 12px 24px; cursor: pointer; font-weight: 600; }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select { width: 100%; background: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-error, .woocommerce-info { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 24px; list-style: none; }

/* Footer: the wordmark centred, description and year on either side */
.site-footer { position: relative; padding: 46px var(--gutter) 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: var(--max); margin-inline: auto; color: #6a655c; font-size: 13px; }
.foot-side:last-child { text-align: left; }
.foot-brand { color: var(--ink); line-height: 0; }
.foot-brand .sakk-logo { height: 22px; }
@media (max-width: 560px) { .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; } .foot-side:last-child { text-align: center; } }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
	.reveal.in { opacity: 1; transform: none; }
}

.woocommerce-checkout .woocommerce-message { display: none; }
.woocommerce-checkout .select2-container--default .select2-selection--single { border: 1px solid var(--line); border-radius: 12px; }

/* UI type in Hibr: display sizes light and larger, small text a touch heavier */
.hero-title { font-weight: 250; font-size: clamp(34px, 5.4vw, 88px); line-height: 1.2; }
.h-big, .page-head h1 { font-weight: 300; }
.sec-head h2 { font-weight: 350; }
.stat-n { font-weight: 200; font-size: clamp(44px, 5vw, 72px); }
.faq-item h3 { font-weight: 600; }
.nav a, .tile-label, .kicker, .stat-t, .weight-name { font-weight: 500; }

/* Shop page reuses the home tiles inside the block, without the extra vertical padding */
.tiles-shop { padding-block: 0; }


/* Cart: a bag in the header, a sheet that slides in from the edge */
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-size: 18px; font-weight: 500; }
.cart-btn b { position: absolute; top: -7px; inset-inline-start: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--ink); color: #fff; font: 600 11px/18px "Lama Sans", var(--ui); text-align: center; }
.cart-btn b:empty { display: none; }
.cart-veil { position: fixed; inset: 0; z-index: 80; background: rgb(20 18 14 / .16); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.cart { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 90; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--sheet); border-inline-start: 1px solid var(--rule); transform: translateX(-102%); transition: transform .45s var(--ease); }
body.cart-open .cart { transform: none; }
body.cart-open .cart-veil { opacity: 1; pointer-events: auto; }
.cart-head { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 28px; border-bottom: 1px solid var(--rule); }
.cart-head h2 { font-size: 20px; font-weight: 400; }
.cart-head h2 span { color: var(--ink-2); margin-inline-start: 6px; font-family: "Lama Sans", var(--ui); font-size: 15px; }
.cart-x { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--ink); }
.cart-items { flex: 1; overflow: auto; list-style: none; margin: 0; padding: 8px 28px; }
.ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.ci-sw { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1; background: color-mix(in srgb, var(--c) 46%, #fbf8f2); overflow: hidden; }
.ci-name { display: block; font-size: 22px; line-height: 1.3; }
.ci-lic { display: flex; gap: 14px; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.ci-lic button { background: none; border: 0; padding: 0; color: var(--ink-2); font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ci-price { font-family: "Lama Sans", var(--ui); font-size: 17px; }
.cart-empty { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ink-2); }
.cart.is-empty .cart-items, .cart.is-empty .cart-foot { display: none; }
.cart.is-empty .cart-empty { display: flex; }
.cart-foot { padding: 22px 28px 28px; border-top: 1px solid var(--rule); }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.cart-sum strong { font-family: "Lama Sans", var(--ui); font-size: 22px; font-weight: 500; }
.cart-note { margin: 6px 0 20px; font-size: 13px; color: var(--ink-2); }
.cart-go { display: block; width: 100%; padding: 16px; border: 0; border-radius: 99px; background: #000; color: #fff; font-size: 17px; font-weight: 600; cursor: pointer; }
.cart-more { display: block; margin-top: 14px; text-align: center; font-size: 15px; color: var(--ink-2); background: none; border: 0; width: 100%; cursor: pointer; }
.toast { position: fixed; bottom: 28px; inset-inline-start: 50%; transform: translate(50%, 20px); z-index: 70; padding: 12px 20px; border-radius: 99px; background: #000; color: #fff; font-size: 15px; opacity: 0; transition: opacity .3s, transform .3s var(--ease); }


/* Type scale: one display size, one title, one body, one meta. Everything else derives from these. */
:root {
  --bg: #ffffff; --paper: #f4f0e7; --sheet: #ffffff;
  --ink: #111111; --ink-2: #5d5951; --ink-3: #9d988f; --rule: rgb(40 32 20 / .10);
  --fs-display: clamp(34px, 4.6vw, 76px); --fs-title: 30px; --fs-lead: 17px; --fs-body: 15px; --fs-meta: 13px;
  --side: 0px; --pw: 360px; --r-tile: 24px;
}
html, body { overflow-x: clip; }
body { background: var(--bg); }
body::before { display: none; }
.tile { border-radius: var(--r-tile); min-height: 0; aspect-ratio: 5 / 6; background: color-mix(in srgb, var(--c) 46%, #ffffff); }
.tile-glyph { font-size: 290px; }
.tile-name { font-size: clamp(30px, 2.8vw, 42px); }
.tile-go { width: 52px; height: 52px; }

/* Paper sheet with a crease */
.hero { position: relative; isolation: isolate; border-radius: 4px; background-color: var(--paper); box-shadow: 0 1px 1px rgb(60 45 25 / .06), 0 2px 6px rgb(60 45 25 / .05), 0 24px 60px -20px rgb(60 45 25 / .14); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .14' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .28 0 0 0 1 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .8 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); background-size: 300px, 500px, 900px; opacity: .13; mix-blend-mode: multiply; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 49.6%, rgb(255 255 255 / .5) 50%, rgb(120 105 85 / .07) 50.4%, transparent 53%); }
.hero-title { font-size: var(--fs-display); font-weight: 250; }

/* Shell: the part that the panel pushes aside */
.shell { position: relative; margin-inline-start: var(--side); padding: 0 28px 28px; will-change: transform; }
.chips { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; padding: 18px 0 14px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip { border: 0; padding: 7px 15px; border-radius: 99px; background: rgb(0 0 0 / .05); color: var(--ink-2); font-size: var(--fs-body); cursor: pointer; transition: background .2s, color .2s; }
.chip:hover { background: rgb(0 0 0 / .09); color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; }
.tiles { gap: 16px; padding-block: 4px 0; }
.tile { transition: transform .5s var(--ease), opacity .3s; }
.tile.out { display: none; }
.tile.hide { visibility: hidden; }

/* ---------- Layout A: top bar ---------- */
.lay-A .site-header { position: sticky; top: 0; }
.lay-A .hero { margin: 8px 0 6px; min-height: 46vh; }
.lay-A .chips { top: 72px; }
.lay-A .site-header.scrolled { background: rgb(255 255 255 / .92); }
.lay-A .site-footer, .lay-C .site-footer { padding-inline: 0; }

/* ---------- Layouts B and C: sections in a side column ---------- */
.lay-B, .lay-C { --side: 248px; }
.side { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 40; width: var(--side); display: flex; flex-direction: column; gap: 30px; padding: 26px 26px 24px; background: var(--bg); }
.side .wordmark { font-size: 17px; }
.side-brand { color: var(--ink); align-self: flex-start; padding-top: 6px; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: var(--fs-meta); color: var(--ink-3); margin-bottom: 6px; }
.side-group a, .side-group button { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 16px; color: var(--ink-2); background: none; border: 0; text-align: start; cursor: pointer; transition: color .2s; }
.side-group a:hover, .side-group button:hover { color: var(--ink); }
.side-group a.on { color: var(--ink); }
.side-group a.on::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.side-group .count { font: 500 12px "Lama Sans", var(--ui); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: #fff; display: inline-grid; place-items: center; }
.side-group .count:empty { display: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.side-slogan { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); font-weight: 400; max-width: 16ch; }
.side-rule { height: 1px; background: var(--rule); }
.side-meta { display: flex; justify-content: space-between; font-size: var(--fs-meta); color: var(--ink-3); }
.lay-C .hero { margin: 18px 0 6px; min-height: 300px; }
.lay-C .hero-title { font-size: clamp(30px, 3.6vw, 58px); }
.lay-B .shell { padding-top: 0; }
.lay-B .site-footer, .lay-C .site-footer { display: none; }

/* ---------- Font view ---------- */
.fv-veil { position: fixed; inset: 0; inset-inline-start: var(--side); z-index: 37; background: rgb(250 250 248 / .38); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); }
body.fv-on .fv-veil { opacity: 1; pointer-events: auto; }
.fv-panel { position: fixed; top: 0; bottom: 0; inset-inline-start: var(--side); z-index: 38; width: var(--pw); transform: translateX(var(--pw)); display: flex; flex-direction: column; padding: 22px 26px 24px; background: var(--paper); overflow: auto; scrollbar-width: none; visibility: hidden; }
.lay-A.fv-on .site-header, .lay-A.fv-lock .site-header { z-index: 30; }
.fv-panel.live { visibility: visible; }
.fv-panel::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .14' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .28 0 0 0 1 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .8 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); background-size: 300px, 500px, 900px; opacity: .12; mix-blend-mode: multiply; }
.fv-panel > * { position: relative; }
.fv-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 34px; }
.fv-bar .sp { flex: 1; }
.fv-b { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgb(0 0 0 / .06); color: var(--ink); cursor: pointer; transition: background .2s; }
.fv-b:hover { background: rgb(0 0 0 / .12); }
.fv-count { font: 500 var(--fs-meta) "Lama Sans", var(--ui); color: var(--ink-3); margin-inline-end: 4px; }
.fv-body { display: flex; flex-direction: column; flex: 1; transition: opacity .25s var(--ease), transform .4s var(--ease); }
.fv-body.swap { opacity: 0; transform: translateY(6px); }
.fv-label { font-size: var(--fs-meta); color: var(--ink-3); }
.fv-name { font-size: var(--fs-title); font-weight: 300; line-height: 1.25; margin: 2px 0 10px; }
.fv-desc { font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2); margin: 0 0 26px; }
.fv-specs { margin: 0 0 26px; font-size: var(--fs-meta); }
.fv-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--rule); }
.fv-specs div:last-child { border-bottom: 1px solid var(--rule); }
.fv-specs dt { color: var(--ink-3); }
.fv-specs dd { margin: 0; color: var(--ink); text-align: left; }
.fv-cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.fv-lic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fv-lic label { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 11px; border-radius: 12px; background: rgb(255 255 255 / .55); border: 1.5px solid transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.fv-lic label:hover { background: rgb(255 255 255 / .9); }
.fv-lic label:has(input:checked) { background: #fff; border-color: var(--ink); }
.fv-lic input { position: absolute; opacity: 0; pointer-events: none; }
.fv-lic b { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.fv-lic em { font: 500 18px "Lama Sans", var(--ui); font-style: normal; color: var(--ink); }
.fv-note { font-size: var(--fs-meta); color: var(--ink-3); margin: 0; min-height: 1.6em; }
.fv-add { width: 100%; padding: 15px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font-size: var(--fs-body); font-weight: 600; cursor: pointer; transition: transform .2s var(--ease), background .3s; }
.fv-add:hover { transform: translateY(-1px); }
.fv-add.done { background: #34302a; }
.fv-page { text-align: center; font-size: var(--fs-meta); color: var(--ink-3); }
.fv-page:hover { color: var(--ink); }

/* Stage: a fixed box whose size is driven by the spring; the canvas inside is drawn at full size and scaled */
.fv-stage { position: fixed; z-index: 47; overflow: hidden; border-radius: var(--r-tile); background: color-mix(in srgb, var(--c) 46%, #ffffff); display: none; transition: background-color .5s var(--ease); }
.fv-stage.live { display: block; }
.fv-canvas { position: absolute; top: 0; right: 0; transform-origin: top right; container-type: inline-size; }
.fv-slide { position: absolute; inset: 0; padding: 6cqw 6.5cqw 9cqw; display: flex; flex-direction: column; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.fv-slide.on { opacity: 1; pointer-events: auto; }
.s1-glyph { position: absolute; left: -3cqw; top: -14cqw; font-size: 100cqw; line-height: 1; color: rgb(255 255 255 / .38); pointer-events: none; }
.s1-label { position: relative; font-size: 1.9cqw; color: #222; font-weight: 500; }
.s1-name { position: relative; font-size: 15cqw; line-height: 1.2; margin-top: .4cqw; }
.s1-line { position: relative; margin-top: auto; font-size: 4.3cqw; line-height: 1.5; max-width: 16ch; color: #1a1a1a; }
.s2 { justify-content: center; gap: 2cqw; color: #141414; }
.s2 .w1 { font-size: 9cqw; line-height: 1.3; }
.s2 .w2 { font-size: 4.6cqw; line-height: 1.45; max-width: 22ch; }
.s2 .w3 { font-size: 2.3cqw; line-height: 2; max-width: 46ch; }
.s2 .sz { display: block; font: 500 1.3cqw "Lama Sans", var(--ui); color: rgb(0 0 0 / .45); margin-bottom: .2cqw; }
.s3 { justify-content: center; }
.s3-grid { display: grid; grid-template-columns: repeat(9, 1fr); border-top: 1px solid rgb(0 0 0 / .1); border-right: 1px solid rgb(0 0 0 / .1); }
.s3-grid span { display: grid; place-items: center; aspect-ratio: 1.15; font-size: 5.4cqw; border-left: 1px solid rgb(0 0 0 / .1); border-bottom: 1px solid rgb(0 0 0 / .1); }
.fv-nav { position: absolute; bottom: 3cqw; inset-inline: 6.5cqw; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .3s var(--ease); }
.fv-stage.ready .fv-nav { opacity: 1; }
.fv-dots { display: flex; gap: 6px; flex: 1; }
.fv-dots button { width: 22px; height: 4px; border-radius: 4px; border: 0; padding: 0; background: rgb(0 0 0 / .18); cursor: pointer; transition: width .4s var(--ease), background .3s; }
.fv-dots button.on { width: 44px; background: #111; }
.fv-nav .fv-b { background: rgb(255 255 255 / .55); }
.fv-nav .fv-b:hover { background: #fff; }
.fv-canvas.swap .fv-slide.on { opacity: 0; }
body.fv-lock { overflow: hidden; }

/* ---------- Cart: clear hierarchy ---------- */
.cart-btn { font-size: 16px; }
.cart { background: var(--sheet); }
.cart-head { height: 76px; padding: 0 28px; }
.cart-head h2 { font-size: 20px; font-weight: 500; }
.cart-head h2 span { font-size: var(--fs-meta); color: var(--ink-3); }
.ci-name { font-size: 22px; }
.ci-lic { font-size: var(--fs-meta); color: var(--ink-3); }
.ci-lic button { font-size: var(--fs-meta); color: var(--ink-3); }
.ci-price { font-size: 16px; }
.cart-empty { gap: 0; padding: 0 40px; text-align: center; color: var(--ink); }
.cart-empty svg { color: var(--ink-3); margin-bottom: 22px; }
.cart-empty strong { font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.cart-empty p { font-size: var(--fs-body); color: var(--ink-3); margin: 0 0 26px; max-width: 26ch; line-height: 1.7; }
.cart-empty .cart-more { width: auto; margin: 0; padding: 11px 22px; border: 1px solid var(--ink); border-radius: 99px; color: var(--ink); font-size: var(--fs-meta); font-weight: 600; }
.cart-empty .cart-more:hover { background: var(--ink); color: #fff; }
.cart-sum span { font-size: var(--fs-body); color: var(--ink-2); }
.cart-note { font-size: var(--fs-meta); color: var(--ink-3); }
.cart-go { font-size: var(--fs-body); }
.cart-foot .cart-more { font-size: var(--fs-meta); color: var(--ink-3); }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .lay-B, .lay-C { --side: 0px; }
  .side { position: sticky; flex-direction: row; align-items: center; height: auto; bottom: auto; width: auto; padding: 16px 20px; gap: 20px; }
  .side-group:not(.side-main), .side-foot, .side-label { display: none; }
  .side-main { flex-direction: row; gap: 16px; margin-inline-start: auto; }
  .shell { padding: 0 16px 24px; }
  .chips { overflow-x: auto; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .fv-panel { inset: auto 0 0 0; width: auto; height: 52vh; transform: translateY(100%); border-radius: 22px 22px 0 0; }
}


:root { --r-tile: 12px; }
.hero { background: none; box-shadow: none; border-radius: 10px; overflow: visible; margin: 18px 0 0; min-height: 300px; }
.hero::before, .hero::after { display: none; }
.hero-title { font-size: clamp(30px, 3.6vw, 58px); }
.chips { padding-top: 22px; }
.tile-go { width: 48px; height: 48px; }
.fv-lic label { border-radius: 8px; }
.side-slogan { display: none; }
.fv-panel { background: #f7f5f0; }
.fv-panel::before { display: none; }

/* Separator A: the slogan on a flat, very light warm tint */
.sep-A .hero { background: #f6f4ef; }

/* Separator B: white that turns faintly warm towards the fold line */
.sep-B .hero { border-radius: 0; background: linear-gradient(180deg, #ffffff 0%, #f8f6f1 70%, #f3f0e9 100%); }
.sep-B .hero::after { display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: #e6e1d6; }

/* Separator C: white slogan, a thin band in the four font colours underneath */
.sep-C .hero { border-radius: 0; }
.sep-C .hero::after { display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 4px; border-radius: 4px; background: linear-gradient(270deg, color-mix(in srgb, #B4532A 55%, #fff) 0% 25%, color-mix(in srgb, #1E2F6B 55%, #fff) 25% 50%, color-mix(in srgb, #3F5B3A 55%, #fff) 50% 75%, color-mix(in srgb, #D9B98A 55%, #fff) 75% 100%); }

.switch span { font-size: 12px; color: rgb(255 255 255 / .55); padding: 0 10px 0 6px; }
.switch { position: fixed; z-index: 70; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; background: rgb(17 17 17 / .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .35); }
.switch button { border: 0; border-radius: 99px; padding: 7px 13px; background: transparent; color: rgb(255 255 255 / .75); font-size: 13px; cursor: pointer; transition: background .2s, color .2s; }
.switch button:hover { color: #fff; }
.switch button.on { background: #fff; color: #111; }
.switch button:focus-visible, .chip:focus-visible, .fv-b:focus-visible, .tile:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
body.fv-on .switch, body.cart-open .switch { opacity: 0; pointer-events: none; }

/* ================================================================
   Approved mark and the crescent switch
   ================================================================ */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.side-brand { padding-top: 0; color: var(--mark, var(--ink)); line-height: 0; align-self: center; flex: none; }
.sakk-mark { display: block; height: 40px; width: auto; fill: currentColor; }

.moon { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--moon-bg, rgb(0 0 0 / .05)); color: var(--moon-ink, var(--ink)); cursor: pointer; transition: background-color .25s, color .5s, transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.moon:hover { background: var(--moon-bg-h, rgb(0 0 0 / .09)); }
.moon:active { transform: scale(.9); }
.moon svg { width: 21px; height: 21px; overflow: visible; transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), filter .5s; }
.moon:hover svg { transform: rotate(-14deg); }
.moon:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), fill .45s var(--ease) !important; }

@media (max-width: 860px) {
  .side-top { display: contents; }
  .side-brand { order: 1; }
  .side-main { order: 2; gap: 14px; }
  .side-main a { white-space: nowrap; font-size: 14px; }
  .moon { order: 3; }
  .sakk-mark { height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .moon svg { transition: none; } }

/* ================================================================
   Night: structure shared by every palette (tokens set per palette)
   ================================================================ */
[data-theme=dark] { color-scheme: dark; }
[data-theme=dark] body, [data-theme=dark] .side { background: var(--bg); color: var(--ink); }
[data-theme=dark] ::selection { background: var(--ink); color: var(--bg); }
[data-theme=dark] .moon { --moon-bg: var(--chip); --moon-bg-h: var(--chip-h); --moon-ink: var(--moon-lit, #f6e6bd); }
[data-theme=dark] .moon svg { transform: rotate(42deg); filter: drop-shadow(0 0 7px rgb(255 222 150 / .5)); }
[data-theme=dark] .moon:hover svg { transform: rotate(56deg); }
[data-theme=dark] .side-label, [data-theme=dark] .side-meta { color: var(--ink-3); }
[data-theme=dark] .side-group a, [data-theme=dark] .side-group button { color: var(--ink-2); }
[data-theme=dark] .side-group a:hover, [data-theme=dark] .side-group button:hover, [data-theme=dark] .side-group a.on { color: var(--ink); }
[data-theme=dark] .side-group a.on::after { background: var(--ink); }
[data-theme=dark] .side-group .count, [data-theme=dark] .cart-btn b { background: var(--ink); color: var(--bg); }
[data-theme=dark] .side-rule { background: var(--rule); }
[data-theme=dark] .hero-title { color: var(--ink); }
[data-theme=dark] .chips { background: color-mix(in srgb, var(--bg) 88%, transparent); }
[data-theme=dark] .chip { background: var(--chip); color: var(--ink-2); }
[data-theme=dark] .chip:hover { background: var(--chip-h); color: var(--ink); }
[data-theme=dark] .chip.on { background: var(--ink); color: var(--bg); }
[data-theme=dark] .tile:focus-visible, [data-theme=dark] .chip:focus-visible, [data-theme=dark] .fv-b:focus-visible { outline-color: var(--ink); }

[data-theme=dark] .fv-veil { background: var(--veil); }
[data-theme=dark] .fv-panel { background: var(--sheet); box-shadow: 1px 0 0 var(--rule); }
[data-theme=dark] .fv-b { background: rgb(255 255 255 / .07); color: var(--ink); }
[data-theme=dark] .fv-b:hover { background: rgb(255 255 255 / .14); }
[data-theme=dark] .fv-specs div { border-color: var(--rule); }
[data-theme=dark] .fv-lic label { background: rgb(255 255 255 / .04); }
[data-theme=dark] .fv-lic label:hover { background: rgb(255 255 255 / .08); }
[data-theme=dark] .fv-lic label:has(input:checked) { background: rgb(255 255 255 / .09); border-color: var(--ink); }
[data-theme=dark] .fv-add, [data-theme=dark] .cart-go { background: var(--ink); color: var(--bg); }
[data-theme=dark] .fv-add.done { background: var(--ink-2); }
[data-theme=dark] .fv-dots button { background: color-mix(in srgb, currentColor 24%, transparent); }
[data-theme=dark] .fv-dots button.on { background: currentColor; }
[data-theme=dark] .s3-grid, [data-theme=dark] .s3-grid span { border-color: color-mix(in srgb, currentColor 14%, transparent); }

[data-theme=dark] .cart { background: var(--sheet); border-color: var(--rule); }
[data-theme=dark] .cart-head, [data-theme=dark] .cart-foot, [data-theme=dark] .ci { border-color: var(--rule); }
[data-theme=dark] .cart-veil { background: rgb(0 0 0 / .5); }
[data-theme=dark] .cart-x { color: var(--ink); }
[data-theme=dark] .cart-empty .cart-more { border-color: var(--ink); color: var(--ink); }
[data-theme=dark] .cart-empty .cart-more:hover { background: var(--ink); color: var(--bg); }
[data-theme=dark] .toast { background: var(--ink); color: var(--bg); }

/* ================================================================
   Calligraphy slogan
   ================================================================ */
.hero-title { line-height: 0; max-width: none; width: 100%; }
.slogan-art { display: block; width: min(560px, 74%); height: auto; margin-inline: auto; fill: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================================================================
   Tiles: a sentence set in the font, with round icons in the line
   ================================================================ */
.tile { container-type: inline-size; }
.say { position: relative; display: block; line-height: 1.34; text-wrap: pretty; }
.ic { display: inline-grid; place-items: center; width: .94em; height: .94em; margin-inline: .05em; vertical-align: -.17em; border-radius: 50%; border: 1.5px solid currentColor; background: var(--ic-bg, #fff); font-style: normal; line-height: 1; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.ic-g span { font-size: .54em; line-height: 1; transform: translateY(.08em); }
.ic svg { width: .5em; height: .5em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-p { display: inline-flex; align-items: center; height: 2.05em; padding: 0 .9em; margin-inline: .12em; vertical-align: .32em; border-radius: 99px; background: #111; color: #fff; font: 600 .44em/1 var(--ui); white-space: nowrap; transition: transform .5s var(--ease); }
.tile:hover .ic { transform: rotate(-16deg) scale(1.06); }
.tile:hover .ic-s { transition-delay: .06s; transform: rotate(14deg) scale(1.06); }
.tile:hover .ic-p { transform: translateX(-3px); }
[data-theme=dark] .ic { --ic-bg: rgb(255 248 236 / .07); }
[data-theme=dark] .ic-p { background: var(--ink); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .ic, .ic-p { transition: none; } }

/* ---------- Tiles: softer, rounder ---------- */
:root { --r-tile: 28px; }
.tile { border-radius: var(--r-tile); padding: 30px 30px 28px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.tile:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 26px 44px -30px color-mix(in srgb, var(--c) 75%, transparent); }
.fv-stage { border-radius: var(--r-tile); }
@supports (corner-shape: squircle) { .tile, .fv-stage { border-radius: 52px; corner-shape: squircle; } }
.ci-sw { border-radius: 20px; }
.tile-go { width: 50px; height: 50px; }
.tile-price i { height: 1.5px; border-radius: 2px; }

/* The name leads, the rest of the line follows quietly */
.tile-name.say { font-size: 15cqw; line-height: 1.38; margin-top: 8px; }
.tile[data-k=founding-day] .tile-name.say { font-size: 12.6cqw; }
.say .rest { color: color-mix(in oklab, var(--c) 58%, #000); }

/* The background letter: a lighter tone of the card */
.tile-glyph, .s1-glyph { color: color-mix(in oklab, var(--c) 26%, #fff); }

/* Night never touches the product colours */
[data-theme=dark] .fv-stage, [data-theme=dark] .ci-sw { color: #111; }
[data-theme=dark] .fv-nav .fv-b { background: rgb(255 255 255 / .55); color: #111; }
[data-theme=dark] .fv-nav .fv-b:hover { background: #fff; }
[data-theme=dark] .tile { box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 18px 40px -28px rgb(0 0 0 / .8); }

/* ---------- Side column: section titles a little larger ---------- */
.side-group a, .side-group button { font-size: 18px; padding: 5px 0; }
.side-label { font-size: 14px; }
.side-group .count { font-size: 12px; min-width: 21px; height: 21px; }
@media (max-width: 860px) { .side-main a { font-size: 15px; } }

/* ---------- Night A: soft graphite. A calm grey night, never pitch black ---------- */
[data-theme=dark] { --bg: #1c1c1e; --sheet: #242426; --paper: #242426; --chip: #2c2c2e; --chip-h: #3a3a3c; --ink: #f5f5f7; --ink-2: #b4b4b9; --ink-3: #8a8a8f; --rule: rgb(255 255 255 / .09); --veil: rgb(28 28 30 / .5); --mark: #f5f5f7; }
[data-theme=dark] .fv-panel, [data-theme=dark] .cart { background: var(--sheet); }

/* ---------- Tile: the name alone, the letter centred behind ---------- */
.tile-name { position: relative; margin-top: 10px; line-height: 1.3; text-wrap: balance; }
.tile-glyph { inset: 0; left: 0; top: 0; display: grid; place-items: center; line-height: 1; transform: translate(var(--gx, 0), var(--gy, 0)); }
.tile:hover .tile-glyph { transform: translate(var(--gx, 0), var(--gy, 0)) scale(1.04); }
html:not(.gset) .tile-glyph { transition: none; }
.s1-glyph { inset: 0; left: 0; top: 0; display: grid; place-items: center; line-height: 1; transform: translate(var(--gx, 0), var(--gy, 0)); }
.tile-price { gap: 12px; }
.tile-price span { font-family: var(--ui); line-height: 1; letter-spacing: .01em; }

/* ---------- C: bold ---------- */
.tile-name { font-size: 28cqw; line-height: 1.22; }
.tile[data-k=founding-day] .tile-name { font-size: 22cqw; }
.tile-glyph { font-size: 230cqw; color: rgb(255 255 255 / .16); }
.s1-glyph { font-size: 96cqw; color: rgb(255 255 255 / .16); }
.tile-price span { font-size: 30px; font-weight: 150; }
.tile-price i { display: none; }

/* ---------- Thin black line under the calligraphy ---------- */
.sep-C .hero::after { height: 1px; border-radius: 0; background: var(--ink); }

/* ---------- The crescent, simplified: no disc, no glow, no turn ---------- */
.moon, [data-theme=dark] .moon { --moon-bg: transparent; --moon-bg-h: transparent; --moon-ink: var(--ink); }
.moon { transition: opacity .2s, transform .2s var(--ease); }
.moon:hover { opacity: .55; }
.moon svg, .moon:hover svg, [data-theme=dark] .moon svg, [data-theme=dark] .moon:hover svg { transform: none; filter: none; }
.moon svg { width: 23px; height: 23px; }

/* ---------- Card: name in the centre, less tall ---------- */
.tile { aspect-ratio: var(--ar); }
.tile-name { position: absolute; inset: 46px 0 72px; margin: 0; display: grid; place-items: center; padding: 0 26px; text-align: center; text-wrap: balance; line-height: 1.2; pointer-events: none; }
.tile-label { position: relative; }
.tile-go { width: 46px; height: 46px; }

/* ---------- A: square. Price and arrow on one line, at either end ---------- */
.tile { --ar: 1 / 1; }
.tile-name { font-size: 21cqw; }
.tile[data-k=founding-day] .tile-name { font-size: 15.5cqw; }
.tile-foot { justify-content: space-between; }
.tile-price { flex: none; order: -1; }
.tile-price span { font-size: 28px; }

/* ================================================================
   WordPress: the approved interface on real pages
   ================================================================ */
.shell > .site-main { padding: 0; margin: 0; max-width: none; }
.side-group li { list-style: none; margin: 0; padding: 0; display: contents; }
.side-group .current-menu-item > a, .side-group .current_page_item > a { color: var(--ink); }
.side-group .current-menu-item > a::after, .side-group .current_page_item > a::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.page-head, .block, .prose { color: var(--ink); }

/* Cart sheet: the body is a WooCommerce fragment */
.cart-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cart-body .cart-items { flex: 1; }
.cart-body.is-empty .cart-items, .cart-body.is-empty .cart-foot { display: none; }
.cart-body.is-empty .cart-empty { display: flex; }
.ci-lic a { color: var(--ink-3); font-size: var(--fs-meta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ci-lic a:hover { color: var(--ink); }
a.cart-go { display: block; text-align: center; }
.cart-head h2 span:empty { display: none; }
.fv-add[aria-busy=true] { opacity: .6; pointer-events: none; }

/* Licence cards may wrap; single weights get a picker under the cards */
.fv-lic b { white-space: normal; line-height: 1.35; }
.fv-weights { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -2px; }
.fv-weights[hidden] { display: none; }
.fv-weights button { border: 0; padding: 6px 10px; border-radius: 99px; background: rgb(0 0 0 / .05); color: var(--ink-2); font: 500 12px/1.2 "Lama Sans", var(--ui); cursor: pointer; transition: background .2s, color .2s; }
.fv-weights button:hover { color: var(--ink); }
.fv-weights button.on { background: var(--ink); color: var(--bg); }
[data-theme=dark] .fv-weights button { background: rgb(255 255 255 / .07); }
[data-theme=dark] .fv-weights button.on { background: var(--ink); color: var(--bg); }