@import url("header.css");
@import url("order.css");
@import url("footer.css");

* {
	padding 0;
	margin 0;
}

a {
	text-decoration: none;
}

/* Base styles */
:root {
	--ban-height: 48px;
	--ban-width: 48px;
	/* --primary-color: #000000;*/
	--text-color: #333333;
	--bg-color: #ff00Ff;
}

@font-face {
	font-family: 'lekton';
	src: url('res/fonts/Lekton-Regular.ttf') format('truetype');
	#font-weight: 400;
	#font-style: normal;
	#font-display: swap;
}

@font-face {
	font-family: 'newsreader';
	src: url('./res/fonts/Newsreader-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

body {
	font-family: 'newsreader', sans-serif;
}

/* ---- top bar ---- */
header.topbar{
	position:absolute;
	top:env(safe-area-inset-top,0px);
	left:0;
	right:0;
	z-index:20;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:22px clamp(20px,5vw,64px);
	background:transparent;
}

:root{
	--bark:#2E2115;
	--ink:#221A11;
	--parchment:#F4EBDA;
	--wheat:#E8D9BC;
	--wheat-deriv:#c4b8a1;
	--wheat-deriv1:#c2b59d;
	--gold:#C8973E;
	--gold-deep:#9B7228;
	--sage:#5B6B47;
	--sage-deep:#3E4A30;
	--cream-text:#FBF6EC;
	--head-text:#ffffff;
	--dark:#414141;
	--light:#a7a7a7;
	--orange:#b04604;

	--sub-text:#dedede;
	--gallery:#e8e6e6;
}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--parchment:#1B140D;
		--wheat:#241B12;
		--ink:#F4EBDA;
	}
}
:root[data-theme="dark"]{
	--parchment:#1B140D;
	--wheat:#241B12;
	--ink:#F4EBDA;
}

*{
	box-sizing:border-box;margin:0;padding:0;
}

html{
	scroll-padding-top:env(safe-area-inset-top,0px);
}

body{
	background:var(--parchment);
	color:var(--ink);
	font-family:'Work Sans', sans-serif;
	padding-top:env(safe-area-inset-top,0px);
	padding-bottom:env(safe-area-inset-bottom,0px);
	-webkit-font-smoothing:antialiased;
}

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

.brand{
	font-family:'Fraunces', serif;
	font-weight:500;
	font-size:24px;
	letter-spacing:0.01em;
	color:var(--cream-text);
	padding: 0 auto;
}

nav.links{display:flex;gap:28px;}

nav.links a{
	font-size:18px;
	color:var(--cream-text);
	opacity:0.88;
	#color:black;
}

nav.links a:hover{opacity:1;}

/* ---- hero ---- */
.hero{
	position:relative;
	min-height:100svh;
	display:flex;
	flex-direction:column;
	overflow:hidden;
}

.hero-wrap{position:relative;}

.hero{
	margin-top:0;
}

.hero-art{
	position:absolute;
	inset:0;
	height:100%;
	display:block;
	filter:brightness(0.7); 
}

.hero-art img{
}
.hero-content{
	position:relative;
	z-index:5;
	flex:1;
	display:flex;
	align-items:flex-end;
	padding:0 clamp(20px,5vw,64px) clamp(48px,8vh,96px);
}
.hero-text{max-width:640px;}
.kicker{
	font-size:14px;
	color:var(--wheat);
	margin-bottom:14px;
}
h1{
	font-family:'Fraunces', serif;
	font-weight:600;
	font-size:clamp(40px, 6.4vw, 76px);
	line-height:1.03;
	color:var(--cream-text);
	max-width:11ch;
}
.hero-sub{
	margin-top:20px;
	font-size:clamp(16px,1.7vw,19px);
	line-height:1.6;
	color:var(--wheat);
	max-width:46ch;
}
.hero-actions{
	margin-top:32px;
	display:flex;
	gap:16px;
	flex-wrap:wrap;
}
.btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:14px 26px;
	border-radius:2px;
	font-size:15px;
	font-weight:500;
}

/* BUTTON CONTEXT */
.btn-primary{
	font-family: 'lekton';
	background:var(--parchment);
	color:var(--dark);
}

.btn-primary:hover{
	background:var(--light);
}

.btn-ghost{
	font-family: 'lekton';
	border:1px solid rgba(251,246,236,0.55);
	color:var(--cream-text);
}

.btn-cart{
	font-family: 'lekton';
	border:1px solid rgba(251,246,236,0.55);
	background: black;
	color:white;
}

.btn-ghost:hover{
	border-color:#fff;
}

/* ---- description strip ---- */
.about{
	padding:clamp(56px,10vh,112px) clamp(20px,5vw,64px);
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
	gap:clamp(32px,6vw,80px);
	align-items:center;
	max-width:1200px;
	margin:0 auto;
}
.about-figure{width:100%;}
.about-figure svg{width:100%;height:auto;display:block;}

.about h2{
	font-family:'Fraunces', serif;
	font-weight:500;
	font-size:clamp(26px,3vw,34px);
	line-height:1.15;
	margin-bottom:18px;
}
.about p{
	font-size:16px;
	line-height:1.7;
	color:var(--ink);
	opacity:0.82;
	max-width:52ch;
}
.about-meta{
	margin-top:28px;
	display:flex;
	gap:36px;
	flex-wrap:wrap;
}
.about-meta div p:first-child{
	font-family:'lekton', serif;
	font-size:20px;
	font-weight: 600;
	#color:var(--gold-deep);
	color:var(--orange);
	margin-bottom:4px;
}
.about-meta div p:last-child{
	font-size:20px;
	opacity:1;
}

/* ---- gallery ---- */
.gallery-even{
	background:var(--wheat);
	#background:var(--wheat);
	padding:clamp(56px,10vh,104px) clamp(20px,5vw,64px);
}
.gallery-inner{
	max-width:1200px;
	margin:0 auto;
}

.gallery-head{
	max-width:56ch;
	margin-bottom:clamp(32px,5vw,56px);
}

.gallery-head h2{
	font-family:'Fraunces', serif;
	font-weight:500;
	font-size:clamp(26px,3vw,34px);
	line-height:1.15;
	margin-bottom:16px;
	font-size:34px;
}
/* SELECT GALLERY */
.gallery-head h1{
	font-family:'lekton', serif;
	#font-weight:700;
	#font-size:clamp(26px,3vw,34px);
	#line-height:1.15;
	margin-bottom:16px;
	font-size:20px;
	color:#b04604;
}

.gallery-head p{
	font-size:16px;
	line-height:1.7;
	#color:var(--parchment);
	color:#2b2b2b;
	opacity:0.8;
}

.gallery-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,2fr));
	gap:clamp(20px,3vw,32px);
}

@media (max-width:500px){
	.gallery-grid{grid-template-columns:1fr;}
}

/* contact */
.gallery-odd{
	background:var(--parchment);
	#background:#888888;
	padding:clamp(56px,10vh,104px) clamp(20px,5vw,64px);
}

.gallery-card{
	position:relative;
	#background:#FFFDF8;
	background:var(--gallery);
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 2px 2px rgba(34,26,17,0.14);
	display:flex; 
	flex-direction:column
}

.gallery-card figure{
	position:relative;
	aspect-ratio:4/3;
	overflow:hidden;
	background:#E0CFA6;
}

.gallery-card svg{width:100%;height:100%;display:block;}

.card-panel{
	#background:#FFFDF8;
	background:var(--gallery);
	padding:18px 20px 22px;
	flex:1;
	display:flex;
	flex-direction:column;
}

.card-panel p:first-child{
	font-family:'Fraunces', serif;
	font-weight:500;
	font-size:20px;
	color:var(--ink);
	margin-bottom:6px;
}

.card-panel p:nth-child(2){
	flex:1;
	font-size:13.5px;
	line-height:1.5;
	color:var(--ink);
	opacity:0.7;
	margin-bottom:14px;
}

@media (max-width:760px){
	.gallery-grid{grid-template-columns:1fr;}
}

footer{
	border-top:1px solid rgba(0,0,0,0.08);
	padding:22px clamp(20px,5vw,64px);
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
	font-size:13px;
	opacity:0.6;
}

/* BUTTON */
.card-btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--sage-deep);
	color:var(--cream-text);
	font-size:13px;
	font-weight:500;
	padding:9px 16px;
	border-radius:999px;
	border:none;
	cursor:pointer;
}
.card-btn:hover{background:var(--sage);}

/* Align text */
.test- {
	display: flex;
	align-items: center;
	margin: 0px 0px 5px;
}

/* TOP */
.block{
	display:grid;
	grid-template-columns:auto 1fr;  /* image sized to itself, text fills the rest */
	align-items:center;               /* or: start, to top-align text with image */
	gap:5px;
	padding: 0;
	margin: 0;
}

.block img{
	width:80px;   /* fix a size, don't leave it to grow */
	height:80px;
	object-fit:cover;

}

.gallery- {
	display:grid;
	grid-template-columns:1fr 1fr;   /* or auto auto with justify-content below */
	justify-content:space-between;
	align-items:baseline;
	gap:16px;
	font-size:17px;
}


.gallery- h1{
	color:var(--orange);
	order:2; 
	font-size:20px;
	justify-self:end;
}

.gallery- p{
	justify-self:first;
	font-size:18px;
	color:var(--orange);
}