:root {
--ink: #181713;
--dark: #14130f;
--cream: #eee7d8;
--paper: #f6f0e5;
--rust: #b75a3c;
--muted: #746d62;
--line: #b9b0a0;
--max: 1280px;
--header-height: 68px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 24px);
}
[id] {
scroll-margin-top: calc(var(--header-height) + 24px);
}
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: Arial, Helvetica, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
width: 100%;
height: auto;
}
p {
line-height: 1.62;
}
h1,
h2,
h3,
p,
figure {
margin-top: 0;
}
h1,
h2 {
letter-spacing: -0.045em;
line-height: 0.96;
}
h1 {
font-size: clamp(3.4rem, 6.5vw, 7.6rem);
}
h2 {
font-size: clamp(2.4rem, 4.5vw, 5.3rem);
}
h3 {
font-size: 1rem;
line-height: 1.3;
}
em {
font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
color: var(--rust);
}
button,
input,
select,
textarea {
font-family: inherit;
}
button {
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--rust);
outline-offset: 3px;
} .site-header {
height: var(--header-height);
padding: 0 clamp(24px, 5vw, 76px);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--cream);
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(24, 23, 19, 0.12);
}
.site-header.on-dark {
width: 100%;
background: rgba(20, 19, 15, 0.94);
color: var(--cream);
border: 0;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand img {
width: 34px;
height: 34px;
object-fit: contain;
}
.brand span {
display: grid;
gap: 3px;
font-size: 0.7rem;
letter-spacing: 0.15em;
}
.brand small {
font-size: 0.53rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.72;
}
.site-header nav {
display: flex;
gap: clamp(20px, 2.7vw, 42px);
font-size: 0.92rem;
}
.site-header nav a {
padding: 8px 0;
border-bottom: 1px solid transparent;
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
border-color: currentColor;
}
.menu-button {
display: none;
background: none;
border: 0;
color: inherit;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
} .eyebrow {
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.4;
}
.rust {
color: var(--rust);
}
.lead {
font-size: clamp(1.05rem, 1.35vw, 1.26rem);
max-width: 680px;
line-height: 1.62;
}
.cream-section,
.dark-section {
padding:
clamp(76px, 9vw, 132px)
max(24px, calc((100vw - var(--max)) / 2));
}
.cream-section {
background: var(--cream);
}
.dark-section {
background: var(--dark);
color: var(--cream);
}
.section-heading {
max-width: 820px;
}
.section-heading h2 {
margin: 24px 0 30px;
}
.section-heading em {
display: block;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 30px;
max-width: 100%;
margin-top: 18px;
padding: 11px 0;
border-bottom: 1px solid currentColor;
text-transform: uppercase;
font-weight: 800;
font-size: 0.73rem;
letter-spacing: 0.14em;
line-height: 1.5;
}
.text-link span {
flex-shrink: 0;
}
.button {
display: inline-block;
background: var(--rust);
color: #fff;
border: 0;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.12em;
line-height: 1.5;
}
.button:hover {
background: #93452f;
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8vw;
align-items: center;
}
.split figure {
margin: 0;
}
.split figure img {
max-height: 700px;
object-fit: cover;
}
figure figcaption {
font: italic 0.78rem/1.45 Georgia, serif;
margin-top: 10px;
color: var(--muted);
} .hero {
min-height: 760px;
height: 100vh;
display: grid;
grid-template-columns: 56% 44%;
background: var(--dark);
color: var(--cream);
}
.hero-photo {
position: relative;
overflow: hidden;
}
.hero-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(20, 19, 15, 0) 58%,
rgba(20, 19, 15, 0.18) 70%,
rgba(20, 19, 15, 0.55) 84%,
rgba(20, 19, 15, 1) 100%
);
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 44%;
filter: brightness(0.68) contrast(1.05);
}
.hero-copy {
align-self: center;
min-width: 0;
padding: 120px 6vw 60px 4.5vw;
}
.hero-copy h1 {
font-size: clamp(3.5rem, 5.7vw, 6.9rem);
margin: 26px 0 35px;
font-weight: 800;
}
.hero-copy h1 em {
display: inline-block;
font-size: 0.82em;
}
.hero-copy .text-link {
color: #d17b5d;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 30px;
}
.hero-actions .text-link {
white-space: normal;
} .workshop-teaser {
display: block;
}
.workshop-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 50px;
}
.workshop-copy {
min-width: 0;
}
.workshop-highlight {
color: #bd6041;
font-size: clamp(22px, 2.4vw, 29px);
font-weight: 600;
line-height: 1.3;
margin: 25px 0;
}
.workshop-intro .savizen-photo {
position: relative;
min-width: 0;
margin: 0;
}
.workshop-intro .savizen-photo {
margin: 0;
overflow: hidden;
}
.workshop-intro .savizen-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
max-height: none;
object-fit: cover;
object-position: center top;
}
.home-giftcard {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 50px;
margin-top: 75px;
}
.giftcard-photo {
min-width: 0;
margin: 0;
}
.home-giftcard .giftcard-photo img {
width: 100%;
height: 520px;
max-height: none;
object-fit: cover;
object-position: center;
}
.giftcard-copy {
min-width: 0;
}
.giftcard-copy h3 {
font-size: clamp(26px, 3vw, 40px);
margin-bottom: 20px;
} .home-world {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 40px;
}
.home-world .section-heading {
width: 100%;
max-width: 850px;
}
.home-world .section-heading h2 {
font-size: clamp(2.7rem, 4.2vw, 5rem);
} .home-carousel {
position: relative;
width: 100%;
min-width: 0;
overflow: hidden;
} .home-carousel-track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
gap: 24px;
width: max-content;
will-change: transform;
} .home-carousel-track .home-product-card {
display: flex;
flex-direction: column;
flex: 0 0 clamp(280px, 28vw, 360px);
width: clamp(280px, 28vw, 360px);
min-width: 0;
margin: 0;
padding: 0;
} .home-product-image {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #ded5cc;
}
.home-product-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
} .home-product-card h3 {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
margin: 18px 0 8px;
}
.home-product-card p {
margin: 0;
font-size: 16px;
line-height: 1.55;
} .home-carousel-control {
position: absolute;
top: 36%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--paper);
color: var(--ink);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.home-carousel-control:hover {
background: var(--rust);
color: #fff;
}
.home-carousel-control.previous {
left: 12px;
}
.home-carousel-control.next {
right: 12px;
}
.home-world > .text-link {
align-self: flex-start;
margin-top: 4px;
} .about-teaser {
border-top: 1px solid var(--line);
}
.about-teaser figure {
order: -1;
}
.guild {
display: flex;
align-items: center;
gap: 20px;
margin-top: 38px;
padding-top: 22px;
border-top: 1px solid #999183;
font-size: 0.71rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 800;
}
.guild img {
width: 180px;
height: auto;
mix-blend-mode: multiply;
}
.guild-arrow {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: 400;
line-height: 1;
vertical-align: baseline;
font-variant-emoji: text;
}
.contact-strip {
display: grid;
grid-template-columns: 0.45fr 1fr 1fr;
gap: 44px;
align-items: center;
padding:
60px
max(24px, calc((100vw - var(--max)) / 2));
background: var(--paper);
border-top: 1px solid var(--line);
}
.contact-strip h2 {
font-size: clamp(2rem, 3vw, 3.8rem);
margin: 0;
} .page-intro {
min-height: 390px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-top: 110px;
padding-bottom: 72px;
border-bottom: 1px solid var(--line);
}
.page-intro h1 {
max-width: 980px;
margin: 22px 0 24px;
font-size: clamp(3.3rem, 6vw, 6.8rem);
}
.page-intro h1 em {
display: inline;
}
.page-intro .lead {
margin-bottom: 0;
} .workshop-options {
padding-top: 85px;
}
.workshop-main {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 6vw;
align-items: center;
padding-bottom: 110px;
}
.workshop-main > img {
height: 690px;
object-fit: cover;
}
.workshop-main h2,
.workshop-secondary h2 {
font-size: clamp(2.3rem, 3.6vw, 4.2rem);
margin: 20px 0 24px;
}
.workshop-main dl {
margin: 30px 0;
border-top: 1px solid var(--line);
}
.workshop-main dl div {
display: grid;
grid-template-columns: 120px 1fr;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.workshop-main dt {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 800;
}
.workshop-main dd {
margin: 0;
} .workshop-main h3 {
font-size: clamp(1.3rem, 2vw, 1.65rem);
font-weight: 700;
line-height: 1.35;
margin: 32px 0 16px;
}
.workshop-main p {
line-height: 1.65;
}
.workshop-main .text-link {
margin-top: 16px;
}
.small-note {
font: italic 0.92rem/1.5 Georgia, serif;
color: var(--muted);
}
.workshop-secondary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7vw;
align-items: center;
padding: 85px 0;
border-top: 1px solid var(--line);
}
.workshop-secondary img {
height: 540px;
object-fit: cover;
}
.workshop-secondary ul {
padding-left: 18px;
line-height: 1.8;
}
.reverse-card img {
order: -1;
}
.faq h2 {
margin: 20px 0 54px;
}
.faq > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 35px 60px;
}
.faq > div p {
margin: 0;
line-height: 1.7;
}
.faq a:not(.text-link) {
color: #e3a18a;
text-decoration: underline;
text-underline-offset: 4px;
}
.faq > .text-link {
margin-top: 45px;
}
@media (max-width: 768px) {
.faq > div {
grid-template-columns: 1fr;
gap: 30px;
}
}
.faq b {
display: inline-block;
margin-bottom: 6px;
}
.savizen-photo {
position: relative;
}
.savizen-label {
position: absolute;
top: 12%;
left: 0;
background: var(--dark);
color: var(--cream);
padding: 18px 42px;
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.18em;
line-height: 1;
} .workshop-special-events {
padding: 85px 0;
border-top: 1px solid var(--line);
}
.workshop-special-events > h2 {
font-size: clamp(2.3rem, 3.6vw, 4.2rem);
margin: 20px 0 26px;
}
.workshop-special-events > p:not(.eyebrow) {
max-width: 760px;
font-size: 1.05rem;
line-height: 1.65;
}
.workshop-special-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 60px;
margin-top: 48px;
}
.workshop-special-card {
padding-top: 24px;
border-top: 1px solid var(--line);
}
.workshop-special-card h3 {
font-size: clamp(1.5rem, 2.2vw, 2rem);
margin-bottom: 22px;
}
.workshop-special-card p {
line-height: 1.65;
margin-bottom: 18px;
}
.workshop-special-price {
font-weight: 800;
font-size: 1.1rem;
}
.workshop-special-events a {
text-decoration: underline;
text-underline-offset: 4px;
}
.workshop-special-events a:hover {
color: var(--rust);
} @media (max-width: 768px) {
.workshop-special-events {
padding: 65px 0;
}
.workshop-special-grid {
grid-template-columns: 1fr;
gap: 38px;
margin-top: 36px;
}
} .private-workshop {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 6vw;
}
.private-workshop-copy {
min-width: 0;
}
.private-workshop p {
line-height: 1.65;
}
.private-workshop-price {
font-weight: 800;
font-size: 1.08rem;
}
.private-workshop > img {
width: 100%;
height: 540px;
object-fit: cover;
object-position: center 35%;
}
@media (max-width: 900px) {
.private-workshop {
grid-template-columns: 1fr;
gap: 30px;
}
.private-workshop > img {
order: -1;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center 35%;
}
} .guest-workshops {
padding: 85px 0;
border-top: 1px solid var(--line);
}
.guest-workshops h2 {
font-size: clamp(2.3rem, 3.6vw, 4.2rem);
margin: 20px 0 26px;
}
.guest-workshops-intro {
max-width: 760px;
font-size: 1.05rem;
line-height: 1.65;
}
.guest-workshops-intro a {
text-decoration: underline;
text-underline-offset: 4px;
}
.guest-workshops-intro a:hover {
color: var(--rust);
}
.guest-workshops-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 42px;
}
.guest-workshops-gallery figure {
min-width: 0;
margin: 0;
}
.guest-workshops-gallery img {
width: 100%;
aspect-ratio: 4 / 5;
height: auto;
object-fit: cover;
}
.guest-workshops-gallery figcaption {
margin-top: 14px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.85rem;
font-style: normal;
font-weight: 700;
line-height: 1.45;
color: var(--ink);
}
@media (max-width: 768px) {
.guest-workshops {
padding: 65px 0;
}
.guest-workshops-gallery {
grid-template-columns: 1fr;
gap: 32px;
}
} .workshop-calendar-section {
padding-top: 80px;
padding-bottom: 100px;
border-bottom: 1px solid var(--line);
}
.workshop-calendar-heading {
max-width: 720px;
margin-bottom: 58px;
}
.workshop-calendar-heading h2 {
font-size: clamp(2.5rem, 4vw, 4.8rem);
margin: 20px 0 22px;
}
.workshop-calendar-heading > p:last-child {
max-width: 620px;
margin-bottom: 0;
}
.workshop-calendar-grid {
display: block;
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.workshop-calendar-month {
display: none;
width: 100%;
min-width: 0;
}
.workshop-calendar-month.mobile-active {
display: block;
}
.workshop-calendar-month-heading {
display: none;
}
.workshop-calendar-month-heading h3 {
margin: 0;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
}
.workshop-calendar-weekdays,
.workshop-calendar-days {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.workshop-calendar-weekdays {
margin-bottom: 8px;
}
.workshop-calendar-weekdays span {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--muted);
}
.calendar-day,
.calendar-empty {
aspect-ratio: auto;
height: 70px;
}
.calendar-day {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 5px;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
}
.calendar-day-number {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: clamp(38px, 4.3vw, 54px);
height: clamp(38px, 4.3vw, 54px);
border-radius: 50%;
font-size: 0.92rem;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.calendar-day.has-workshop .calendar-day-number {
background: var(--workshop-color);
}
button.calendar-day.has-workshop:hover .calendar-day-number {
transform: scale(1.08);
box-shadow: 0 4px 18px rgba(24, 23, 19, 0.12);
}
button.calendar-day.has-workshop:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.calendar-day.is-past {
opacity: 1;
background: transparent;
cursor: default;
}
button.calendar-day.is-past {
cursor: pointer;
}
.calendar-day.is-past .calendar-day-number {
color: #8f8b84;
}
.calendar-event-count {
position: absolute;
z-index: 3;
right: 5%;
top: 8%;
min-width: 19px;
height: 19px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: var(--ink);
color: var(--cream);
font-size: 0.58rem;
font-weight: 800;
}
.workshop-calendar-empty {
margin: 45px 0 0;
padding-top: 22px;
border-top: 1px solid var(--line);
color: var(--muted);
font: italic 0.95rem/1.5 Georgia, serif;
}
.workshop-calendar-mobile-nav {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
width: 100%;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ink);
}
.workshop-calendar-mobile-nav > span {
text-align: center;
font-size: 0.9rem;
font-weight: 800;
letter-spacing: 0.14em;
}
.calendar-mobile-arrow {
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
font-size: 1.3rem;
}
.calendar-mobile-arrow:last-child {
justify-self: end;
}
.calendar-mobile-arrow:disabled {
opacity: 0.2;
cursor: default;
}
.workshop-calendar-booking-note {
margin-top: 25px;
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
} body.workshop-modal-open {
overflow: hidden;
}
.workshop-modal {
position: fixed;
inset: 0;
z-index: 5000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.workshop-modal.is-open {
display: flex;
}
.workshop-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 19, 15, 0.72);
}
.workshop-modal-dialog {
position: relative;
z-index: 1;
width: min(620px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--paper);
padding: clamp(32px, 5vw, 58px);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}
.workshop-modal-close {
position: absolute;
top: 17px;
right: 20px;
width: 38px;
height: 38px;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
font-size: 2rem;
font-weight: 300;
line-height: 1;
}
.workshop-modal-color {
display: block;
width: 38px;
height: 8px;
margin-bottom: 30px;
}
.workshop-modal-workshop + .workshop-modal-workshop {
margin-top: 55px;
padding-top: 55px;
border-top: 1px solid var(--line);
}
.workshop-modal-workshop h2 {
margin: 14px 0 30px;
font-size: clamp(2.3rem, 5vw, 4rem);
}
.workshop-modal-details {
margin: 0 0 30px;
border-top: 1px solid var(--line);
}
.workshop-modal-details > div {
display: grid;
grid-template-columns: 115px 1fr;
gap: 15px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.workshop-modal-details dt {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.workshop-modal-details dd {
margin: 0;
}
.workshop-modal-description {
margin-bottom: 30px;
line-height: 1.62;
}
.workshop-book-button {
margin-top: 5px;
} .workshop-booking-form {
width: 100%;
}
.workshop-booking-back {
display: inline-block;
margin: 0 0 28px;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.workshop-booking-back:hover {
text-decoration: underline;
}
.workshop-booking-date {
margin: 20px 0 32px;
font-size: 20px;
}
#workshopBookingForm {
display: flex;
flex-direction: column;
gap: 22px;
width: 100%;
max-width: 620px;
}
#workshopBookingForm label {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
font-size: 15px;
font-weight: 600;
}
#workshopBookingForm input {
display: block;
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(20, 18, 15, 0.3);
border-radius: 0;
background: transparent;
color: var(--ink);
font: inherit;
}
#workshopBookingForm input:focus {
outline: 1px solid var(--ink);
outline-offset: 2px;
}
#workshopBookingForm .button {
align-self: flex-start;
margin-top: 8px;
} .services {
padding-top: 40px;
}
.services article {
display: grid;
grid-template-columns:
60px
minmax(280px, 0.75fr)
minmax(360px, 1.25fr);
gap: 4vw;
align-items: center;
padding: 72px 0;
border-top: 1px solid var(--line);
}
.services article > img {
height: 430px;
object-fit: cover;
}
.services article:nth-child(even) > img {
order: 2;
}
.services h2 {
font-size: clamp(2.3rem, 3.8vw, 4.5rem);
margin: 0 0 20px;
}
.service-number {
font-size: 0.7rem;
letter-spacing: 0.15em;
font-weight: 800;
align-self: start;
padding-top: 10px;
} .about-page {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 8vw;
padding-top: 120px;
}
.about-page h1 {
font-size: clamp(3rem, 5.5vw, 6.4rem);
margin: 24px 0 60px;
}
.about-main {
max-height: 850px;
object-fit: cover;
}
.about-page article {
padding-top: 150px;
font: 1.08rem/1.75 Georgia, serif;
}
.about-page article p {
margin-bottom: 26px;
}
.about-page article .guild {
font-family: Arial, sans-serif;
} .works {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 90px 30px;
padding-top: 30px;
}
.work {
margin: 0;
}
.work img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.work.large {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 40px;
align-items: center;
}
.work.large img {
max-height: 620px;
aspect-ratio: auto;
object-fit: contain;
}
.work figcaption h2 {
font-family: Arial, sans-serif;
font-style: normal;
font-size: 0.9rem;
letter-spacing: 0.02em;
margin: 14px 0 5px;
}
.work figcaption p {
font: italic 0.8rem/1.5 Georgia, serif;
max-width: 520px;
color: var(--muted);
}
.project-section {
padding-top: 95px;
}
.project-section h2 {
font-size: clamp(2.5rem, 4vw, 4.6rem);
}
.pdf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
max-width: 980px;
margin-top: 55px;
}
.pdf-grid a {
display: grid;
grid-template-columns: 140px 1fr;
column-gap: 22px;
border-top: 1px solid #776e60;
padding-top: 20px;
}
.pdf-grid img {
width: 140px;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: top;
grid-row: 1 / 5;
background: #fff;
}
.pdf-grid h3 {
margin: 0 0 7px;
font-size: 1.3rem;
}
.pdf-grid p {
color: #c9c0b1;
max-width: 570px;
}
.pdf-grid span {
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.12em;
font-weight: 800;
color: #d77c5d;
} .contact-page {
display: grid;
grid-template-columns: 0.72fr 1.28fr;
gap: 9vw;
padding-top: 85px;
}
.contact-details > a {
display: block;
font-size: clamp(1.25rem, 1.7vw, 1.65rem);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.contact-details > p {
margin-top: 38px;
font-size: 1.05rem;
line-height: 1.5;
letter-spacing: -0.01em;
}
.contact-details > p b {
font-weight: 700;
}
.social {
display: flex;
gap: 24px;
margin-top: 48px;
}
.social a {
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.1em;
}
.contact-form {
display: grid;
gap: 20px;
}
.contact-form label {
display: grid;
gap: 8px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 800;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
min-width: 0;
border: 1px solid #8f887c;
border-radius: 0;
background: transparent;
padding: 14px;
font: 1rem Arial, sans-serif;
text-transform: none;
letter-spacing: 0;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.check {
display: flex !important;
align-items: center;
gap: 10px;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
}
.check input {
width: 18px;
}
.optional,
.muted {
color: var(--muted);
font-weight: 400;
}
.form-note {
font-size: 0.88rem;
}
.map-wrap {
height: 460px;
background: #ddd;
}
.map-wrap iframe {
width: 100%;
height: 100%;
border: 0;
} .kiln {
padding-top: 80px;
}
.formula {
background: var(--ink);
color: var(--cream);
padding: 22px;
margin: 30px 0;
font-weight: 800;
font-size: clamp(1rem, 2vw, 1.5rem);
}
.calculation {
font-size: 1.35rem;
} .footer {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 55px;
background: #0c0c0a;
color: var(--cream);
padding:
70px
max(24px, calc((100vw - var(--max)) / 2))
30px;
}
.footer h2 {
font-size: clamp(2.3rem, 4vw, 4.4rem);
max-width: 700px;
margin: 18px 0;
}
.footer-note {
color: #a9a093;
max-width: 450px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 13px;
font-size: 1rem;
}
.footer-small {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
border-top: 1px solid #504b43;
padding-top: 22px;
color: #9d9589;
font-size: 0.72rem;
} @media (max-width: 1100px) {
.home-carousel-track .home-product-card {
flex-basis: clamp(260px, 38vw, 360px);
width: clamp(260px, 38vw, 360px);
}
.services article {
grid-template-columns: 42px minmax(0, 1fr);
gap: 24px;
}
.services article > img,
.services article:nth-child(even) > img {
grid-column: 1 / -1;
order: initial;
height: auto;
max-height: 560px;
}
} @media (max-width: 900px) {
:root {
--header-height: 62px;
}
.site-header {
padding: 0 18px;
}
.brand small {
display: none;
}
.menu-button {
display: block;
}
.site-header nav {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
background: var(--cream);
color: var(--ink);
padding: 25px;
flex-direction: column;
gap: 8px;
}
.site-header nav.open {
display: flex;
}
.hero {
height: auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.hero-photo {
height: min(68vh, 590px);
order: 1;
}
.hero-photo::after {
background: linear-gradient(
180deg,
rgba(20, 19, 15, 0.05) 60%,
var(--dark) 100%
);
}
.hero-photo img {
object-position: center 56%;
filter: brightness(0.74) contrast(1.03);
}
.hero-copy {
order: 2;
padding: 38px 24px 72px;
}
.hero-copy h1 {
font-size: clamp(2.8rem, 12vw, 4.7rem);
margin: 18px 0 26px;
}
.split,
.contact-page,
.about-page,
.workshop-main,
.workshop-secondary {
grid-template-columns: 1fr;
}
.split {
gap: 44px;
}
.about-teaser figure {
order: initial;
}
.contact-strip {
grid-template-columns: 1fr;
gap: 14px;
}
.cream-section,
.dark-section {
padding-left: 24px;
padding-right: 24px;
}
.page-intro {
min-height: 330px;
padding-top: 90px;
padding-bottom: 55px;
}
.page-intro h1 {
font-size: clamp(3rem, 13vw, 5rem);
}
.workshop-main > img,
.workshop-secondary img {
height: auto;
max-height: 620px;
}
.workshop-main {
padding-bottom: 75px;
}
.workshop-secondary {
padding: 65px 0;
}
.reverse-card img {
order: initial;
}
.faq > div,
.pdf-grid {
grid-template-columns: 1fr;
}
.about-page {
padding-top: 90px;
}
.about-page article {
padding-top: 0;
}
.works {
grid-template-columns: 1fr;
gap: 60px;
}
.work.large {
grid-column: auto;
display: block;
}
.work.large img,
.work img {
aspect-ratio: 4 / 5;
}
.pdf-grid a {
grid-template-columns: 105px 1fr;
}
.pdf-grid img {
width: 105px;
}
.form-row {
grid-template-columns: 1fr;
}
.map-wrap {
height: 350px;
}
.guild {
align-items: flex-start;
flex-direction: column;
}
.footer {
grid-template-columns: 1fr;
}
.footer-small {
display: grid;
gap: 9px;
} .calendar-day,
.calendar-empty {
height: 48px;
}
.workshop-calendar-section {
padding-top: 65px;
padding-bottom: 75px;
}
.workshop-calendar-heading {
margin-bottom: 38px;
}
.workshop-calendar-mobile-nav > span {
font-size: 0.74rem;
}
.calendar-day-number {
width: clamp(36px, 11vw, 48px);
height: clamp(36px, 11vw, 48px);
font-size: 0.88rem;
}
.calendar-event-count {
right: 1%;
top: 2%;
}
.workshop-modal {
padding: 14px;
}
.workshop-modal-dialog {
max-height: calc(100vh - 28px);
padding: 42px 25px 30px;
}
} @media (max-width: 768px) {
.hero-actions {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.workshop-intro,
.home-giftcard {
grid-template-columns: 1fr;
gap: 28px;
}
.workshop-intro .savizen-photo img {
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center top;
}
.home-giftcard {
margin-top: 50px;
}
.home-giftcard .giftcard-photo img {
height: 420px;
object-fit: cover;
object-position: center;
}
.workshop-highlight {
font-size: 22px;
} .home-world {
gap: 28px;
} .home-carousel {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
scrollbar-width: none;
}
.home-carousel::-webkit-scrollbar {
display: none;
} .home-carousel-track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
width: max-content;
transform: none !important;
animation: none !important;
user-select: none;
-webkit-user-select: none;
} .home-carousel-track .home-product-card {
flex: 0 0 78vw;
width: 78vw;
scroll-snap-align: start;
} .home-carousel-control {
display: none;
} .home-product-image img {
-webkit-user-drag: none;
}
} @media (max-width: 520px) {
.brand img {
width: 30px;
height: 30px;
}
.brand span b {
font-size: 0.62rem;
}
.hero-photo {
height: 54vh;
min-height: 410px;
}
.contact-strip {
padding-top: 50px;
padding-bottom: 50px;
}
.workshop-main dl div {
grid-template-columns: 95px 1fr;
}
.services article {
padding: 55px 0;
}
.about-page h1 {
margin-bottom: 42px;
}
.workshop-calendar-heading h2 {
font-size: clamp(2.35rem, 11vw, 3.4rem);
}
.workshop-calendar-weekdays span {
font-size: 0.58rem;
}
.calendar-day {
padding: 2px;
}
.calendar-day-number {
width: 39px;
height: 39px;
font-size: 0.82rem;
}
.workshop-modal-details > div {
grid-template-columns: 90px 1fr;
}
.workshop-calendar-booking-note {
line-height: 1.5;
}
} @media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.calendar-day-number,
.home-carousel-control {
transition: none;
}
} .workshop-page-intro {
min-height: 0;
justify-content: flex-start;
align-items: flex-start;
}
.workshop-page-intro .lead {
max-width: 760px;
margin-bottom: 18px;
} .workshop-quick-nav {
display: flex;
flex-wrap: wrap;
gap: 14px 28px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line);
width: 100%;
}
.workshop-quick-nav a {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding-bottom: 7px;
border-bottom: 1px solid transparent;
}
.workshop-quick-nav a:hover,
.workshop-quick-nav a:focus-visible {
border-bottom-color: currentColor;
} .workshop-quick-nav-wrap {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
}
.workshop-nav-arrow {
display: none;
}
@media (max-width: 768px) {
.workshop-page-intro {
min-width: 0;
max-width: 100%;
}
.workshop-quick-nav-wrap {
display: flex;
align-items: center;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.workshop-quick-nav-wrap .workshop-quick-nav {
display: flex;
flex: 1 1 0;
width: 0;
min-width: 0;
max-width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
gap: 24px;
}
.workshop-quick-nav::-webkit-scrollbar {
display: none;
}
.workshop-quick-nav a {
flex: 0 0 auto;
white-space: nowrap;
}
.workshop-quick-nav-wrap .workshop-nav-arrow:not([hidden]) {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
width: 30px;
height: 30px;
padding: 0;
border: none;
border-radius: 0;
background: var(--cream);
color: var(--ink);
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 2;
}
}  #kalender,
#savizen,
#reeded,
#privaatne,
#hea-teada {
scroll-margin-top: 20px;
} @media (max-width: 768px) {
#kalender,
#savizen,
#reeded,
#privaatne,
#hea-teada {
scroll-margin-top: 10px;
}
.workshop-nav-prev {
left: 0;
right: auto;
margin: 0;
}
.workshop-nav-next {
left: auto;
right: 0;
margin: 0;
}
.workshop-quick-nav-wrap {
padding-top: 36px;
}
.workshop-quick-nav-wrap .workshop-quick-nav {
margin-top: 0;
}
}