/* Just Neckers — "Golden Hour" flavour (jn10). A wildshot blend of the three
   Nozomi liked, tied together with clotheslines:
     • Lodge      → warm dark timber wall, amber lamplight, wood grain
     • Spectrum   → the 24 fabric colours are the hero…
     • Clothesline→ …strung up as swatches pegged on ropes; gallery hangs too
     • Atelier    → monospace spec callouts + corner registration ticks
   Timber at golden hour, colours catching the light on the line. */
:root{
	--wood:#2a1d13;--wood2:#3a291b;--wood3:#4a3625;--seam:#160c04;
	--green:#33502f;--green-d:#263d24;--amber:#e8a838;--amber-d:#c6851f;
	--cream:#f3e9d6;--paper:#fffdf7;--sub:#c7b48f;--rope:#d8c290;--rule:#5a4227;
	--red:#e2313c;--red-d:#c11f2a;--accent:#e8a838;--wrap:1180px;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body.jn-golden{font-family:"Nunito Sans",-apple-system,"Segoe UI",sans-serif;color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;
	background-color:var(--wood)}
a{color:var(--amber);text-decoration:none}img{max-width:100%}
h1,h2,h3{margin:0 0 .35em;line-height:1.05}
.mono,.g-spec,.necker-sizes,.loc,.cart{font-family:"Space Mono",ui-monospace,monospace}

/* crisp tight wood grain (from Lodge, its final iteration) */
body.jn-golden{
	background-image:
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27150%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.016%200.55%27%20numOctaves%3D%273%27%20seed%3D%279%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%3CfeComponentTransfer%20in%3D%27t%27%20result%3D%27s%27%3E%3CfeFuncA%20type%3D%27gamma%27%20amplitude%3D%271.6%27%20exponent%3D%273.4%27%20offset%3D%27-0.2%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27s%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.08%20%200%200%200%200%200.05%20%200%200%200%200%200.02%20%200%200%200%200.8%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27240%27%20height%3D%27150%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E"),
		repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 2px,rgba(255,222,172,.06) 2px 3px,transparent 3px 130px),
		linear-gradient(90deg,#2f2217,#22190f 15%,#35271b 34%,#22190f 52%,#322518 72%,#22190f 90%,#2f2217);
	background-repeat:repeat,repeat,no-repeat;background-size:240px 150px,auto,auto;
	background-attachment:fixed,fixed,fixed;
}
body.jn-golden::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size:110px 110px}

/* ---- timber top bar ---- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:26px;padding:0 26px;height:72px;
	background:linear-gradient(#3d2c1d,#2c2016);border-bottom:3px solid var(--amber);box-shadow:0 2px 12px rgba(0,0,0,.55)}
.brand{display:inline-flex}.brand img{height:34px;display:block}
.mainnav{display:flex;gap:22px;margin-left:6px}
.mainnav a{color:var(--cream);font-weight:700;font-size:14px;letter-spacing:.02em;padding:5px 0;border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--amber)}.mainnav a.on{color:var(--amber);border-bottom-color:var(--amber)}
.tools{margin-left:auto;display:flex;align-items:center;gap:14px}
.loc{font-size:12px;font-weight:700;color:var(--cream);border:1.5px solid var(--amber);border-radius:3px;padding:6px 12px}
.cart{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--wood);background:var(--amber);border-radius:3px;padding:8px 16px}
.cart:hover{background:var(--amber-d)}#cart-count:not(:empty){margin-left:5px;color:var(--green-d)}
.navtog{display:none;margin-left:auto;background:none;border:0;font-size:26px;cursor:pointer;color:var(--cream)}

/* ---- hero: lamplit timber, colours on the line ---- */
.golden-hero{position:relative;overflow:hidden;padding:56px 26px 60px}
.golden-hero .lamp{position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(1100px 620px at 78% -8%,rgba(232,168,56,.30),transparent 62%)}
.golden-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
	box-shadow:inset 0 34px 66px -44px rgba(0,0,0,.85),inset 0 -34px 66px -44px rgba(0,0,0,.7)}
.g-wrap{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.02fr 1.18fr;gap:36px;align-items:center}
.g-wrap>*{min-width:0}

/* copy column */
.g-copy{position:relative}
.kick{display:inline-block;font-family:"Space Mono",monospace;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:#fff;background:var(--red);padding:6px 14px;border-radius:2px;box-shadow:0 2px 0 var(--red-d)}
.golden-hero h1{font-family:Anton,"Arial Narrow",sans-serif;font-weight:400;font-size:80px;line-height:.92;letter-spacing:.005em;
	text-transform:uppercase;color:var(--cream);margin:18px 0 10px;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.golden-hero h1 em{font-style:normal;color:var(--amber)}
.golden-hero p{font-size:19px;color:var(--sub);max-width:28em;margin:0 0 26px}
.g-cta{display:inline-flex;align-items:center;gap:11px;font-family:Oswald,"Nunito Sans",sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em;
	text-transform:uppercase;color:var(--wood);background:var(--amber);padding:15px 30px;border-radius:4px;border-bottom:4px solid var(--amber-d);
	box-shadow:0 6px 18px rgba(0,0,0,.45);transition:.14s}
.g-cta i{font-style:normal;transition:transform .14s}
.g-cta:hover{background:#f2b74a}.g-cta:hover i{transform:translateX(4px)}
#overlay a.g-cta{color:var(--wood)}

/* atelier spec strip w/ registration corners */
.g-spec{position:relative;display:inline-flex;flex-wrap:wrap;gap:18px;margin-top:30px;padding:12px 18px;
	font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);border:1px solid var(--rule)}
.g-spec b{color:var(--amber);font-weight:700}
.g-spec .tick{position:absolute;width:9px;height:9px;border:2px solid var(--amber)}
.g-spec .tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
.g-spec .tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
.g-spec .bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
.g-spec .br{bottom:-2px;right:-2px;border-left:0;border-top:0}

/* the colour lines: swatches pegged on ropes (Spectrum × Clothesline) */
.g-lines{display:flex;flex-direction:column;gap:30px;padding-top:8px;min-width:0}
.rope{position:relative;display:flex;justify-content:center;gap:14px;padding-top:16px;min-width:0}
.rope:before{content:"";position:absolute;left:-2%;right:-2%;top:4px;height:3px;border-radius:3px;
	background:repeating-linear-gradient(90deg,var(--rope) 0 9px,#b89a5f 9px 11px);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.rope:nth-child(2):before{left:0;right:0;top:2px}
.sw{position:relative;width:52px;height:66px;border-radius:3px 3px 4px 4px;background:var(--c,#ccc);
	box-shadow:0 8px 14px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.18),inset 0 -10px 14px -10px rgba(0,0,0,.45);
	transform:rotate(var(--r,0deg));transform-origin:top center;transition:transform .16s}
/* clothespin */
.sw:before{content:"";position:absolute;top:-9px;left:50%;width:8px;height:18px;margin-left:-4px;border-radius:3px;
	background:linear-gradient(#e0b062,#b6863f);box-shadow:0 1px 2px rgba(0,0,0,.45);z-index:2}
/* string from rope to pin */
.sw:after{content:"";position:absolute;top:-15px;left:50%;width:2px;height:8px;margin-left:-1px;background:var(--rope)}
.sw:hover{transform:rotate(0) translateY(4px)}
.rope .sw:nth-child(3n+1){--r:-4deg}.rope .sw:nth-child(3n+2){--r:2.5deg}.rope .sw:nth-child(3n){--r:5deg}

/* ---- the gallery: neckers pegged on the line, on timber panels ---- */
.pickline{max-width:var(--wrap);margin:0 auto;padding:14px 26px 20px;text-align:center}
.pickline>h2{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:40px;color:var(--amber);margin:8px 0 2px}
.pickline>.lede{color:var(--sub);font-size:16px;margin:0 auto 6px}
.page-head{display:none}
.necker-shape{margin:34px 0 10px}
.necker-shape-head{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:24px;position:relative}
.necker-shape-head h2{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:24px;color:var(--cream)}
.necker-sizes{font-size:12px;color:var(--sub)}
/* thin drafting rule under the section head (no rope — that lives on the hero
   and the footer now) */
.necker-shape-head:after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:1px;
	background:linear-gradient(90deg,transparent,#5a4227 14%,#5a4227 86%,transparent)}
.necker-grid{padding-top:4px}

/* Each pattern is drawn to spec on a drafting plate: dark graph ground, amber
   registration corner-marks, a mono drawing-number, and a title-block caption. */
.necker-card{position:relative;text-align:center;padding:22px 16px 12px;border-radius:4px;
	background-color:#241a10;
	background-image:linear-gradient(rgba(243,233,214,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(243,233,214,.06) 1px,transparent 1px);
	background-size:18px 18px;background-position:center;
	border:1px solid #5a4227;
	box-shadow:0 10px 22px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.22);
	transition:transform .16s,box-shadow .16s,border-color .16s}
/* registration corner brackets */
.necker-card:before,.necker-card:after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--amber);opacity:.85}
.necker-card:before{top:9px;left:9px;border-right:0;border-bottom:0}
.necker-card:after{bottom:9px;right:9px;border-left:0;border-top:0}
/* drawing number */
.necker-card .nk-code{position:absolute;top:10px;right:13px;font-family:"Space Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--amber);opacity:.85}
.necker-card:hover{transform:translateY(-4px);border-color:var(--amber);box-shadow:0 20px 34px -16px rgba(0,0,0,.85),inset 0 0 0 1px rgba(232,168,56,.28)}
.necker-thumb{aspect-ratio:1/.72;display:flex;align-items:center;justify-content:center;margin:8px 0 0}
.necker-thumb svg{width:76%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
/* title-block caption */
.necker-card h3{font-family:"Space Mono",monospace;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
	color:var(--cream);margin:12px 8px 0;padding-top:10px;border-top:1px solid #5a4227}
body.jn-golden .necker-card h3{color:var(--cream)!important}

/* ---- inner pages ---- */
.inner{max-width:var(--wrap);margin:0 auto;padding:30px 26px 20px}
#overlay h1{font-family:Fraunces,Georgia,serif;color:var(--amber);font-size:40px;margin:8px 0 16px}
#overlay a{color:var(--amber)}.pink,.orange{color:var(--amber)!important}
#overlay .grabbag-card{background:#37271a;border-color:#513a26}
#overlay input,#overlay textarea,#overlay select{background:#2a1e14;color:var(--cream);border-color:#5a4227}

/* ---- footer: the clothesline rope IS the wood/green divider ---- */
.foot7{position:relative;z-index:1;margin-top:0;padding-top:50px;background:var(--green-d);color:var(--cream)}
.foot7 .foot-hills{display:none}
.foot-in{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 26px 34px;font-size:14px}

/* ---- clothesline separator: full-width rope at the seam (homage to the OG
        site). Neckers hang from it down over the green "grass"; the squirrel
        perches on the line — click it (Easter egg). ---- */
.clothesline-sep{position:relative;height:60px;margin-top:34px;z-index:5}
.cl-inner{position:relative;height:100%}
/* the rope — edge to edge, sitting exactly on the boundary */
.cl-rope{position:absolute;left:0;right:0;bottom:0;height:3px;
	background:repeating-linear-gradient(90deg,var(--rope) 0 9px,#b89a5f 9px 11px);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.cl-line{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:flex-start;padding:0 4vw 0 14vw}
/* a pegged mini necker, hanging below the rope into the footer */
.cl-nk{position:relative;transform:rotate(var(--r,0deg));transform-origin:top center}
.cl-nk svg{display:block;width:50px;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.cl-nk:before{content:"";position:absolute;top:-7px;left:50%;width:8px;height:16px;margin-left:-4px;border-radius:3px;
	background:linear-gradient(#e0b062,#b6863f);box-shadow:0 1px 2px rgba(0,0,0,.4);z-index:2}
.cl-nk:after{content:"";position:absolute;top:-11px;left:50%;width:2px;height:6px;margin-left:-1px;background:var(--rope)}
/* the squirrel — perched on the rope */
.squirrel{position:absolute;bottom:-6px;left:3%;width:60px;height:60px;background:none;border:0;padding:0;cursor:pointer;z-index:6;
	transform-origin:60% 92%;transition:transform .12s;filter:drop-shadow(0 5px 7px rgba(0,0,0,.55))}
.squirrel svg{display:block;width:100%;height:100%;overflow:visible}
.squirrel:hover{transform:translateY(-2px) rotate(-4deg)}
.squirrel .tail{transform-origin:74% 78%;animation:tailtwitch 4.5s ease-in-out infinite}
.squirrel.go{animation:scamper 3.2s ease-in-out}
.squirrel.go .tail{animation:tailtwitch .5s ease-in-out infinite}
.cl-acorn{position:absolute;bottom:2px;left:4%;font-size:18px;opacity:0;pointer-events:none;z-index:4}
.cl-acorn.drop{animation:acorndrop 1.2s ease-in forwards}
/* the line comes alive as the squirrel runs past */
.clothesline-sep.running .cl-nk{animation:nkswing 1.2s ease-in-out}
.clothesline-sep.running .cl-nk:nth-child(1){animation-delay:.10s}
.clothesline-sep.running .cl-nk:nth-child(2){animation-delay:.24s}
.clothesline-sep.running .cl-nk:nth-child(3){animation-delay:.38s}
.clothesline-sep.running .cl-nk:nth-child(4){animation-delay:.52s}
.clothesline-sep.running .cl-nk:nth-child(5){animation-delay:.66s}
.clothesline-sep.running .cl-nk:nth-child(6){animation-delay:.80s}
.clothesline-sep.running .cl-nk:nth-child(7){animation-delay:.94s}
.clothesline-sep.running .cl-nk:nth-child(8){animation-delay:1.08s}
@keyframes nkswing{0%,100%{transform:rotate(var(--r,0deg))}30%{transform:rotate(calc(var(--r,0deg) + 11deg))}65%{transform:rotate(calc(var(--r,0deg) - 7deg))}}
@keyframes tailtwitch{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-7deg)}96%{transform:rotate(4deg)}}
@keyframes scamper{
	0%{transform:translate(0,0) scaleX(1)}
	6%{transform:translate(0,-8px) scaleX(1)}
	16%{transform:translate(14vw,0) scaleX(1)}
	26%{transform:translate(30vw,-9px) scaleX(1)}
	38%{transform:translate(50vw,0) scaleX(1)}
	48%{transform:translate(72vw,-9px) scaleX(1)}
	54%{transform:translate(85vw,0) scaleX(1)}
	58%{transform:translate(86vw,0) scaleX(-1)}
	68%{transform:translate(64vw,-9px) scaleX(-1)}
	80%{transform:translate(34vw,0) scaleX(-1)}
	90%{transform:translate(10vw,-8px) scaleX(-1)}
	97%{transform:translate(0,0) scaleX(-1)}
	100%{transform:translate(0,0) scaleX(1)}}
@keyframes acorndrop{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:1;transform:translateY(60px) rotate(240deg)}}
@media(prefers-reduced-motion:reduce){.squirrel .tail,.squirrel.go,.cl-acorn.drop,.clothesline-sep.running .cl-nk{animation:none}}

/* ---- swatch ordering control (studio configurator) ---- */
.swatch-order-bar{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:0 0 6px}
.swatch-order-bar label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);font-family:"Space Mono",monospace}
#overlay select#swatch-order{font:inherit;font-size:13px;color:var(--cream);background:#2a1e14;border:1.5px solid #5a4227;border-radius:7px;padding:7px 30px 7px 12px;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8a838' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;-webkit-appearance:none;appearance:none}
#overlay select#swatch-order:focus{outline:2px solid var(--amber);border-color:var(--amber)}

@media(max-width:920px){
	.navtog{display:block}
	.mainnav{position:fixed;inset:72px 0 auto 0;background:#2c2016;flex-direction:column;gap:0;padding:6px 0;border-bottom:3px solid var(--amber);display:none;z-index:50}
	body.nav-open .mainnav{display:flex}.mainnav a{padding:12px 26px}
	.tools{margin-left:0}
	.g-wrap{grid-template-columns:1fr;gap:30px}.g-copy{order:-1}
	.golden-hero h1{font-size:54px}
	.sw{width:44px;height:56px}
}
@media(max-width:560px){.golden-hero h1{font-size:44px}.sw{width:38px;height:48px}.rope{gap:9px}}

/* ---- normalize legacy scene-era inner pages (faq/contact/custom/blowout) ---- */
#overlay .scroll-pane{height:auto !important;max-height:none !important;overflow:visible !important}
#overlay [style*="background: url"]{background:none !important;height:auto !important;min-height:0 !important;margin-bottom:10px !important}
#overlay .mCustomScrollBox,#overlay .mCSB_container{height:auto !important;overflow:visible !important}
#overlay h1{margin-top:0}
#overlay h3{margin:.15em 0 1.1em;font-weight:500;opacity:.75}
#overlay .question{font-weight:700;margin:1.15em 0 .15em;font-size:1.04em}
#overlay .answer{margin:0 0 .35em}
#overlay .orange,#overlay .pink{color:var(--amber) !important}
#overlay form input,#overlay form textarea,#overlay form select{max-width:100%}

/* ---- inner-page form controls + Blow Out card (dark, themed via amber) ---- */
#overlay .lead{font-size:18px;opacity:.85;margin:.2em 0 1.2em}
#overlay input[type=text],#overlay input[type=email],#overlay input[type=tel],#overlay input[type=number],
#overlay textarea,#overlay select{font:inherit;color:var(--cream);background:#2a1e14;border:1.5px solid #5a4227;border-radius:8px;padding:10px 12px;line-height:1.3}
#overlay input:focus,#overlay textarea:focus,#overlay select:focus{outline:2px solid var(--amber);outline-offset:0;border-color:var(--amber)}
#overlay .jn-form,#overlay #grabbag-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0}
#overlay .qty-field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
#overlay .qty-field input{width:110px}
/* Exclude the studio configurator's own controls — swatches, share bar, random,
   link buttons — which studio.css styles fully; this rule is only for the legacy
   content pages' plain buttons/submits. Otherwise the ID specificity here paints
   them all amber and swells the icon buttons into blank pills. */
#overlay button:not(.swatch):not(.sh):not(.btn-random):not(.linkish),#overlay .btn,#overlay input[type=submit]{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:8px;padding:12px 24px;background:var(--amber);color:var(--wood);transition:.14s}
#overlay button:not(.swatch):not(.sh):not(.btn-random):not(.linkish):hover,#overlay .btn:hover,#overlay input[type=submit]:hover{filter:brightness(.95)}
#overlay button:not(.swatch):not(.sh):not(.btn-random):not(.linkish):disabled{opacity:.6;cursor:default}

.grabbag-card{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:14px 0 8px;padding:24px;border:1.5px solid #513a26;border-radius:16px;background:#37271a}
.grabbag-art{display:flex;justify-content:center}
.grabbag-art img{max-width:100%;height:auto}
.grabbag-price{font-size:34px;font-weight:800;color:var(--amber);line-height:1}
.grabbag-price small{display:block;font-size:13px;font-weight:500;color:inherit;opacity:.6;margin-top:4px}
.grabbag-desc{margin:14px 0 18px;opacity:.85}
.grabbag-note{font-size:13px;opacity:.6;margin:12px 0 0}
@media(max-width:640px){.grabbag-card{grid-template-columns:1fr}}