
/* =========================================================
   v4 / FINISHING PASS
   Header / logo / cookie / spacing / Japanese typography
   ========================================================= */

/* Slightly tighter, quieter header */
.ca-site-header{
	height:64px !important;
}

.ca-site-header-inner{
	width:min(var(--ca-max),calc(100% - 48px)) !important;
	gap:24px !important;
}

/*
 * The current WordPress logo image has a baked white rectangle.
 * multiply makes white visually become the cream header while
 * preserving the black logo mark. The source media file itself
 * is NOT modified.
 */
.ca-brand .custom-logo-link{
	max-width:118px !important;
	background:transparent !important;
}
.ca-brand .custom-logo{
	height:45px !important;
	max-height:45px !important;
	width:auto !important;
	background:transparent !important;
	mix-blend-mode:multiply;
	display:block;
}

/* Keep the hero flush to the dedicated header. */
.ca-home-2026,
.ca-hero{
	margin-top:0 !important;
}
.ca-home-2026-page .page-wrapper,
.ca-home-2026-page .page-inner,
.ca-home-2026-page .content-area,
.ca-home-2026-page .site-main,
.ca-home-2026-page .entry-content{
	margin-top:0 !important;
	padding-top:0 !important;
}

/* Slightly calmer nav rhythm */
.ca-desktop-nav{gap:34px !important}
.ca-header-tools{gap:16px !important}

/* Better Japanese wrapping across the whole branded page. */
.ca-home-2026 :lang(ja),
.ca-home-2026 p,
.ca-home-2026 .ca-jp-title,
.ca-home-2026 .ca-hero-ja,
.ca-home-2026 .ca-close-ja,
.ca-home-2026 .ca-body-copy{
	line-break:strict;
	word-break:normal;
	overflow-wrap:break-word;
	text-wrap:pretty;
}

/* Avoid tiny Japanese punctuation fragments where supported. */
.ca-home-2026 .ca-keep-ja{
	display:inline-block !important;
	white-space:nowrap !important;
}

/* =========================================================
   COOKIE BARS — support the common plugins found on WP sites.
   This only applies to the CA test/home page.
   ========================================================= */

/* Cookie Notice */
.ca-home-2026-page #cookie-notice,
/* CookieYes legacy */
.ca-home-2026-page #cookie-law-info-bar,
/* CookieYes current */
.ca-home-2026-page .cky-consent-container{
	left:18px !important;
	right:auto !important;
	bottom:18px !important;
	top:auto !important;
	width:min(520px,calc(100vw - 36px)) !important;
	max-width:520px !important;
	min-width:0 !important;
	height:auto !important;
	background:rgba(238,233,225,.97) !important;
	color:#181715 !important;
	border:1px solid rgba(24,23,21,.13) !important;
	box-shadow:0 12px 32px rgba(24,23,21,.11) !important;
	border-radius:3px !important;
	transform:none !important;
	z-index:99999 !important;
}

/* Cookie Notice inner */
.ca-home-2026-page #cookie-notice .cookie-notice-container{
	padding:11px 13px !important;
	text-align:left !important;
	display:flex !important;
	align-items:center !important;
	gap:9px !important;
	flex-wrap:wrap !important;
}
.ca-home-2026-page #cookie-notice #cn-notice-text{
	flex:1 1 280px !important;
	margin:0 !important;
	font-size:9.5px !important;
	line-height:1.55 !important;
}

/* CookieYes legacy inner */
.ca-home-2026-page #cookie-law-info-bar{
	padding:11px 13px !important;
	text-align:left !important;
	font-size:9.5px !important;
	line-height:1.55 !important;
}
.ca-home-2026-page #cookie-law-info-bar .cli-bar-container,
.ca-home-2026-page #cookie-law-info-bar .cli-bar-message{
	width:auto !important;
	max-width:none !important;
}
.ca-home-2026-page #cookie-law-info-bar .cli-bar-message{
	font-size:9.5px !important;
	line-height:1.55 !important;
}
.ca-home-2026-page #cookie-law-info-bar .cli-bar-btn_container{
	margin-left:0 !important;
}

/* CookieYes current inner */
.ca-home-2026-page .cky-consent-container .cky-consent-bar{
	padding:12px 13px !important;
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
}
.ca-home-2026-page .cky-consent-container .cky-title{
	display:none !important;
}
.ca-home-2026-page .cky-consent-container .cky-notice-des,
.ca-home-2026-page .cky-consent-container p{
	font-size:9.5px !important;
	line-height:1.55 !important;
	color:#181715 !important;
}
.ca-home-2026-page .cky-consent-container .cky-notice-btn-wrapper{
	margin-top:8px !important;
	gap:7px !important;
}

/* Buttons for all three cookie systems */
.ca-home-2026-page #cookie-notice .cn-button,
.ca-home-2026-page #cookie-law-info-bar .cli-plugin-button,
.ca-home-2026-page #cookie-law-info-bar .wt-cli-accept-btn,
.ca-home-2026-page .cky-consent-container button{
	margin:0 5px 0 0 !important;
	padding:7px 11px !important;
	min-height:0 !important;
	height:auto !important;
	border-radius:999px !important;
	background:#314e78 !important;
	color:#fff !important;
	border:1px solid #314e78 !important;
	box-shadow:none !important;
	font-size:8.5px !important;
	line-height:1.2 !important;
	letter-spacing:.055em !important;
	text-transform:uppercase !important;
}

/* "More info/settings" as a quieter secondary action */
.ca-home-2026-page #cookie-notice #cn-more-info,
.ca-home-2026-page #cookie-law-info-bar .cli_settings_button,
.ca-home-2026-page #cookie-law-info-bar .cli-plugin-main-link,
.ca-home-2026-page .cky-consent-container .cky-btn-customize,
.ca-home-2026-page .cky-consent-container .cky-btn-reject,
.ca-home-2026-page .cky-consent-container .cky-btn-preferences{
	background:transparent !important;
	color:#314e78 !important;
	border-color:#314e78 !important;
}

/* Remove any full-width bar behavior inherited from cookie plugins */
.ca-home-2026-page #cookie-law-info-bar[data-cli-style="bar"],
.ca-home-2026-page #cookie-notice.cookie-notice-hidden,
.ca-home-2026-page .cky-consent-container.cky-box-bottom-left{
	margin:0 !important;
}

/* Mobile finishing */
@media(max-width:900px){
	.ca-site-header{
		height:60px !important;
	}
	.ca-site-header-inner{
		width:calc(100% - 26px) !important;
	}
	.ca-brand .custom-logo-link{
		max-width:98px !important;
	}
	.ca-brand .custom-logo{
		height:39px !important;
		max-height:39px !important;
	}
}

@media(max-width:600px){
	.ca-site-header{
		height:58px !important;
	}
	.ca-header-tools{
		gap:11px !important;
	}
	.ca-home-2026-page #cookie-notice,
	.ca-home-2026-page #cookie-law-info-bar,
	.ca-home-2026-page .cky-consent-container{
		left:9px !important;
		right:auto !important;
		bottom:9px !important;
		width:calc(100vw - 18px) !important;
		max-width:none !important;
	}
}


/* =========================================================
   v3 / circle around dedicated header + finishing pass
   ========================================================= */

/* Top page gets the plugin header; Flatsome's global header is not rendered visually here. */
.ca-home-2026-page #header{
	display:none !important;
}

/* Since we now own the bottom of the page too, remove Flatsome's footer entirely on this test page. */
.ca-home-2026-page #footer{
	display:none !important;
}

/* Custom CA header */
.ca-site-header{
	position:sticky;
	top:0;
	z-index:999;
	height:78px;
	background:rgba(238,233,225,.96);
	border-bottom:1px solid rgba(24,23,21,.11);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
}
.admin-bar .ca-site-header{top:32px}

.ca-site-header-inner{
	width:min(var(--ca-max),calc(100% - 56px));
	height:100%;
	margin:0 auto;
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:28px;
}

.ca-brand{
	min-width:0;
	display:flex;
	align-items:center;
}
.ca-brand .custom-logo-link{
	display:inline-flex !important;
	align-items:center;
	max-width:132px;
}
.ca-brand .custom-logo{
	width:auto !important;
	height:50px !important;
	max-height:50px !important;
	object-fit:contain;
}
.ca-logo-fallback{
	font-family:Georgia,"Times New Roman",serif;
	font-size:22px;
	letter-spacing:-.02em;
}

.ca-desktop-nav{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:38px;
}
.ca-desktop-nav a{
	font-size:10px;
	letter-spacing:.16em;
	color:var(--ca-ink);
	position:relative;
	padding:8px 0;
}
.ca-desktop-nav a:after{
	content:"";
	position:absolute;
	left:0;
	right:100%;
	bottom:2px;
	height:1px;
	background:var(--ca-ink);
	transition:right .22s ease;
}
.ca-desktop-nav a:hover:after{right:0}

.ca-header-tools{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:19px;
	position:relative;
}

.ca-tool-link{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:9px;
	letter-spacing:.11em;
	white-space:nowrap;
}
.ca-tool-link svg,
.ca-search-panel summary svg{
	width:19px;
	height:19px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.45;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.ca-cart-count{
	min-width:17px;
	height:17px;
	border-radius:999px;
	display:grid;
	place-items:center;
	background:var(--ca-blue);
	color:#fff;
	font-size:9px;
	line-height:1;
	letter-spacing:0;
	margin-left:-4px;
}

.ca-search-panel{position:relative}
.ca-search-panel summary{
	list-style:none;
	cursor:pointer;
	display:grid;
	place-items:center;
	padding:4px;
}
.ca-search-panel summary::-webkit-details-marker{display:none}
.ca-search-panel[open] form{
	animation:caFadeIn .16s ease-out both;
}
.ca-search-panel form{
	position:absolute;
	top:40px;
	right:0;
	width:260px;
	padding:12px;
	background:#f6f1e9;
	border:1px solid rgba(24,23,21,.14);
	box-shadow:0 14px 34px rgba(24,23,21,.09);
}
.ca-search-panel input[type="search"]{
	width:100%;
	height:38px;
	margin:0;
	padding:0 12px;
	background:#fff;
	border:1px solid rgba(24,23,21,.18);
	box-shadow:none;
	font-size:12px;
	color:var(--ca-ink);
}
@keyframes caFadeIn{
	from{opacity:0;transform:translateY(-4px)}
	to{opacity:1;transform:translateY(0)}
}

.ca-mobile-menu{display:none}
.ca-mobile-menu summary{
	width:30px;
	height:28px;
	list-style:none;
	cursor:pointer;
	position:relative;
}
.ca-mobile-menu summary::-webkit-details-marker{display:none}
.ca-mobile-menu summary span{
	position:absolute;
	left:4px;
	right:4px;
	height:1px;
	background:var(--ca-ink);
	transition:transform .2s ease,top .2s ease;
}
.ca-mobile-menu summary span:first-child{top:9px}
.ca-mobile-menu summary span:last-child{top:17px}
.ca-mobile-menu[open] summary span:first-child{top:13px;transform:rotate(45deg)}
.ca-mobile-menu[open] summary span:last-child{top:13px;transform:rotate(-45deg)}
.ca-mobile-menu-panel{
	position:absolute;
	top:53px;
	right:0;
	width:min(280px,calc(100vw - 30px));
	padding:20px 22px;
	background:#f6f1e9;
	border:1px solid rgba(24,23,21,.13);
	box-shadow:0 14px 34px rgba(24,23,21,.09);
	display:grid;
	gap:17px;
}
.ca-mobile-menu-panel a{
	font-size:12px;
	letter-spacing:.13em;
}

/* Japanese line-breaking quality */
.ca-home-2026 p,
.ca-home-2026 .ca-jp-title,
.ca-home-2026 .ca-hero-ja,
.ca-home-2026 .ca-close-ja{
	word-break:normal;
	overflow-wrap:break-word;
	line-break:strict;
	text-wrap:pretty;
}
.ca-keep-ja{
	display:inline-block;
	white-space:nowrap;
}

/* ABOUT English heading must stay as two intentional lines. */
.ca-about-title span{
	display:block;
	white-space:nowrap;
}

/* Cookie Notice plugin — CA page only. Targets common Cookie Notice markup. */
.ca-home-2026-page #cookie-notice{
	left:18px !important;
	right:auto !important;
	bottom:18px !important;
	width:min(540px,calc(100vw - 36px)) !important;
	min-width:0 !important;
	background:rgba(238,233,225,.97) !important;
	color:var(--ca-ink) !important;
	border:1px solid rgba(24,23,21,.12) !important;
	box-shadow:0 12px 32px rgba(24,23,21,.10) !important;
	border-radius:2px !important;
}
.ca-home-2026-page #cookie-notice .cookie-notice-container{
	padding:12px 14px !important;
	text-align:left !important;
	display:flex !important;
	align-items:center !important;
	gap:10px !important;
	flex-wrap:wrap !important;
}
.ca-home-2026-page #cookie-notice #cn-notice-text{
	font-size:10px !important;
	line-height:1.55 !important;
	margin:0 !important;
	flex:1 1 260px;
}
.ca-home-2026-page #cookie-notice .cn-button{
	margin:0 !important;
	padding:7px 12px !important;
	min-height:auto !important;
	border-radius:999px !important;
	background:var(--ca-blue) !important;
	color:#fff !important;
	border:0 !important;
	font-size:9px !important;
	line-height:1.2 !important;
	letter-spacing:.06em !important;
	box-shadow:none !important;
}
.ca-home-2026-page #cookie-notice .cn-close-icon{
	right:9px !important;
	top:9px !important;
	opacity:.45 !important;
}

/* Seamless Vessel Blue ending + custom footer */
.ca-close{
	padding-bottom:0 !important;
}
.ca-micro-footer{
	margin-top:54px;
	padding:18px 0 20px;
	border-top:1px solid rgba(255,255,255,.22);
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	color:rgba(255,255,255,.72);
	font-size:9px;
	letter-spacing:.07em;
}
.ca-micro-footer-links{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:22px;
	flex-wrap:wrap;
}
.ca-micro-footer a{
	color:rgba(255,255,255,.88) !important;
	border-bottom:1px solid rgba(255,255,255,.28);
	padding-bottom:2px;
	transition:border-color .2s ease,color .2s ease;
}
.ca-micro-footer a:hover{
	color:#fff !important;
	border-color:#fff;
}

/* Desktop fine tuning after full-page review */
.ca-world-copy .ca-display,
.ca-about-title{
	text-wrap:balance;
}

@media(max-width:900px){
	.ca-site-header-inner{
		grid-template-columns:1fr auto;
		width:calc(100% - 30px);
	}
	.ca-desktop-nav{display:none}
	.ca-tool-text{display:none}
	.ca-mobile-menu{display:block}
	.ca-brand .custom-logo-link{max-width:105px}
	.ca-brand .custom-logo{
		height:42px !important;
		max-height:42px !important;
	}
}

@media(max-width:782px){
	.admin-bar .ca-site-header{top:46px}
}

@media(max-width:600px){
	.ca-site-header{
		height:66px;
	}
	.ca-header-tools{gap:13px}
	.ca-tool-link svg,
	.ca-search-panel summary svg{
		width:18px;
		height:18px;
	}
	.ca-search-panel form{
		top:36px;
		right:-74px;
		width:min(280px,calc(100vw - 30px));
	}
	.ca-about-title span{
		white-space:normal;
	}
	.ca-micro-footer{
		margin-top:40px;
		display:grid;
		gap:12px;
	}
	.ca-micro-footer-links{
		justify-content:flex-start;
		gap:12px 18px;
	}
	.ca-home-2026-page #cookie-notice{
		left:10px !important;
		bottom:10px !important;
		width:calc(100vw - 20px) !important;
	}
	.ca-home-2026-page #cookie-notice .cookie-notice-container{
		padding:10px 12px !important;
	}
}


/* =========================================================
   v2 / FLATSOME INTEGRATION
   Only pages containing [ca_home_2026] receive this body class.
   The production homepage and all other pages remain untouched.
   ========================================================= */

.ca-home-2026-page .page-wrapper,
.ca-home-2026-page .page-inner{
	padding-top:0 !important;
	padding-bottom:0 !important;
}

.ca-home-2026-page .content-area,
.ca-home-2026-page .site-main,
.ca-home-2026-page .entry-content{
	padding-top:0 !important;
	padding-bottom:0 !important;
	margin-bottom:0 !important;
}

.ca-home-2026-page .entry-header,
.ca-home-2026-page .entry-title{
	display:none !important;
}

/* Break the shortcode out of Flatsome's normal narrow page container. */
.ca-home-2026-page .ca-home-2026{
	width:100vw;
	max-width:none;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/* Keep the CA test header calm and non-sticky so it never covers sections. */
.ca-home-2026-page #header{
	position:relative !important;
	z-index:30;
}

.ca-home-2026-page #header .header-wrapper,
.ca-home-2026-page #header .header-wrapper.stuck{
	position:relative !important;
	top:auto !important;
	left:auto !important;
	right:auto !important;
	transform:none !important;
	animation:none !important;
	box-shadow:none !important;
}

.ca-home-2026-page #top-bar{
	background:#314e78 !important;
}

.ca-home-2026-page #masthead,
.ca-home-2026-page .header-main{
	background:#eee9e1 !important;
	border-bottom:1px solid rgba(24,23,21,.10);
}

.ca-home-2026-page .header-main .header-inner,
.ca-home-2026-page #top-bar .flex-row{
	max-width:1260px !important;
}

.ca-home-2026-page .header-main .nav > li > a,
.ca-home-2026-page .header-main .header-button a,
.ca-home-2026-page .header-main .icon-menu,
.ca-home-2026-page .header-main .icon-search,
.ca-home-2026-page .header-main .header-cart-link{
	color:#181715 !important;
}

/* The old product widgets under the page duplicate the new SHOP section. */
.ca-home-2026-page #footer .footer-1,
.ca-home-2026-page #footer .footer-2{
	display:none !important;
}

.ca-home-2026-page #footer{
	margin-top:0 !important;
}

.ca-home-2026-page #footer .absolute-footer{
	margin-top:0 !important;
	padding-top:14px !important;
	padding-bottom:14px !important;
	background:#314e78 !important;
	color:rgba(255,255,255,.72) !important;
	border-top:1px solid rgba(255,255,255,.16);
}

.ca-home-2026-page #footer .absolute-footer a{
	color:rgba(255,255,255,.84) !important;
}

/* Prevent Flatsome's sticky placeholder from creating a second visual gap. */
.ca-home-2026-page .stuck .header-main,
.ca-home-2026-page .stuck .header-bottom{
	box-shadow:none !important;
}


:root{
	--ca-ink:#181715;
	--ca-muted:#756f67;
	--ca-cream:#eee9e1;
	--ca-cream-2:#e6dfd5;
	--ca-sand:#c9ad83;
	--ca-charcoal:#20211f;
	--ca-blue:#314e78;
	--ca-line:rgba(24,23,21,.16);
	--ca-max:1260px;
}

/* Everything is scoped to the shortcode container so the live site/theme is not globally restyled. */
.ca-home-2026,
.ca-home-2026 *{box-sizing:border-box}

.ca-home-2026{
	margin:0;
	background:var(--ca-cream);
	color:var(--ca-ink);
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,Arial,sans-serif;
	letter-spacing:.025em;
	overflow:hidden;
}

.ca-home-2026 a{color:inherit;text-decoration:none}
.ca-home-2026 img{max-width:100%;height:auto}
.ca-wrap{width:min(var(--ca-max),calc(100% - 56px));margin-inline:auto}

/* HERO */
.ca-hero{
	min-height:720px;
	display:grid;
	grid-template-columns:1fr 1fr;
	background:var(--ca-sand);
	overflow:hidden;
}
.ca-hero-copy{
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	padding:72px clamp(30px,4.4vw,72px) 82px;
	background:linear-gradient(90deg,rgba(201,173,131,.99),rgba(201,173,131,.78) 70%,rgba(201,173,131,.18));
}
.ca-eyebrow{
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:.24em;
	margin-bottom:22px;
}
.ca-hero-title{
	font-family:Georgia,"Times New Roman",serif !important;
	font-size:clamp(39px,4vw,61px) !important;
	font-weight:400 !important;
	line-height:1.035 !important;
	margin:0 !important;
	letter-spacing:-.032em !important;
	max-width:760px;
	color:var(--ca-ink) !important;
}
.ca-hero-title span{
	display:block;
	white-space:nowrap;
}
.ca-hero-ja{
	font-size:clamp(18px,1.8vw,25px);
	line-height:1.65;
	margin:27px 0 0;
	max-width:620px;
	font-weight:500;
	color:var(--ca-ink);
}
.ca-hero-ja span{display:block;white-space:nowrap}
.ca-hero-note{
	font-size:12px;
	line-height:1.9;
	max-width:560px;
	margin:17px 0 0;
	color:#514634;
}
.ca-hero-note span{display:block}
.ca-hero-image{
	background-image:url('images/hero-knot.jpeg');
	background-position:55% 52%;
	background-size:cover;
	background-repeat:no-repeat;
	min-height:720px;
}

/* SHARED TYPOGRAPHY */
.ca-kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.ca-kicker-en{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.ca-kicker-ja{font-size:11px;color:var(--ca-muted)}
.ca-rule{width:50px;height:2px;background:var(--ca-blue);margin-bottom:28px}
.ca-display{
	font-family:Georgia,"Times New Roman",serif !important;
	font-size:clamp(39px,4.8vw,70px) !important;
	line-height:1.02 !important;
	font-weight:400 !important;
	letter-spacing:-.032em !important;
	margin:0 !important;
	color:inherit !important;
}
.ca-jp-title{
	font-size:clamp(18px,2vw,26px);
	line-height:1.6;
	margin:22px 0 0;
	font-weight:500;
	letter-spacing:.02em;
}
.ca-body-copy,
.ca-body-copy p{
	font-size:14px;
	line-height:2.05;
	color:#4e4943;
}
.ca-body-copy p{margin:0 0 20px}
.ca-body-copy p:last-child{margin-bottom:0}

/* IDEA */
.ca-intro{padding:112px 0 106px;background:var(--ca-cream)}
.ca-intro-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:92px;align-items:end}
.ca-intro-text{max-width:510px}

/* SHOP */
.ca-shop-section{
	padding:88px 0 118px;
	background:var(--ca-cream-2);
	border-top:1px solid rgba(24,23,21,.08);
	border-bottom:1px solid rgba(24,23,21,.08);
}
.ca-section-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:28px;
	margin-bottom:48px;
}
.ca-section-head h2{
	margin:0 !important;
	font-family:Georgia,"Times New Roman",serif !important;
	font-size:clamp(34px,4vw,54px) !important;
	font-weight:400 !important;
	letter-spacing:-.02em !important;
	color:var(--ca-ink) !important;
}
.ca-section-head h2 span{
	display:block;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",sans-serif;
	font-size:11px;
	letter-spacing:.06em;
	margin-top:8px;
	color:var(--ca-muted);
	font-weight:400;
}
.ca-section-head>a{
	font-size:11px;
	letter-spacing:.08em;
	border-bottom:1px solid #111;
	padding-bottom:6px;
	white-space:nowrap;
	flex:0 0 auto;
}

/* Flatsome / WooCommerce product output */
.ca-shop-products .row{margin-left:-15px;margin-right:-15px}
.ca-shop-products .product-small .col-inner{background:transparent}
.ca-shop-products .box-image{
	background:#f7f4ef;
	border:1px solid rgba(24,23,21,.06);
	overflow:hidden;
}
.ca-shop-products .box-image img{transition:transform .45s ease}
.ca-shop-products .product-small:hover .box-image img{transform:scale(1.025)}
.ca-shop-products .box-text{padding:16px 0 0 !important}
.ca-shop-products .product-title{
	font-size:14px !important;
	font-weight:500 !important;
	line-height:1.55 !important;
}
.ca-shop-products .price-wrapper{margin-top:8px}
.ca-shop-products .price,
.ca-shop-products .amount{
	font-size:12px !important;
	color:var(--ca-ink) !important;
}
.ca-shop-products .category{
	font-size:9px !important;
	text-transform:uppercase;
	letter-spacing:.13em;
	color:var(--ca-muted) !important;
}
.ca-products-unavailable{font-size:13px;color:var(--ca-muted)}

/* DARK EDITORIAL */
.ca-world{padding:122px 0 128px;background:var(--ca-charcoal);color:#f2eee7}
.ca-world .ca-kicker-ja,
.ca-world .ca-body-copy,
.ca-world .ca-body-copy p{color:#bbb7ae}
.ca-world-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:42px;align-items:start}
.ca-world-card{position:relative;overflow:hidden;margin:0}
.ca-world-card img{display:block;width:100%;object-fit:cover;filter:saturate(.94) contrast(1.02)}
.ca-world-card.ca-tall img{aspect-ratio:4/5}
.ca-world-card.ca-square{margin-top:150px}
.ca-world-card.ca-square img{aspect-ratio:1/1}
.ca-world-tag{
	position:absolute;
	left:18px;
	bottom:18px;
	background:rgba(32,33,31,.82);
	border:1px solid rgba(255,255,255,.18);
	backdrop-filter:blur(8px);
	padding:10px 13px;
	border-radius:999px;
	font-size:9px;
	letter-spacing:.14em;
	text-transform:uppercase;
}
.ca-world-copy{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:88px;
	margin-top:54px;
	align-items:end;
}
.ca-world-copy .ca-display{color:#fff !important}
.ca-world-copy .ca-jp-title{color:#e0dcd4}
.ca-world-copy .ca-body-copy{max-width:520px}

/* CIRCLE AROUND #1 */
.ca-archive{
	padding:104px 0 112px;
	background:#bfb2a1;
	color:var(--ca-ink);
	border-top:1px solid rgba(24,23,21,.1);
}
.ca-archive-head{
	display:flex;
	justify-content:space-between;
	gap:28px;
	align-items:flex-end;
	margin-bottom:40px;
}
.ca-archive-head .ca-display{font-size:clamp(36px,4.5vw,64px) !important}
.ca-archive-meta{
	text-align:right;
	font-size:10px;
	line-height:1.8;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:#61594f;
}
.ca-archive-grid{
	display:grid;
	grid-template-columns:1.35fr .8fr .8fr;
	grid-template-rows:auto auto;
	gap:18px;
	align-items:stretch;
}
.ca-archive-grid figure{margin:0}
.ca-archive-main{grid-row:1/3;overflow:hidden;min-height:560px}
.ca-archive-main img,
.ca-archive-small img,
.ca-archive-poster img{width:100%;height:100%;display:block;object-fit:cover}
.ca-archive-small{overflow:hidden;min-height:270px}
.ca-archive-poster{overflow:hidden;min-height:270px;background:#111;display:grid;place-items:center}
.ca-archive-poster img{object-fit:contain;background:#111}
.ca-archive-caption{
	margin-top:18px;
	display:flex;
	justify-content:space-between;
	gap:30px;
	font-size:10px;
	line-height:1.7;
	color:#61594f;
	letter-spacing:.08em;
}

/* ABOUT */
.ca-about{padding:112px 0 126px;background:#d8d0c4}
.ca-about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:center}
.ca-about-image{overflow:hidden}
.ca-about-image img{
	display:block;
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	filter:saturate(.88) contrast(1.02);
}
.ca-about-copy{max-width:540px}
.ca-about-body{margin-top:24px}
.ca-about-links{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px}
.ca-about-links a{
	font-size:11px;
	border-bottom:1px solid rgba(24,23,21,.65);
	padding-bottom:5px;
}

/* VESSEL BLUE CLOSE */
.ca-close{padding:72px 0 76px;background:var(--ca-blue);color:#fff}
.ca-close-inner{display:flex;justify-content:space-between;gap:40px;align-items:flex-end}
.ca-close-copy{
	font-family:Georgia,"Times New Roman",serif;
	font-size:clamp(30px,4.3vw,58px);
	line-height:1.03;
	letter-spacing:-.02em;
	max-width:760px;
}
.ca-close-ja{font-size:13px;line-height:1.9;max-width:350px;color:rgba(255,255,255,.82)}
.ca-close-ja p{margin:0 0 18px}
.ca-close-ja p:last-child{margin-bottom:0}

/* MOBILE */
@media(max-width:820px){
	.ca-wrap{width:min(100% - 30px,var(--ca-max))}
	.ca-hero{grid-template-columns:1fr;min-height:auto}
	.ca-hero-image{
		order:1;
		min-height:60vh;
		background-position:54% 50%;
	}
	.ca-hero-copy{
		order:2;
		padding:46px 22px 58px;
		background:var(--ca-sand);
	}
	.ca-hero-title{
		font-size:43px !important;
		line-height:1.04 !important;
	}
	.ca-hero-title span,
	.ca-hero-ja span{white-space:normal}
	.ca-hero-ja{font-size:19px}
	.ca-hero-note{font-size:12px}

	.ca-intro{padding:76px 0}
	.ca-intro-grid,
	.ca-world-copy,
	.ca-about-grid{grid-template-columns:1fr;gap:34px}

	.ca-shop-section{padding:66px 0 82px}
	.ca-section-head{margin-bottom:34px}
	.ca-section-head h2{font-size:38px !important}

	.ca-world{padding:78px 0 86px}
	.ca-world-grid{grid-template-columns:1fr;gap:16px}
	.ca-world-card.ca-square{margin-top:0}
	.ca-world-card.ca-tall img,
	.ca-world-card.ca-square img{aspect-ratio:4/3}
	.ca-world-copy{margin-top:28px}

	.ca-archive{padding:72px 0 78px}
	.ca-archive-head{display:block;margin-bottom:28px}
	.ca-archive-meta{text-align:left;margin-top:14px}
	.ca-archive-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}
	.ca-archive-main{grid-column:1/-1;grid-row:auto;min-height:0}
	.ca-archive-main img{aspect-ratio:4/3}
	.ca-archive-small,.ca-archive-poster{min-height:0}
	.ca-archive-small img,.ca-archive-poster img{aspect-ratio:1/1}
	.ca-archive-caption{display:block}
	.ca-archive-caption span{display:block;margin-bottom:6px}

	.ca-about{padding:76px 0 86px}
	.ca-close{padding:58px 0}
	.ca-close-inner{display:grid;gap:22px}

	/* Woo output remains 2-column on mobile, matching Flatsome's normal behavior. */
	.ca-shop-products .small-columns-2>.col{
		flex-basis:50%;
		max-width:50%;
	}
}

@media(max-width:480px){
	.ca-hero-title{font-size:37px !important}
	.ca-hero-ja{font-size:18px}
	.ca-section-head{align-items:flex-start}
	.ca-section-head>a{margin-top:9px}
	.ca-kicker{gap:9px;flex-wrap:wrap}
}


/* =========================================================
   v5 / HEADER FINISH
   Minimal header height, larger visible logo, tighter hero entry.
   ========================================================= */

.ca-site-header{
	height:50px !important;
	min-height:50px !important;
}

.ca-site-header-inner{
	height:50px !important;
	width:min(var(--ca-max),calc(100% - 42px)) !important;
	gap:20px !important;
	padding:0 !important;
	align-items:center !important;
}

/* Make the mark feel larger without making the header taller. */
.ca-brand{
	height:50px !important;
	display:flex !important;
	align-items:center !important;
	overflow:visible !important;
}
.ca-brand .custom-logo-link{
	height:50px !important;
	max-width:142px !important;
	display:flex !important;
	align-items:center !important;
	overflow:visible !important;
	background:transparent !important;
}
.ca-brand .custom-logo{
	height:48px !important;
	max-height:48px !important;
	width:auto !important;
	max-width:none !important;
	object-fit:contain !important;
	mix-blend-mode:multiply;
	transform:scale(1.18);
	transform-origin:left center;
	margin:0 !important;
	padding:0 !important;
}

/* Keep nav/tools compact enough to match the low-profile header. */
.ca-desktop-nav{
	gap:30px !important;
	height:50px !important;
	align-items:center !important;
}
.ca-desktop-nav a{
	padding:4px 0 !important;
}
.ca-header-tools{
	height:50px !important;
	gap:14px !important;
	align-items:center !important;
}

/* No visual breathing room between the header and Hero. */
.ca-home-2026,
.ca-hero,
.ca-home-2026-page .page-wrapper,
.ca-home-2026-page .page-inner,
.ca-home-2026-page .content-area,
.ca-home-2026-page .site-main,
.ca-home-2026-page .entry-content{
	margin-top:0 !important;
	padding-top:0 !important;
}

@media(max-width:900px){
	.ca-site-header,
	.ca-site-header-inner,
	.ca-brand,
	.ca-brand .custom-logo-link,
	.ca-header-tools{
		height:48px !important;
		min-height:48px !important;
	}
	.ca-site-header-inner{
		width:calc(100% - 24px) !important;
	}
	.ca-brand .custom-logo-link{
		max-width:120px !important;
	}
	.ca-brand .custom-logo{
		height:46px !important;
		max-height:46px !important;
		transform:scale(1.16);
	}
}

@media(max-width:600px){
	.ca-site-header,
	.ca-site-header-inner,
	.ca-brand,
	.ca-brand .custom-logo-link,
	.ca-header-tools{
		height:46px !important;
		min-height:46px !important;
	}
	.ca-brand .custom-logo-link{
		max-width:112px !important;
	}
	.ca-brand .custom-logo{
		height:44px !important;
		max-height:44px !important;
		transform:scale(1.14);
	}
	.ca-header-tools{
		gap:10px !important;
	}
}


/* =========================================================
   v6 / LOGO FIX ONLY
   The WordPress logo source contains large baked-in white space.
   Keep the 50px header, but enlarge the visible C mark strongly.
   ========================================================= */

.ca-brand{
	width:78px !important;
	min-width:78px !important;
	overflow:visible !important;
}

.ca-brand .custom-logo-link{
	width:78px !important;
	max-width:78px !important;
	height:50px !important;
	overflow:visible !important;
	display:flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
}

.ca-brand .custom-logo{
	height:48px !important;
	max-height:48px !important;
	width:auto !important;
	max-width:none !important;
	transform:translateX(-2px) scale(2.15) !important;
	transform-origin:left center !important;
	mix-blend-mode:multiply !important;
	pointer-events:auto;
}

@media(max-width:900px){
	.ca-brand{
		width:68px !important;
		min-width:68px !important;
	}
	.ca-brand .custom-logo-link{
		width:68px !important;
		max-width:68px !important;
		height:48px !important;
	}
	.ca-brand .custom-logo{
		height:46px !important;
		max-height:46px !important;
		transform:translateX(-2px) scale(2.0) !important;
	}
}

@media(max-width:600px){
	.ca-brand{
		width:62px !important;
		min-width:62px !important;
	}
	.ca-brand .custom-logo-link{
		width:62px !important;
		max-width:62px !important;
		height:46px !important;
	}
	.ca-brand .custom-logo{
		height:44px !important;
		max-height:44px !important;
		transform:translateX(-2px) scale(1.9) !important;
	}
}


/* =========================================================
   v7 / DEDICATED TRANSPARENT LOGO
   ========================================================= */
.ca-brand{
	width:auto !important;
	min-width:0 !important;
	height:50px !important;
	overflow:visible !important;
	display:flex !important;
	align-items:center !important;
}
.ca-dedicated-logo{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
	height:50px !important;
	width:auto !important;
	padding:0 !important;
	margin:0 !important;
	background:transparent !important;
	line-height:0 !important;
}
.ca-dedicated-logo img{
	display:block !important;
	width:auto !important;
	height:34px !important;
	max-width:none !important;
	max-height:none !important;
	object-fit:contain !important;
	transform:none !important;
	mix-blend-mode:normal !important;
	margin:0 !important;
	padding:0 !important;
	background:transparent !important;
}
@media(max-width:900px){
	.ca-brand,.ca-dedicated-logo{height:48px !important;}
	.ca-dedicated-logo img{height:32px !important;}
}
@media(max-width:600px){
	.ca-brand,.ca-dedicated-logo{height:46px !important;}
	.ca-dedicated-logo img{height:30px !important;}
}


/* =========================================================
   v8 / USER LOGO — FINAL SIZE PASS
   Uses the user-provided proper C mark.
   Header remains 50px; visible logo is 43px.
   ========================================================= */

.ca-brand,
.ca-dedicated-logo{
	height:50px !important;
	min-height:50px !important;
	display:flex !important;
	align-items:center !important;
	overflow:visible !important;
}

.ca-dedicated-logo{
	width:auto !important;
	padding:0 !important;
	margin:0 !important;
	line-height:0 !important;
}

.ca-dedicated-logo img{
	display:block !important;
	width:auto !important;
	height:43px !important;
	max-width:none !important;
	max-height:none !important;
	object-fit:contain !important;
	transform:none !important;
	mix-blend-mode:normal !important;
	margin:0 !important;
	padding:0 !important;
	background:transparent !important;
}

@media(max-width:900px){
	.ca-brand,
	.ca-dedicated-logo{
		height:48px !important;
		min-height:48px !important;
	}
	.ca-dedicated-logo img{
		height:40px !important;
	}
}

@media(max-width:600px){
	.ca-brand,
	.ca-dedicated-logo{
		height:46px !important;
		min-height:46px !important;
	}
	.ca-dedicated-logo img{
		height:38px !important;
	}
}


/* =========================================================
   v10 / CLEAN USER LOGO 64PX
   Uses the user's original high-resolution logo.
   No screenshot extraction, no AI generation, no blend mode.
   ========================================================= */

.ca-site-header,
.ca-site-header-inner,
.ca-brand,
.ca-dedicated-logo{
	overflow:visible !important;
}

.ca-brand{
	position:relative !important;
	height:50px !important;
	min-height:50px !important;
	width:80px !important;
	min-width:80px !important;
	display:flex !important;
	align-items:center !important;
	z-index:5 !important;
}

.ca-dedicated-logo{
	position:relative !important;
	display:block !important;
	width:64px !important;
	height:50px !important;
	margin:0 !important;
	padding:0 !important;
	line-height:0 !important;
	background:transparent !important;
}

.ca-dedicated-logo img{
	position:absolute !important;
	left:0 !important;
	top:50% !important;
	width:64px !important;
	height:64px !important;
	max-width:none !important;
	max-height:none !important;
	object-fit:contain !important;
	transform:translateY(-50%) !important;
	mix-blend-mode:normal !important;
	background:transparent !important;
	margin:0 !important;
	padding:0 !important;
	image-rendering:auto !important;
}

.ca-site-header-inner{
	grid-template-columns:92px auto 1fr !important;
}

@media(max-width:900px){
	.ca-brand{
		height:48px !important;
		min-height:48px !important;
		width:70px !important;
		min-width:70px !important;
	}
	.ca-dedicated-logo{
		width:58px !important;
		height:48px !important;
	}
	.ca-dedicated-logo img{
		width:58px !important;
		height:58px !important;
	}
	.ca-site-header-inner{
		grid-template-columns:76px 1fr !important;
	}
}

@media(max-width:600px){
	.ca-brand{
		height:46px !important;
		min-height:46px !important;
		width:64px !important;
		min-width:64px !important;
	}
	.ca-dedicated-logo{
		width:54px !important;
		height:46px !important;
	}
	.ca-dedicated-logo img{
		width:54px !important;
		height:54px !important;
	}
	.ca-site-header-inner{
		grid-template-columns:70px 1fr !important;
	}
}


/* =========================================================
   v11 / TRUE VECTOR SVG LOGO
   Same layout/size as v10, SVG only.
   ========================================================= */
.ca-dedicated-logo img{
	width:64px !important;
	height:64px !important;
	image-rendering:auto !important;
	shape-rendering:geometricPrecision;
}

@media(max-width:900px){
	.ca-dedicated-logo img{
		width:58px !important;
		height:58px !important;
	}
}

@media(max-width:600px){
	.ca-dedicated-logo img{
		width:54px !important;
		height:54px !important;
	}
}


/* =========================================================
   v12 / LOGO POSITION FINISH ONLY
   Size, SVG quality, header height unchanged.
   ========================================================= */

.ca-dedicated-logo img{
	left:-10px !important;
	top:calc(50% - 3px) !important;
}

/* Keep the same visual move on smaller screens, just slightly gentler. */
@media(max-width:900px){
	.ca-dedicated-logo img{
		left:-8px !important;
		top:calc(50% - 2px) !important;
	}
}

@media(max-width:600px){
	.ca-dedicated-logo img{
		left:-6px !important;
		top:calc(50% - 2px) !important;
	}
}


/* =========================================================
   v13 / LOGO POSITION LOCK
   Measured from actual v11 -> v12 screenshots:
   horizontal is good; only raise the mark enough to clear Hero.
   ========================================================= */

.ca-dedicated-logo img{
	left:-10px !important;
	top:calc(50% - 8px) !important;
}

@media(max-width:900px){
	.ca-dedicated-logo img{
		left:-8px !important;
		top:calc(50% - 6px) !important;
	}
}

@media(max-width:600px){
	.ca-dedicated-logo img{
		left:-6px !important;
		top:calc(50% - 5px) !important;
	}
}


/* =========================================================
   v14 / LOGO VERTICAL FINAL — desktop only
   v13 -> 3px down. Everything else unchanged.
   ========================================================= */

.ca-dedicated-logo img{
	left:-10px !important;
	top:calc(50% - 5px) !important;
}

@media(max-width:900px){
	.ca-dedicated-logo img{
		left:-8px !important;
		top:calc(50% - 6px) !important;
	}
}

@media(max-width:600px){
	.ca-dedicated-logo img{
		left:-6px !important;
		top:calc(50% - 5px) !important;
	}
}


/* =========================================================
   v15 / LOGO FINAL GEOMETRY
   50px header + 44px SVG logo, true vertical center.
   No overhang. No top/bottom nudging. No transform hacks.
   ========================================================= */

.ca-site-header{
	height:50px !important;
	min-height:50px !important;
	overflow:visible !important;
}

.ca-site-header-inner{
	height:50px !important;
	min-height:50px !important;
	align-items:center !important;
	overflow:visible !important;
}

.ca-brand{
	position:static !important;
	height:50px !important;
	min-height:50px !important;
	width:60px !important;
	min-width:60px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
	overflow:visible !important;
}

.ca-dedicated-logo{
	position:static !important;
	width:44px !important;
	height:50px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
	margin:0 !important;
	padding:0 !important;
	line-height:0 !important;
	overflow:visible !important;
	background:transparent !important;
}

.ca-dedicated-logo img{
	position:static !important;
	display:block !important;
	width:44px !important;
	height:44px !important;
	max-width:44px !important;
	max-height:44px !important;
	object-fit:contain !important;
	margin:0 !important;
	padding:0 !important;
	transform:none !important;
	top:auto !important;
	left:auto !important;
	right:auto !important;
	bottom:auto !important;
	mix-blend-mode:normal !important;
	image-rendering:auto !important;
}

.ca-site-header-inner{
	grid-template-columns:72px auto 1fr !important;
}

@media(max-width:900px){
	.ca-site-header,
	.ca-site-header-inner,
	.ca-brand,
	.ca-dedicated-logo{
		height:48px !important;
		min-height:48px !important;
	}
	.ca-brand{
		width:56px !important;
		min-width:56px !important;
	}
	.ca-dedicated-logo{
		width:42px !important;
	}
	.ca-dedicated-logo img{
		width:42px !important;
		height:42px !important;
		max-width:42px !important;
		max-height:42px !important;
	}
	.ca-site-header-inner{
		grid-template-columns:64px 1fr !important;
	}
}

@media(max-width:600px){
	.ca-site-header,
	.ca-site-header-inner,
	.ca-brand,
	.ca-dedicated-logo{
		height:46px !important;
		min-height:46px !important;
	}
	.ca-brand{
		width:52px !important;
		min-width:52px !important;
	}
	.ca-dedicated-logo{
		width:40px !important;
	}
	.ca-dedicated-logo img{
		width:40px !important;
		height:40px !important;
		max-width:40px !important;
		max-height:40px !important;
	}
	.ca-site-header-inner{
		grid-template-columns:60px 1fr !important;
	}
}


/* =========================================================
   v16 / HEADER BALANCE FINAL
   Give the ivory header proper breathing room.
   Desktop: 64px header / 52px SVG logo.
   ========================================================= */

.ca-site-header{
	height:64px !important;
	min-height:64px !important;
}

.ca-site-header-inner{
	height:64px !important;
	min-height:64px !important;
	align-items:center !important;
	overflow:visible !important;
}

.ca-brand{
	position:static !important;
	height:64px !important;
	min-height:64px !important;
	width:68px !important;
	min-width:68px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
	overflow:visible !important;
	transform:translateY(-1px) !important;
}

.ca-dedicated-logo{
	position:static !important;
	width:52px !important;
	height:64px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
	margin:0 !important;
	padding:0 !important;
	line-height:0 !important;
	overflow:visible !important;
	background:transparent !important;
}

.ca-dedicated-logo img{
	position:static !important;
	display:block !important;
	width:52px !important;
	height:52px !important;
	max-width:52px !important;
	max-height:52px !important;
	object-fit:contain !important;
	margin:0 !important;
	padding:0 !important;
	transform:none !important;
	top:auto !important;
	left:auto !important;
	right:auto !important;
	bottom:auto !important;
	mix-blend-mode:normal !important;
	image-rendering:auto !important;
}

/* Give navigation a touch more room and optically lift it. */
.ca-desktop-nav{
	height:64px !important;
	align-items:center !important;
	transform:translateY(-2px) !important;
}

.ca-header-tools{
	height:64px !important;
	align-items:center !important;
	transform:translateY(-2px) !important;
}

/* Keep the logo/navigation relationship comfortable. */
.ca-site-header-inner{
	grid-template-columns:82px auto 1fr !important;
}

/* Tablet */
@media(max-width:900px){
	.ca-site-header,
	.ca-site-header-inner{
		height:60px !important;
		min-height:60px !important;
	}

	.ca-brand{
		height:60px !important;
		min-height:60px !important;
		width:64px !important;
		min-width:64px !important;
		transform:translateY(-1px) !important;
	}

	.ca-dedicated-logo{
		width:48px !important;
		height:60px !important;
	}

	.ca-dedicated-logo img{
		width:48px !important;
		height:48px !important;
		max-width:48px !important;
		max-height:48px !important;
	}

	.ca-header-tools{
		height:60px !important;
		transform:translateY(-1px) !important;
	}

	.ca-site-header-inner{
		grid-template-columns:70px 1fr !important;
	}
}

/* Mobile */
@media(max-width:600px){
	.ca-site-header,
	.ca-site-header-inner{
		height:58px !important;
		min-height:58px !important;
	}

	.ca-brand{
		height:58px !important;
		min-height:58px !important;
		width:60px !important;
		min-width:60px !important;
		transform:translateY(-1px) !important;
	}

	.ca-dedicated-logo{
		width:46px !important;
		height:58px !important;
	}

	.ca-dedicated-logo img{
		width:46px !important;
		height:46px !important;
		max-width:46px !important;
		max-height:46px !important;
	}

	.ca-header-tools{
		height:58px !important;
		transform:translateY(-1px) !important;
	}

	.ca-site-header-inner{
		grid-template-columns:66px 1fr !important;
	}
}


/* =========================================================
   v17 / MOBILE COMPACT PASS
   Desktop remains unchanged.
   Goal: preserve the world/brand feeling while letting users
   reach SHOP and later sections sooner on iPhone.
   ========================================================= */

@media(max-width:820px){

	/* HERO: image remains first, but takes less vertical space */
	.ca-hero-image{
		min-height:44vh !important;
		background-position:54% 50% !important;
	}

	.ca-hero-copy{
		padding:34px 22px 42px !important;
	}

	.ca-eyebrow{
		margin-bottom:16px !important;
	}

	.ca-hero-ja{
		margin-top:20px !important;
	}

	.ca-hero-note{
		margin-top:12px !important;
		line-height:1.75 !important;
	}

	/* IDEA: reach SHOP sooner */
	.ca-intro{
		padding:58px 0 54px !important;
	}

	.ca-intro-grid{
		gap:26px !important;
	}

	.ca-kicker{
		margin-bottom:16px !important;
	}

	.ca-rule{
		margin-bottom:22px !important;
	}

	.ca-jp-title{
		margin-top:16px !important;
	}

	.ca-body-copy p{
		margin-bottom:14px !important;
	}

	/* SHOP: keep product size/readability, just trim vertical air */
	.ca-shop-section{
		padding:54px 0 64px !important;
	}

	.ca-section-head{
		margin-bottom:28px !important;
	}

	/* DARK EDITORIAL */
	.ca-world{
		padding:62px 0 68px !important;
	}

	.ca-world-grid{
		gap:12px !important;
	}

	/* Make editorial imagery less vertically dominant on mobile */
	.ca-world-card.ca-tall img,
	.ca-world-card.ca-square img{
		aspect-ratio:3 / 2 !important;
	}

	.ca-world-copy{
		margin-top:20px !important;
		gap:24px !important;
	}

	/* CIRCLE AROUND #1 */
	.ca-archive{
		padding:58px 0 64px !important;
	}

	.ca-archive-head{
		margin-bottom:22px !important;
	}

	.ca-archive-meta{
		margin-top:10px !important;
	}

	.ca-archive-grid{
		gap:8px !important;
	}

	.ca-archive-main img{
		aspect-ratio:3 / 2 !important;
	}

	.ca-archive-small img,
	.ca-archive-poster img{
		aspect-ratio:4 / 3 !important;
	}

	.ca-archive-caption{
		margin-top:12px !important;
	}

	/* ABOUT */
	.ca-about{
		padding:60px 0 66px !important;
	}

	.ca-about-grid{
		gap:26px !important;
	}

	.ca-about-image img{
		aspect-ratio:3 / 2 !important;
	}

	.ca-about-body{
		margin-top:18px !important;
	}

	.ca-about-links{
		margin-top:26px !important;
	}

	/* FINAL BLUE */
	.ca-close{
		padding-top:46px !important;
	}

	.ca-close-inner{
		gap:18px !important;
	}

	.ca-micro-footer{
		margin-top:34px !important;
	}

}

/* Slightly tighter still on narrow iPhones, without changing font sizes. */
@media(max-width:480px){

	.ca-hero-image{
		min-height:42vh !important;
	}

	.ca-hero-copy{
		padding-top:30px !important;
		padding-bottom:38px !important;
	}

	.ca-intro{
		padding-top:52px !important;
		padding-bottom:50px !important;
	}

	.ca-shop-section{
		padding-top:50px !important;
		padding-bottom:58px !important;
	}

	.ca-world{
		padding-top:56px !important;
		padding-bottom:62px !important;
	}

	.ca-archive{
		padding-top:54px !important;
		padding-bottom:58px !important;
	}

	.ca-about{
		padding-top:54px !important;
		padding-bottom:60px !important;
	}

	.ca-close{
		padding-top:42px !important;
	}
}


/* =========================================================
   v20 / MOBILE HERO REFRAME 3
   iPhone hero only: shift the object a little lower so the
   bottom gap matches the top rosemary gap more closely.
   ========================================================= */
@media(max-width:820px){
	.ca-hero-image{
		background-position:54% 18% !important;
	}
}

@media(max-width:480px){
	.ca-hero-image{
		background-position:54% 10% !important;
	}
}


/* =========================================================
   v21 / HERO POSITION PIXEL TWEAK
   - Mobile hero: move subject about 20px lower
   - Desktop/Web hero: move subject about 40px lower
   ========================================================= */
@media(min-width:821px){
	.ca-hero-image{
		background-position:55% calc(52% - 40px) !important;
	}
}

@media(max-width:820px){
	.ca-hero-image{
		background-position:54% calc(18% - 20px) !important;
	}
}

@media(max-width:480px){
	.ca-hero-image{
		background-position:54% calc(10% - 20px) !important;
	}
}


/* =========================================================
   v22 / HERO POSITION DIRECTION FIX
   Previous v21 pixel shift went in the opposite visual direction.
   This override moves the visible photo LOWER as requested.
   - Desktop/Web hero: +40px lower
   - Mobile hero: +20px lower
   ========================================================= */
@media(min-width:821px){
	.ca-hero-image{
		background-position:55% calc(52% + 40px) !important;
	}
}

@media(max-width:820px){
	.ca-hero-image{
		background-position:54% calc(18% + 20px) !important;
	}
}

@media(max-width:480px){
	.ca-hero-image{
		background-position:54% calc(10% + 20px) !important;
	}
}


/* =========================================================
   v25 / HERO 10PX FURTHER UP — REAL DEVICE TEST
   Requested from v24:
   - Web/Desktop hero photo: move up by another 10px
   - iPhone/Mobile hero photo: move up by another 10px
   Resulting effective offsets:
   - Desktop/Web: +27px -> +17px
   - Mobile: +3px -> -7px
   ========================================================= */
@media(min-width:821px){
	.ca-hero-image{
		background-position:55% calc(52% + 17px) !important;
	}
}

/* =========================================================
   v27 REAL DEVICE iPHONE +7PX TWEAK
   Web/Desktop remains exactly as v25.
   iPhone/Mobile hero photo: move up by another 7px from v26.
   Mobile effective offset: -20px -> -27px
   ========================================================= */
@media(max-width:820px){
	.ca-hero-image{
		background-position:54% calc(18% - 27px) !important;
	}
}

@media(max-width:480px){
	.ca-hero-image{
		background-position:54% calc(10% - 27px) !important;
	}
}

/* =========================================================
   v36 / STATIC PLAIN PHOTO WALL
   No motion. No frames/mats. Larger photos with varied sizes only.
   ========================================================= */
.ca-exhibition-shapes{
	padding:112px 0 122px !important;
}
.ca-exhibition-shapes .ca-wrap{
	position:relative;
}
.ca-gallery-room{
	display:grid;
	grid-template-columns:1.08fr .92fr;
	gap:42px;
	align-items:start;
}
.ca-gallery-stage{
	position:relative;
	margin:0;
	background-color:#d2cbc0;
	background-image:
		repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 5px),
		repeating-linear-gradient(90deg,rgba(30,27,23,.012) 0,rgba(30,27,23,.012) 1px,transparent 1px,transparent 6px);
	overflow:hidden;
	border:1px solid rgba(240,235,227,.18);
	box-shadow:inset 0 0 0 1px rgba(35,31,27,.035);
}
.ca-gallery-stage-exhibition{ min-height:620px; }
.ca-gallery-stage-shapes{ min-height:500px; margin-top:126px; }
.ca-gallery-stage-static .ca-world-tag{
	z-index:5;
	background:rgba(37,38,36,.90);
	border-color:rgba(255,255,255,.16);
	box-shadow:none;
}
.ca-static-card{
	position:absolute;
}
.ca-static-mat{
	width:100%;
	height:100%;
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	padding:0 !important;
}
.ca-static-mat::before{ display:none !important; }
.ca-static-mat img{
	display:block;
	width:100% !important;
	height:100% !important;
	margin:0 !important;
	object-fit:contain !important;
	object-position:center !important;
	box-shadow:none !important;
}
.ca-static-mat-poster{ padding:0 !important; }
.ca-static-mat-poster::before{ display:none !important; }
.ca-static-mat-poster img{
	width:100% !important;
	height:100% !important;
	margin:0 !important;
}
/* Left wall: 4 larger photographs, relaxed editorial spacing. */
.ca-static-card-ex1{ left:5%; top:7%; width:46%; height:31%; transform:none; }
.ca-static-card-ex2{ right:5%; top:15%; width:39%; height:27%; transform:none; }
.ca-static-card-ex3{ left:8%; bottom:12%; width:34%; height:38%; transform:none; }
.ca-static-card-ex4{ right:6%; bottom:10%; width:46%; height:31%; transform:none; }
/* Right wall: 2 photographs + vertical CA #1 poster on far right. */
.ca-static-card-sh1{ left:6%; top:12%; width:42%; height:31%; transform:none; }
.ca-static-card-sh2{ left:9%; bottom:13%; width:39%; height:31%; transform:none; }
.ca-static-card-poster{ right:4%; top:24%; width:43%; height:43%; transform:none; }
.ca-archive-note{
	margin-top:48px;
	padding:28px 30px 30px;
	background:#bfb2a1;
	color:var(--ca-ink);
	display:grid;
	grid-template-columns:.9fr 1.1fr;
	gap:56px;
	align-items:end;
}
.ca-archive-kicker{ margin-bottom:14px !important; }
.ca-archive-note .ca-kicker-ja{ color:#61594f !important; }
.ca-archive-name{
	font-family:Georgia,'Times New Roman',serif;
	font-size:clamp(28px,3.4vw,46px);
	line-height:1.02;
	letter-spacing:-.025em;
}
.ca-archive-name-generic{ max-width:10ch; }
.ca-archive-date{ display:none; }
.ca-archive-note-copy{ max-width:520px; justify-self:end; }
.ca-archive-note-copy .ca-jp-title{
	margin:0 0 15px !important;
	color:var(--ca-ink) !important;
	font-size:clamp(18px,1.8vw,24px) !important;
}
.ca-archive-note-copy>p:last-child{
	margin:0;
	font-size:11px;
	line-height:1.8;
	letter-spacing:.04em;
	color:#61594f;
}
.ca-exhibition-shapes .ca-world-copy{ margin-top:62px; }

@media(max-width:820px){
	.ca-exhibition-shapes{ padding:62px 0 68px !important; }
	.ca-gallery-room{ grid-template-columns:1fr; gap:14px; }
	.ca-gallery-stage-exhibition,
	.ca-gallery-stage-shapes{ min-height:0; aspect-ratio:4 / 3; margin-top:0; }
	.ca-static-card-ex1{ left:5%; top:7%; width:47%; height:31%; }
	.ca-static-card-ex2{ right:5%; top:15%; width:39%; height:26%; }
	.ca-static-card-ex3{ left:7%; bottom:13%; width:34%; height:36%; }
	.ca-static-card-ex4{ right:6%; bottom:12%; width:46%; height:29%; }
	.ca-static-card-sh1{ left:5%; top:12%; width:41%; height:29%; }
	.ca-static-card-sh2{ left:8%; bottom:14%; width:39%; height:29%; }
	.ca-static-card-poster{ right:4%; top:24%; width:43%; height:43%; }
	.ca-archive-note{ margin-top:20px; padding:24px 22px 25px; grid-template-columns:1fr; gap:22px; }
	.ca-archive-note-copy{ justify-self:start; }
	.ca-exhibition-shapes .ca-world-copy{ margin-top:34px !important; }
}

@media(max-width:480px){
	.ca-exhibition-shapes{ padding-top:56px !important; padding-bottom:62px !important; }
	.ca-gallery-room{ gap:10px; }
	.ca-static-card-ex1{ left:4%; top:8%; width:48%; height:30%; }
	.ca-static-card-ex2{ right:4%; top:16%; width:40%; height:24%; }
	.ca-static-card-ex3{ left:5%; bottom:14%; width:35%; height:34%; }
	.ca-static-card-ex4{ right:5%; bottom:14%; width:47%; height:28%; }
	.ca-static-card-sh1{ left:4%; top:13%; width:42%; height:27%; }
	.ca-static-card-sh2{ left:6%; bottom:15%; width:39%; height:28%; }
	.ca-static-card-poster{ right:3%; top:25%; width:44%; height:42%; }
	.ca-archive-note{ margin-top:16px; padding:22px 18px 23px; }
	.ca-archive-name{ font-size:30px; }
}


/* =========================================================
   v38 / SAFARI WINDOWED HERO SAFETY + iPHONE GALLERY SIZE
   Desktop Hero:
   Keep the approved v25 framing, but render the photo on a
   vertically overscanned pseudo-layer. This preserves the
   full-window crop while preventing the sand background from
   appearing above the photo in narrower desktop windows.
   Mobile Hero positioning remains exactly as v27.
   ========================================================= */
@media(min-width:821px){
	.ca-hero-image{
		position:relative !important;
		overflow:hidden !important;
		background-image:none !important;
		background-color:var(--ca-sand) !important;
	}
	.ca-hero-image::before{
		content:"";
		position:absolute;
		left:0;
		right:0;
		top:-24px;
		bottom:-24px;
		background-image:url('images/hero-knot.jpeg');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:55% 52%;
		transform:translateY(17px);
		pointer-events:none;
	}
}

/* iPhone: make the seven static exhibition photos one step larger,
   while keeping a curated 2x2 / 2+1 balance and breathing room
   around the section labels. */
@media(max-width:480px){
	.ca-static-card-ex1{ left:2%; top:6%; width:51%; height:33%; }
	.ca-static-card-ex2{ right:2%; top:11%; width:44%; height:28%; }
	.ca-static-card-ex3{ left:3%; bottom:21%; width:39%; height:37%; }
	.ca-static-card-ex4{ right:3%; bottom:12%; width:50%; height:31%; }

	.ca-static-card-sh1{ left:3%; top:10%; width:46%; height:30%; }
	.ca-static-card-sh2{ left:4%; bottom:22%; width:43%; height:31%; }
	.ca-static-card-poster{ right:2%; top:20%; width:47%; height:48%; }
}
