/**
 * KF Theme — custom layout for 工房藤本 (Kobo Fujimoto)
 * Loaded after the Welcart Basic base stylesheet.
 * Namespaced with the `kf-` prefix so it never collides with
 * core theme / Welcart plugin classes.
 */



/* ==========================================================
   HEADER
   ========================================================== */
.kf-header{
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	display:flex;
	align-items:center;
	/* the hamburger is position:absolute (see .kf-hamburger) and no
	   longer contributes to this row's height, so the header's own
	   height is pinned to match it exactly. */
	height: var(--kf-hamburger-h);
	font-family: var(--kf-font-serif);
	transition: background-color .4s ease, box-shadow .4s ease;
	/* hamburger's current width/height, single source of truth — the
	   header icons (search/cart) and the left offset of .kf-header-right
	   size themselves off these so everything stays in sync at every
	   breakpoint. Redefined inside the tablet/phone media query below
	   alongside .kf-hamburger's own width/height. */
	--kf-hamburger-w: 60px;
	--kf-hamburger-h: 65px;
}
.kf-header.is-scrolled{
	background: rgba(246,243,238,0.93);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 14px rgba(23,19,15,0.08);
}

.kf-hamburger{
	/* pinned exactly to the header's top-left corner — taken out of
	   the flex flow so a taller sibling (.kf-header-right) never pushes
	   or vertically centers it away from (0,0). The fullscreen menu's
	   clip-path origin (30px 33px, below) is the center of this box,
	   so it only lines up correctly when this sits flush at 0,0. */
	position:absolute;
	top:0;
	left:0;
	width: var(--kf-hamburger-w);
	height: var(--kf-hamburger-h);
	background: var(--kf-red);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap: 7px;
	z-index: 220;
	border:0;
	cursor:pointer;
	/* vertical distance between two adjacent spans (line height + gap) —
	   how far spans 1/3 need to translate to meet at span 2's position
	   and form a true X. Kept as a variable (instead of a hardcoded 9px)
	   because the tablet/phone media query below now makes the gap
	   fluid via clamp(), so this has to stay in sync with it. */
	--kf-x-offset: 9px;
}
.kf-hamburger span{
	display:block;
	width: 34px;
	height: 2px;
	background: var(--kf-white);
	transition: transform .45s var(--kf-ease-spring), opacity .3s ease;
}
.kf-menu-open .kf-hamburger span:nth-child(1){ transform: translateY(var(--kf-x-offset)) rotate(45deg); }
.kf-menu-open .kf-hamburger span:nth-child(2){ transform: translateX(14px); opacity:0; }
.kf-menu-open .kf-hamburger span:nth-child(3){ transform: translateY(calc(-1 * var(--kf-x-offset))) rotate(-45deg); }

/* menu open: the hamburger itself becomes the close control, in the
   same position/size — background flips to white, its own spans
   (already rotated into an X by the rules above) flip to red. */
.kf-menu-open .kf-hamburger{ background: var(--kf-white); }
.kf-menu-open .kf-hamburger span{ background: var(--kf-red); }

.kf-header-right{
	display:flex;
	align-items:center;
	/* left-aligned, starting ~2rem past the (absolutely positioned)
	   hamburger — order: 陶芸家 藤本智弘 → カート → 検索 (see header.php). */
	margin-left: calc(var(--kf-hamburger-w) + 2rem);
	gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.8rem);
	padding: 10px clamp(1.2rem, 0.9rem + 1vw, 2.2rem) 0 0;
}

.kf-header-credit{
	display:flex;
	align-items:baseline;
	gap: 0.55em;
	color: var(--kf-black);
	opacity: 0;
	transform: translateX(10px);
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	pointer-events:none;
	transition: opacity .5s ease, transform .5s ease, max-width .5s ease;
}
.kf-header.is-scrolled .kf-header-credit,
.kf-header-credit--static{
	opacity: 1;
	transform: translateX(0);
	max-width: 16em;
	pointer-events:auto;
}
.kf-header-credit-link{
	display:flex;
	align-items:baseline;
	gap: 0.55em;
	color: inherit;
	text-decoration:none;
}
.kf-header-credit .kf-role{ font-size: var(--kf-fs-credit-role-header); letter-spacing:.04em; }
.kf-header-credit .kf-name{ font-size: var(--kf-fs-credit-name-header); font-weight:600; letter-spacing:.06em; }
/* menu open: white text regardless of page, to read against the
   hamburger menu's own background/overlay. */
.kf-menu-open .kf-header-credit{ color: var(--kf-white); }

.kf-icon-group{ display:flex; align-items:center; gap: clamp(0.7rem, 0.5rem + 0.8vw, 1.3rem); }

.kf-icon-wrap{ position:relative; }
.kf-icon-wrap[data-tooltip]::after{
	content: attr(data-tooltip);
	position:absolute;
	top: calc(100% + 10px);
	right: 0;
	background: var(--kf-ink);
	color: var(--kf-white);
	font-size: var(--kf-fs-2xs);
	letter-spacing:.04em;
	white-space: nowrap;
	padding: 0.5em 0.85em;
	border-radius: 3px;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events:none;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 5;
}
.kf-icon-wrap[data-tooltip]::before{
	content:"";
	position:absolute;
	top: calc(100% + 5px);
	right: 12px;
	border: 5px solid transparent;
	border-bottom-color: var(--kf-ink);
	opacity:0;
	transition: opacity .25s ease;
	pointer-events:none;
}
.kf-icon-wrap:hover::after, .kf-icon-wrap:focus-within::after{ opacity:1; transform:translateY(0); }
.kf-icon-wrap:hover::before, .kf-icon-wrap:focus-within::before{ opacity:1; }

.kf-icon-btn{
	height: var(--kf-hamburger-h);
	padding: 0 0.5em;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	border:0;
	background:none;
	cursor:pointer;
}
/* Font Awesome icons (<i class="fa-solid ...">) — sized to ~35% of the
   hamburger's own height so both ends of the header read as one scale. */
.kf-icon-btn i{
	font-size: calc(var(--kf-hamburger-h) * 0.35);
	line-height: 1;
	color: var(--kf-white);
	transition: color .4s ease;
}
.kf-header.is-scrolled .kf-icon-btn i{ color: var(--kf-black); }
/* Front page keeps white icons (over the hero image); every other page
   has no dark hero backdrop, so icons default to a plain dark gray —
   except while the hamburger menu is open, which stays white everywhere
   (this rule must come after the .kf-header--inner one to win the tie). */
.kf-header--inner .kf-icon-btn i{ color: #333; }
.kf-menu-open .kf-icon-btn i{ color: var(--kf-white); }

.kf-cart-badge{
	position:absolute;
	top: 5px;
    right: -10px;
	min-width: 1.35em;
	height: 1.35em;
	padding: 0 0.15em;
	border-radius: 50%;
	background: var(--kf-red);
	color: var(--kf-white);
	font-size: var(--kf-fs-2xs);
	line-height: 1.35em;
	text-align:center;
	font-weight:600;
	box-shadow: 0 0 0 2px var(--kf-black);
}
.kf-header.is-scrolled .kf-cart-badge{ box-shadow: 0 0 0 2px var(--kf-paper); }

.kf-search-slot{ display:flex; align-items:center; position:relative; }

/* Growing/clipping container — see .kf-is-open below. On tablet/phone
   (<=980px) this becomes a full-width dark strip instead, with the
   pill (.kf-search-box) centered inside it — see the breakpoint block
   further down. */
.kf-search-form{
	max-width: 0;
	overflow:hidden;
	opacity: 0;
	transition: max-width .45s ease, opacity .3s ease;
}
.kf-search-slot.kf-is-open .kf-search-form{
	max-width: 20rem;
	opacity: 1;
	margin-right: 0.6rem;
}
/* Pill: icon + input + × close button in one rounded, bordered bar. */
.kf-search-box{
	display:flex;
	align-items:center;
	gap: 0.6em;
	border: 1px solid var(--kf-black);
	border-radius: 999px;
	background: var(--kf-white);
	padding: 0.4em 0.5em 0.4em 1em;
	white-space: nowrap;
}
.kf-search-form-icon{
	flex: 0 0 auto;
	font-size: var(--kf-fs-sm);
	color: var(--kf-black);
}
.kf-search-form input{
	flex: 1 1 auto;
	width: 14rem;
	min-width: 0;
	max-width: 40vw;
	border: 0;
	background: transparent;
	font-family: var(--kf-font-serif);
	font-size: var(--kf-fs-sm);
	padding: 0;
	color: var(--kf-black);
}
.kf-search-form input::placeholder{ color: rgba(51,51,51,.55); }
.kf-search-form input:focus{ outline:none; }
.kf-search-close{
	flex: 0 0 auto;
	width: 1.7em;
	height: 1.7em;
	display:flex;
	align-items:center;
	justify-content:center;
	border:0;
	border-radius: 50%;
	background: var(--kf-black);
	color: var(--kf-white);
	font-size: var(--kf-fs-2xs);
	cursor:pointer;
	transition: background .3s ease;
}
.kf-search-close:hover{ background: var(--kf-red); }

/* ==========================================================
   FULLSCREEN MENU
   ========================================================== */
.kf-fullscreen-menu{
	position:fixed;
	inset:0;
	background: var(--kf-red);
	z-index: 200;
	clip-path: circle(3% at 30px 33px);
	opacity: 0;
	pointer-events:none;
	transition: clip-path .75s var(--kf-ease-spring), opacity .2s ease;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family: var(--kf-font-serif);
}
.kf-menu-open .kf-fullscreen-menu{
	clip-path: circle(150% at 30px 33px);
	opacity: 1;
	pointer-events:auto;
}
.kf-menu-inner{
	text-align:center;
	max-height: 88vh;
	overflow-y:auto;
	padding: 1rem;
}
.kf-menu-list{
	list-style:none;
	margin:0 0 clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
	padding:0;
	display:flex;
	flex-direction:column;
	gap: clamp(1.1rem, 0.9rem + 1vw, 1.9rem);
}
.kf-menu-list a{
	font-size: var(--kf-fs-xl);
	color: var(--kf-white);
	text-decoration:none;
	letter-spacing:.08em;
	position:relative;
	padding-bottom:.15em;
}
.kf-menu-list a::after{
	content:"";
	position:absolute; left:50%; bottom:0;
	width:0; height:1px;
	background: var(--kf-white);
	transition: width .3s ease, left .3s ease;
}
.kf-menu-list a:hover::after{ width:100%; left:0; }

.kf-menu-member{
	list-style:none;
	margin:0; padding: 1.2rem 0 0;
	border-top: 1px solid rgba(255,255,255,.35);
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap: 1rem 1.6rem;
	font-size: var(--kf-fs-sm);
}
.kf-menu-member a{ color: var(--kf-white); text-decoration: underline; }

/* ==========================================================
   HERO (front page only)
   ========================================================== */
.kf-hero{
	position:relative;
	height: 100vh;
	min-height: 560px;
	overflow:hidden;
	background: var(--kf-ink);
	
}
.kf-hero-slides{ position:absolute; inset:0; }
.kf-hero-slide{
	position:absolute; inset:0;
	opacity:0;
	transition: opacity 2.4s ease;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.kf-hero-slide.kf-is-active{ opacity:1; }

/* real photo, when present (see front-page.php: only rendered once
   images/slide1.webp etc. actually exist on disk) sits on top of this */
.kf-hero-slide img{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
}

/* placeholder tone — visible until real photography is added */
.kf-hero-slide--1{ background-image:
	radial-gradient(120% 90% at 78% 30%, rgba(255,235,205,.16), transparent 60%),
	linear-gradient(115deg,#4a372a 0%,#6b4c35 34%,#8a6142 58%,#3c2c22 100%); }
.kf-hero-slide--2{ background-image:
	radial-gradient(110% 90% at 70% 40%, rgba(255,225,190,.18), transparent 62%),
	linear-gradient(120deg,#3f3128 0%,#755438 40%,#a3764c 66%,#33261d 100%); }
.kf-hero-slide--3{ background-image:
	radial-gradient(120% 90% at 65% 35%, rgba(255,230,200,.14), transparent 60%),
	linear-gradient(110deg,#362a22 0%,#5f4530 38%,#7c5a3c 64%,#241b15 100%); }

.kf-hero-panel{
	position:absolute; inset:0 auto 0 0;
	width: var(--kf-hero-panel-w);
	max-width: 78vw;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding: 0 clamp(1.6rem, 1.2rem + 2vw, 3.2rem);
	color: var(--kf-white);
	background: linear-gradient(to right,
		rgba(23,19,15,.94) 0%,
		rgba(23,19,15,.88) 42%,
		rgba(23,19,15,.55) 74%,
		rgba(23,19,15,0) 100%);
}


.kf-hero-eyebrow{
	font-size: var(--kf-fs-sm);
	letter-spacing:.22em;
	color: rgba(255,255,255,.78);
	margin-bottom: 0.9em;
}
.kf-hero-title{
	font-size: var(--kf-fs-hero);
	font-weight:600;
	line-height:1.5;
	letter-spacing:.02em;
	margin:0;
}
.kf-hero-title .kf-line{
	display:block;
	opacity:0;
	transform: translateY(22px);
	animation: kfHeroLineIn 1s cubic-bezier(.16,.84,.44,1) forwards;
}
.kf-hero-title .kf-line:nth-child(1){ animation-delay: .35s; }
.kf-hero-title .kf-line:nth-child(2){ animation-delay: .95s; }
@keyframes kfHeroLineIn{
	to{ opacity:1; transform: translateY(0); }
}

.kf-hero-btn{
	display:inline-block;
	margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	padding: 0.95em 2.1em;
	border: 1px solid var(--kf-red);
	color: var(--kf-white);
	font-size: var(--kf-fs-sm);
	letter-spacing:.1em;
	border-radius: 2px;
	text-decoration:none;
	transition: background-color .35s ease, color .35s ease;
	text-align: center;
	width: 65%;
	text-decoration: none;
}
.kf-hero-btn:hover{ background: var(--kf-red);
color: var(--kf-white);
}

.kf-hero-credit{
	position:absolute;
	top:0; right: clamp(1rem, .5rem + 2vw, 3rem);
	writing-mode: vertical-rl;
	text-orientation: upright;
	background: rgba(255,255,255,.5);
	color: var(--kf-black);
	padding: clamp(30px, calc(12.75px + 2.461vw), 60px) clamp(24px, calc(17.10px + 0.984vw), 36px);
	display:flex;
	gap: 1.5em;
	align-items:center;
	justify-content:center;
}
.kf-hero-credit .kf-role{ font-size: var(--kf-fs-credit-role-hero); letter-spacing:.12em; }
.kf-hero-credit .kf-name{ font-size: var(--kf-fs-credit-name-hero); font-weight:600; letter-spacing:.16em; }

.kf-hero-scroll-cue{
	position:absolute;
	left: 50%;
	bottom: clamp(1.2rem, .9rem + 1vw, 2rem);
	transform: translateX(-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:.5em;
	color: rgba(255,255,255,.8);
	font-size: var(--kf-fs-2xs);
	letter-spacing:.3em;
}
.kf-hero-scroll-cue::after{
	content:"";
	width:1px; height: 34px;
	background: rgba(255,255,255,.6);
	animation: kfScrollCue 1.8s ease-in-out infinite;
}
@keyframes kfScrollCue{
	0%{ transform: scaleY(0); transform-origin:top; opacity:0; }
	45%{ transform: scaleY(1); transform-origin:top; opacity:1; }
	55%{ transform: scaleY(1); transform-origin:bottom; opacity:1; }
	100%{ transform: scaleY(0); transform-origin:bottom; opacity:0; }
}

.kf-works{ scroll-margin-top: var(--kf-header-size); }

/* ==========================================================
   NEW WORKS CAROUSEL (front page only — "新作" category items)
   Cols-per-view is set responsively via --kf-carousel-cols in the
   breakpoints section below; the JS always moves by exactly one
   slide regardless of how many are visible at once.
   ========================================================== */
.kf-new-works{
	padding: clamp(2.4rem, 1.8rem + 3vw, 4.8rem) clamp(1.6rem, 1.2rem + 2vw, 3.2rem);
	background: var(--kf-white);
	--kf-carousel-cols: 6;
}
.kf-new-works-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	flex-wrap:wrap;
	gap: 0.8rem 1.6rem;
	margin-bottom: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}
.kf-section-title{
	display:flex;
	align-items:baseline;
	gap: 1em;
	margin:0;
	font-weight:600;
	color: var(--kf-black);
}
.kf-section-title-en{ font-size: var(--kf-fs-xl); letter-spacing:.14em; }
.kf-section-title-ja{ font-size: calc(var(--kf-fs-xl) * 0.75); font-weight:400; letter-spacing:.08em; }
.kf-section-link{
	font-size: var(--kf-fs-sm);
	color: var(--kf-black);
	text-decoration:none;
	letter-spacing:.05em;
	white-space:nowrap;
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, color .3s ease;
}
.kf-section-link:hover{ color: var(--kf-red); border-color: var(--kf-red); }

.kf-carousel{ position:relative; }
.kf-carousel-viewport{ overflow:hidden; touch-action: pan-y; }
.kf-carousel-track{
	display:flex;
	list-style:none;
	margin:0; padding:0;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
	will-change: transform;
	cursor:grab;
}
.kf-carousel-track.kf-is-dragging{ transition:none; cursor:grabbing; }
.kf-carousel-slide{
	flex: 0 0 calc(100% / var(--kf-carousel-cols));
	max-width: calc(100% / var(--kf-carousel-cols));
	padding: 0 clamp(.5rem, .3rem + .6vw, 1rem);
	box-sizing: border-box;
}
.kf-carousel-item{ display:flex; flex-direction:column; }
.kf-carousel-item-media{
	position:relative;
	overflow:hidden;
	background: var(--kf-white);
	margin-bottom: 0.9em;
}
.kf-carousel-item-media a{ display:block; }
.kf-carousel-item-media img{
	width:100%;
	height:auto;
	aspect-ratio: 1 / 1;
	object-fit:cover;
	display:block;
	pointer-events:none;
	-webkit-user-drag:none;
}
.kf-carousel-item-name{ font-size: var(--kf-fs-sm); letter-spacing:.03em; margin-bottom: 0.3em; }
.kf-carousel-item-name a{ color: var(--kf-black); text-decoration:none; }
/* Price: amount + "円 (税込)" suffix, side by side, bottom-left of the
   card (the item's natural block position — left-aligned, last child). */
.kf-carousel-item-price{
	display:flex;
	align-items:baseline;
	gap: 0.3em;
}
.kf-price-amount{
	font-size: calc(var(--kf-fs-sm) * 0.9);
	color: var(--kf-black);
	font-weight:600;
}
.kf-price-suffix{
	font-size: calc(var(--kf-fs-sm) * 0.9 * 0.85);
	color: var(--kf-black);
}

/* Hover-expand preview: photo/category/comment/button on top of the
   thumbnail. Gated to real hover + PC/tablet widths only — off entirely
   on touch phones (<=700px), per spec. */
.kf-carousel-item-hover{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-start;
	gap: 0.5em;
	padding: 1.2em;
	background: linear-gradient(to top, rgba(23,19,15,.88) 0%, rgba(23,19,15,.55) 55%, rgba(23,19,15,0) 100%);
	opacity:0;
	transform: scale(.97);
	transform-origin:center;
	transition: opacity .3s ease, transform .3s ease;
	pointer-events:none;
	z-index:2;
}
.kf-carousel-item-hover-cat{
	font-size: var(--kf-fs-2xs);
	letter-spacing:.14em;
	color: rgba(255,255,255,.85);
	text-transform:uppercase;
}
.kf-carousel-item-hover-comment{ margin:0; font-size: var(--kf-fs-xs); color: var(--kf-white); line-height:1.6; }
.kf-carousel-item-hover-btn{
	margin-top: 0.3em;
	font-size: var(--kf-fs-2xs);
	letter-spacing:.08em;
	color: var(--kf-white);
	text-decoration:none;
	border-bottom: 1px solid rgba(255,255,255,.6);
	padding-bottom:.1em;
}
@media (hover:hover) and (pointer:fine) and (min-width: 701px){
	.kf-carousel-item-media{ transition: transform .35s ease; transform-origin:center; z-index:1; }
	.kf-carousel-item:hover .kf-carousel-item-media,
	.kf-carousel-item:focus-within .kf-carousel-item-media{
		transform: scale(1.08);
		z-index:5;
		box-shadow: 0 18px 34px rgba(23,19,15,.28);
	}
	.kf-carousel-item:hover .kf-carousel-item-hover,
	.kf-carousel-item:focus-within .kf-carousel-item-hover{
		opacity:1;
		transform:scale(1);
		pointer-events:auto;
	}
}

.kf-carousel-arrow{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	width: clamp(2.2rem, 1.9rem + 1vw, 3rem);
	height: clamp(2.2rem, 1.9rem + 1vw, 3rem);
	border-radius:50%;
	border: 1px solid var(--kf-black);
	background: var(--kf-paper);
	color: var(--kf-black);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:10;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.kf-carousel-arrow:hover{ background: var(--kf-red); border-color: var(--kf-red); color: var(--kf-white); }
.kf-carousel-arrow i{ font-size: var(--kf-fs-xs); }
.kf-carousel-arrow--prev{ left: clamp(-1.1rem, -1.5rem + 1vw, -0.4rem); }
.kf-carousel-arrow--next{ right: clamp(-1.1rem, -1.5rem + 1vw, -0.4rem); }

.kf-carousel-dots{
	display:flex;
	justify-content:center;
	align-items:center;
	gap: 0.6em;
	margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}
.kf-carousel-dot{
	width:8px; height:8px;
	border-radius:50%;
	border: 1px solid var(--kf-black);
	background:transparent;
	padding:0;
	cursor:pointer;
	transition: background .3s ease, transform .3s ease;
}
.kf-carousel-dot.kf-is-active{ background: var(--kf-red); border-color: var(--kf-red); transform: scale(1.25); }

/* ==========================================================
   BREAKPOINTS  (1920 max down to 320)
   ========================================================== */

/* large tablet 981–1199 */
@media (max-width: 1199px){
	.kf-hero-panel{ width: 380px; }
	.kf-new-works{ --kf-carousel-cols: 3; }
}

/* tablet 701–980 */
@media (max-width: 980px){

	.kf-hero-panel::before,.kf-hero-panel::after{ display:none; }
	.kf-header-right{ gap: 0.8rem; margin-left: clamp(60px, calc(39.79px + 6.316vw), 84px);}

	.kf-header{
		--kf-hamburger-w: clamp(48px, calc(42.18px + 1.818vw), 60px);
		--kf-hamburger-h: clamp(52px, calc(45.70px + 1.970vw), 65px);
	}
	.kf-hamburger{
		width: var(--kf-hamburger-w);
		height: var(--kf-hamburger-h);
		gap: clamp(5px, calc(4.03px + 0.303vw), 7px);
		/* = span height (2px, fixed) + the gap above, so spans 1/3 still
		   land exactly on span 2 and form a clean X at this size too. */
		--kf-x-offset: clamp(7px, calc(6.03px + 0.303vw), 9px);
	}
	.kf-hamburger span{
		width: clamp(19px, calc(17.06px + 0.606vw), 23px);
	}

	/* Full-width dark strip fixed to the viewport, right below the
	   header — no longer anchored to (or moving with) the search icon.
	   The pill (.kf-search-box) is centered inside it. */
	.kf-search-form{
		position:fixed;
		top: var(--kf-hamburger-h);
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		max-height: 0;
		overflow:hidden;
		opacity: 0;
		margin-right: 0;
		background: var(--kf-black);
		display:flex;
		justify-content:center;
		align-items:center;
		padding: 0.5em 1rem;
		z-index: 10;
		transition: max-height .45s ease, opacity .3s ease;
	}
	.kf-search-slot.kf-is-open .kf-search-form{
		max-width: none;
		max-height: 6rem;
		opacity: 1;
		margin-right: 0;
	}
	.kf-search-box{
		width: 100%;
		max-width: min(90vw, 22rem);
	}

	.kf-new-works{ --kf-carousel-cols: 2; }
}

/* large phone 481–700 */
@media (max-width: 700px){
	.kf-hero{ height: clamp(480px, 82vh, 700px); }
	.kf-hero-credit{ padding: clamp(15px, calc(2.37px + 3.947vw), 30px)  clamp(16px, calc(9.26px + 2.105vw), 24px);
	right:0;}
	.kf-header-credit .kf-name {font-size: clamp(21px, calc(18.474px + 0.789vw), 24px);}
	.kf-header-credit .kf-role {font-size: clamp(16px, calc(14.316px + 0.526vw), 18px);}

	.kf-new-works{ --kf-carousel-cols: 1; }
	.kf-carousel-arrow--prev{ left: .4rem; }
	.kf-carousel-arrow--next{ right: .4rem; }
}

/* phone 400–481 */
@media (max-width: 481px){
	.kf-search-box{ max-width: min(92vw, 16rem); }
	.kf-search-form input{ width: 9rem; }
}

/* small phone 320–399 */
@media (max-width: 399px){
	.kf-icon-group{ gap: .55rem; }
	.kf-header-right{ padding-right: .8rem; }
	.kf-hero-btn{
	width: clamp(150px, calc(109.49px + 12.658vw), 160px);
}
	
}

@media (prefers-reduced-motion: reduce){
	.kf-hero-title .kf-line,
	.kf-hamburger span,
	.kf-fullscreen-menu,
	.kf-header-credit,
	.kf-search-form,
	.kf-hero-slide{
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}