/*
Theme Name: Presentation
Theme URI: https://example.invalid/presentation
Author: Project Team
Description: A handcrafted editorial theme for an independent ceramic studio.
Version: 2.0.1
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: presentation
*/

:root { --ink:#24332b; --muted:#687069; --paper:#f5f0e7; --cream:#fffaf1; --clay:#bc5c3c; --clay-dark:#8d3d2b; --moss:#58735b; --line:#ddd3c4; --serif:Georgia, "Times New Roman", serif; --sans:Inter,ui-sans-serif,system-ui,sans-serif; --content:76rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:1rem; line-height:1.65; }
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
.container { width:min(calc(100% - 3rem),var(--content)); margin-inline:auto; }
.skip-link { position:fixed; z-index:100; top:.75rem; left:.75rem; padding:.75rem 1rem; color:#fff; background:var(--ink); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }

.site-header { position:sticky; z-index:20; top:0; border-bottom:1px solid rgb(36 51 43 / 9%); background:rgb(245 240 231 / 93%); backdrop-filter:blur(16px); }
.header-inner { display:flex; min-height:5.2rem; align-items:center; justify-content:space-between; gap:2rem; }
.site-title { color:var(--ink); font-family:var(--serif); font-size:1.5rem; font-weight:400; letter-spacing:-.06em; text-decoration:none; }
.site-title span { color:var(--clay); font-style:italic; }
.custom-logo { width:auto; max-height:2.75rem; }
.primary-menu { display:flex; align-items:center; gap:1.7rem; margin:0; padding:0; list-style:none; }
.primary-menu a { font-size:.78rem; font-weight:750; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.primary-menu a:hover,.primary-menu a:focus-visible { color:var(--clay); }

.hero { position:relative; min-height:min(47rem,calc(100vh - 5.2rem)); overflow:hidden; background:#d7c7b2; }
.hero-image { position:absolute; inset:0; background:linear-gradient(90deg,rgb(28 26 20 / 22%),transparent 65%),url("assets/images/hero-ceramic-artist.png") center / cover no-repeat; }
.hero-content { position:relative; z-index:1; padding-top:clamp(6rem,14vw,10.5rem); padding-bottom:8rem; }
.hero .eyebrow { color:#fff9ed; }
.eyebrow { margin:0 0 1rem; color:var(--clay-dark); font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; letter-spacing:-.06em; line-height:.98; }
h1 { max-width:10ch; margin:0; color:#fffaf1; font-size:clamp(3.6rem,8.5vw,7.8rem); text-shadow:0 2px 22px rgb(0 0 0 / 12%); }
h2 { margin:.15rem 0 1.4rem; font-size:clamp(2.4rem,5.5vw,5.2rem); }
h3 { margin:0; font-size:1.75rem; }
.hero-text { max-width:27rem; margin:1.8rem 0 2.25rem; color:#fffaf1; font-size:1.12rem; }
.hero-actions,.contact-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.45rem; }
.button { display:inline-flex; min-height:3.4rem; align-items:center; justify-content:center; gap:.75rem; padding:.8rem 1.25rem; border:1px solid var(--clay); border-radius:999px; color:#fffaf1; background:var(--clay); font-size:.84rem; font-weight:800; letter-spacing:.04em; text-decoration:none; transition:transform .2s,background .2s; }
.button:hover,.button:focus-visible { background:var(--clay-dark); transform:translateY(-2px); }
.text-link,.underlined-link { font-size:.84rem; font-weight:800; letter-spacing:.04em; text-decoration:none; }
.text-link { color:#fffaf1; }
.text-link span,.underlined-link span { display:inline-block; margin-left:.35rem; transition:transform .2s; }
.text-link:hover span,.underlined-link:hover span { transform:translateY(3px); }
.hero-note { position:absolute; z-index:1; right:clamp(1.5rem,5vw,5rem); bottom:2.5rem; display:flex; align-items:center; gap:.85rem; color:#fffaf1; font-size:.75rem; font-weight:700; letter-spacing:.05em; }
.hero-note span { display:grid; width:2.25rem; height:2.25rem; place-items:center; border:1px solid rgb(255 250 241 / 65%); border-radius:50%; }

.section { padding:clamp(5rem,10vw,9rem) 0; }
.story-section { background:var(--cream); }
.story-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(17rem,.85fr); align-items:center; gap:clamp(3rem,11vw,11rem); }
.story-copy { max-width:38rem; }
.story-copy > p:not(.eyebrow) { max-width:34rem; color:var(--muted); font-size:1.08rem; }
.underlined-link { display:inline-block; margin-top:1.5rem; padding-bottom:.35rem; border-bottom:1px solid var(--ink); }
.story-mark { display:grid; width:min(100%,23rem); aspect-ratio:1; place-items:center; margin-inline:auto; border:1px solid var(--clay); border-radius:48% 52% 45% 55% / 49% 45% 55% 51%; color:var(--clay-dark); font-family:var(--serif); font-size:clamp(2rem,4vw,3.2rem); line-height:1; transform:rotate(-8deg); }
.story-mark span { position:absolute; }
.story-mark span:nth-child(1) { transform:translate(-.8rem,-2.2rem) rotate(8deg); }
.story-mark span:nth-child(2) { transform:translate(1rem,.1rem) rotate(8deg); font-style:italic; }
.story-mark span:nth-child(3) { transform:translate(-.8rem,2.2rem) rotate(8deg); }

.collection-section { background:var(--paper); }
.section-heading { margin-bottom:3rem; }
.collection-heading { display:flex; align-items:end; justify-content:space-between; gap:3rem; }
.collection-heading h2 { margin-bottom:0; }
.collection-heading > p { max-width:22rem; margin:0 0 .45rem; color:var(--muted); }
.product-feature { position:relative; overflow:hidden; background:#b79b7b; }
.product-feature img { width:100%; aspect-ratio:2.1/1; object-fit:cover; }
.feature-caption { position:absolute; right:1.25rem; bottom:1.1rem; left:1.25rem; display:flex; justify-content:space-between; color:#fffaf1; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-shadow:0 1px 7px rgb(0 0 0 / 55%); text-transform:uppercase; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:1.3rem; }
.product-card { padding:1.25rem 1.25rem 1.5rem; }
.product-card--clay { background:#c66e4d; color:#fffaf1; }
.product-card--cream { background:#e4d9c8; }
.product-card--forest { background:#718370; color:#fffaf1; }
.product-visual { width:100%; aspect-ratio:4/3; overflow:hidden; }
.product-visual img { width:100%; height:100%; object-fit:cover; }
.product-meta { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:.8rem; }
.product-meta span { font-size:.75rem; font-weight:800; white-space:nowrap; }
.product-card p { margin:1rem 0 0; font-size:.92rem; line-height:1.5; opacity:.82; }

.process-section { background:var(--cream); }
.process-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(3rem,9vw,8rem); }
.process-photo { position:relative; }
.process-photo::before { position:absolute; z-index:0; top:-1.5rem; left:-1.5rem; width:60%; aspect-ratio:1; border-radius:50%; background:#d9b69e; content:""; }
.process-photo img { position:relative; z-index:1; width:100%; max-height:42rem; object-fit:cover; }
.process-copy { max-width:31rem; }
.process-list { display:grid; gap:1.1rem; margin:2.4rem 0 0; padding:0; list-style:none; }
.process-list li { padding-top:1.1rem; border-top:1px solid var(--line); color:var(--muted); }
.process-list li:last-child { padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.process-list b { display:block; color:var(--clay); }

.contact-section { padding-top:0; background:var(--paper); }
.contact-card { padding:clamp(3rem,7vw,6.5rem); color:#fffaf1; background:var(--moss); background-image:radial-gradient(circle at 88% 10%,rgb(255 250 241 / 13%) 0 2px,transparent 3px),radial-gradient(circle at 90% 16%,rgb(255 250 241 / 13%) 0 1px,transparent 2px); background-size:30px 30px,23px 23px; }
.contact-card .eyebrow { color:#d7b494; }
.contact-card h2 { max-width:17ch; }
.contact-card > p:not(.eyebrow) { max-width:38rem; color:#edf0e6; }
.contact-actions { margin-top:2.2rem; }
.button--light { color:var(--ink); border-color:#fffaf1; background:#fffaf1; }
.button--light:hover,.button--light:focus-visible { color:#fffaf1; background:transparent; }
.text-link--light { border-bottom:1px solid rgb(255 250 241 / 75%); padding-bottom:.35rem; }
.site-footer { padding:1.8rem 0; color:#eee5d6; background:#24332b; font-size:.75rem; letter-spacing:.05em; }
.footer-inner { display:flex; justify-content:space-between; gap:1rem; }

@media (max-width: 720px) { .container { width:min(calc(100% - 2rem),var(--content)); } .header-inner { min-height:4.5rem; } .primary-menu { gap:.8rem; } .primary-menu a { font-size:.65rem; letter-spacing:.03em; } .hero { min-height:42rem; } .hero-image { background-position:61% center; } .hero-content { padding-top:5.5rem; } .hero-note { right:1rem; bottom:1.3rem; max-width:12rem; } .story-grid,.process-grid { grid-template-columns:1fr; } .story-mark { width:15rem; } .collection-heading { display:block; } .collection-heading > p { margin-top:1.5rem; } .product-feature img { aspect-ratio:1.25/1; } .product-grid { grid-template-columns:1fr; } .process-photo { max-width:30rem; } .footer-inner { display:block; } .footer-inner span { display:block; } .footer-inner span + span { margin-top:.35rem; } }
@media (max-width: 430px) { .site-title { font-size:1.25rem; } .primary-menu { gap:.55rem; } .primary-menu li:first-child { display:none; } h1 { font-size:3.4rem; } }