.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/fraunces-italic-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/fraunces-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/fraunces-normal-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/fraunces-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  @font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-sans-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-sans-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  @font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//colourtalk.com.au/wp-content/themes/colourtalk/assets/fonts/instrument-serif-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-padding-top: 30px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
input,
textarea {
font: inherit;
color: inherit;
background: transparent;
border: none;
outline: none;
}
:root {
--paper: #EDEDEB;
--paper-2: #EDEDEB;
--paper-3: #F4F3F1;
--ink: #0E0E0D;
--ink-soft: #2A2A28;
--muted: #807E78;
--line: #D4D1CB;
--line-soft: #E0DDD6;
--c-black: #0E0E0D;
--c-red: #6E1A1A;
--c-blue: #3B79A8;
--c-white: #F5F3F0;
--c-green: #2F6B4F;
--c-purple: #6A3FC9;
--serif: 'Fraunces', 'Instrument Serif', Georgia, serif;
--serif-alt: 'Instrument Serif', Georgia, serif;
--sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
--g: clamp(20px, 5vw, 72px);
--max: 1440px;
--sect-p: clamp(60px, 8vh, 100px); --hero-gap: 32px;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
body {
font-family: var(--sans);
color: var(--ink);
background:
radial-gradient(1200px 600px at 50% -200px, rgba(0, 0, 0, 0.03), transparent 70%),
linear-gradient(180deg, #EDEDEB 0%, #F4F3F1 40%, #FFFFFF 100%);
background-attachment: fixed;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
position: relative;
min-height: 100vh;
} body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 200;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
opacity: .6;
mix-blend-mode: multiply;
}
::selection {
background: var(--ink);
color: var(--paper);
}
.wrap {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--g);
position: relative;
} .display {
font-family: var(--serif);
font-weight: 340;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
letter-spacing: -0.035em;
line-height: 0.92;
color: var(--ink);
font-size: clamp(2.4rem, 6vw, 4.8rem); }
.display em {
font-style: italic;
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
}
.tag {
font-family: var(--sans);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--muted);
font-weight: 500;
}
.chapter-plate {
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.72rem;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 14px;
} .top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
padding: 18px var(--g);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
background: rgba(239, 236, 228, 0.55);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid transparent;
transition: background .3s ease, border-color .3s ease;
}
.top.scrolled {
background: rgba(239, 236, 228, 0.9);
border-color: rgba(0, 0, 0, 0.06);
}
.wordmark {
font-family: var(--serif);
font-size: 1.1rem;
letter-spacing: 0.38em;
text-transform: uppercase;
font-weight: 500;
font-variation-settings: "opsz" 14;
}
.wordmark sup {
font-size: 0.55em;
letter-spacing: 0.1em;
color: var(--muted);
margin-left: 6px;
}
.top-nav {
display: none;
justify-content: center;
gap: 28px;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
}
.top-nav a {
display: inline-flex;
gap: 6px;
padding: 6px 0;
position: relative;
}
.top-nav a em {
font-family: var(--serif-alt);
font-style: italic;
font-weight: 400;
color: var(--muted);
font-size: .78rem;
letter-spacing: 0;
text-transform: none;
}
.top-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.top-nav a:hover::after {
transform: scaleX(1);
}
.top-right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 14px;
}
.est {
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
display: none;
}
.top-cta {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 10px 18px;
border: 1px solid var(--ink);
border-radius: 999px;
transition: background .3s ease, color .3s ease;
}
.top-cta:hover {
background: var(--ink);
color: var(--paper);
}
.burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
width: 40px;
height: 40px;
gap: 5px;
z-index: 70;
position: relative;
}
.burger span {
width: 22px;
height: 1.5px;
background: var(--ink);
margin: 0 auto;
transition: transform .35s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
@media (min-width: 960px) {
.top-nav {
display: flex;
}
.burger {
display: none;
}
.est {
display: inline;
}
}
@media (max-width: 959px) {
.top-cta {
display: none;
}
} .mmenu {
position: fixed;
inset: 0;
z-index: 65;
background: rgba(239, 236, 228, 0.97);
backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 var(--g);
opacity: 0;
pointer-events: none;
transition: opacity .45s ease, visibility 0s linear .45s;
}
.mmenu.open {
opacity: 1;
pointer-events: auto;
transition: opacity .45s ease, visibility 0s linear 0s;
}
.mmenu ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.mmenu a {
font-family: var(--serif);
font-weight: 340;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-size: clamp(2.6rem, 10vw, 4.4rem);
line-height: .95;
color: var(--ink);
display: block;
transform: translateY(30px);
opacity: 0;
transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease;
}
.mmenu a em {
font-style: italic;
font-weight: 300;
color: var(--muted);
font-size: .65em;
margin-right: 10px;
}
.mmenu.open li:nth-child(1) a {
transition-delay: .08s;
transform: translateY(0);
opacity: 1;
}
.mmenu.open li:nth-child(2) a {
transition-delay: .16s;
transform: translateY(0);
opacity: 1;
}
.mmenu.open li:nth-child(3) a {
transition-delay: .24s;
transform: translateY(0);
opacity: 1;
}
.mmenu.open li:nth-child(4) a {
transition-delay: .32s;
transform: translateY(0);
opacity: 1;
}
.mmenu.open li:nth-child(5) a {
transition-delay: .40s;
transform: translateY(0);
opacity: 1;
}
.mmenu.open li:nth-child(6) a {
transition-delay: .48s;
transform: translateY(0);
opacity: 1;
}
body.lock {
overflow: hidden;
} .rail {
position: fixed;
left: 18px;
top: 0;
bottom: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 40;
pointer-events: none;
}
.rail span {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.7rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--muted);
}
@media (min-width: 1200px) {
.rail {
display: flex;
}
} .hero {
min-height: 100vh;
max-height: 100vh;
padding: 60px 0 20px; position: relative;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
@media (max-width: 600px) {
.hero {
min-height: auto;
max-height: none;
padding: 96px 0 40px;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: visible;
}
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: start;
}
@media (max-width: 600px) {
.hero-grid {
gap: 5px;
}
}
@media (min-width: 900px) {
.hero-grid {
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: start;
}
}
.hero-text {
padding-top: 50px;
display: flex;
flex-direction: column;
gap: var(--hero-gap);
}
@media (max-width: 600px) {
.hero-text {
padding-top: 0;
}
}
.tag {
font-family: var(--sans);
font-size: 0.75rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
}
@media (max-width: 600px) {
:root {
--hero-gap: 5px;
}
}
.hero-title {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 320;
line-height: 0.88;
letter-spacing: -0.035em;
}
@media (max-width: 600px) {
.hero-title {
line-height: 0.85;
}
}
.hero-title .l1 {
font-size: clamp(2.4rem, 10vw, 9.5rem);
display: block;
}
.hero-title .l2 {
font-style: italic;
font-weight: 300;
font-size: clamp(3rem, 12vw, 11.5rem);
display: block;
margin-left: clamp(16px, 5vw, 100px);
color: var(--ink);
}
.hero-title .l3 {
font-size: clamp(2.4rem, 10vw, 9.5rem);
display: block;
margin-left: clamp(24px, 8vw, 200px);
}
.hero-title .asterisk {
display: inline-block;
font-style: italic;
color: var(--ink);
font-weight: 300;
transform: translateY(-0.15em);
font-size: .6em;
}
.hero-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0 20px;
gap: 32px;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.hero-meta {
padding: 12px 0;
gap: 12px;
}
}
.hero-meta .lead {
font-family: var(--sans);
font-style: normal;
font-size: clamp(1rem, 1.2vw, 1.2rem);
line-height: 1.4;
color: var(--ink-soft);
max-width: 32ch;
}
.hero-meta .spec {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.hero-meta .spec strong {
color: var(--ink);
font-weight: 500;
}
.hero-photo {
position: relative;
aspect-ratio: 3/4;
}
@media (max-width: 600px) {
.hero-photo {
aspect-ratio: 3/4;
max-height: 50vh;
margin: 0 auto;
width: 80%;
}
.hero-bands .h-band {
width: 40%;
}
.h-band-black {
left: 15% !important;
}
.h-band-red {
right: 15% !important;
}
.h-band-blue {
left: 15% !important;
}
.h-band-white {
right: 15% !important;
}
.h-band-green {
left: 15% !important;
}
.h-band-purple {
right: 15% !important;
}
}
.hero-bands {
width: 100%;
height: 100%;
position: relative;
}
.hero-bands .h-band {
position: absolute;
width: 58%;
mix-blend-mode: multiply; animation: floatClean 4s ease-in-out infinite alternate;
transition: transform 0.4s var(--ease-out-expo), filter 0.4s var(--ease-out-expo);
}
.hero-bands .h-band:hover {
transform: scale(1.1) rotate(-5deg) !important;
z-index: 50 !important;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25)) !important;
animation-play-state: paused;
}           @keyframes floatClean {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.h-band {
will-change: transform;
} .h-band-black {
top: -12%;
left: 10%;
z-index: 6;
animation-delay: 0s;
}
.h-band-red {
top: 3%;
right: 10%;
z-index: 5;
animation-delay: -0.66s;
}
.h-band-blue {
top: 23%;
left: 10%;
z-index: 4;
animation-delay: -1.33s;
}
.h-band-white {
top: 38%;
right: 10%;
z-index: 3;
animation-delay: -2s;
}
.h-band-green {
top: 59%;
left: 10%;
z-index: 2;
animation-delay: -2.66s;
}
.h-band-purple {
top: 75%;
right: 10%;
z-index: 1;
animation-delay: -3.33s;
} @media (min-width: 900px) and (max-height: 820px) {
.hero {
padding: 110px 0 36px;
}
.hero-text {
padding-top: 20px;
}
.hero-photo {
aspect-ratio: 3/4;
max-height: 62vh;
}
.hero-bands .h-band {
width: 52%;
}
.hero-title .l1,
.hero-title .l3 {
font-size: clamp(2.8rem, 9vw, 7.5rem);
}
.hero-title .l2 {
font-size: clamp(3.8rem, 11vw, 9.5rem);
}
:root {
--hero-gap: 24px;
}
.hero-meta {
padding: 0;
}
.why-photo img {
max-height: 80vh;
}
.why .sect-head h2 {
font-size: clamp(2.6rem, 6vw, 4.8rem);
}
.why-lead {
font-size: clamp(1.7rem, 2.8vw, 2.4rem);
}
.why-body {
font-size: 1.15rem;
}
.founder-card {
max-width: 680px;
}
.founder-card img.portrait {
max-height: 82vh;
}
.founder .sect-head h2 {
font-size: clamp(2.6rem, 6vw, 4.8rem);
}
.pullquote {
font-size: clamp(1.8rem, 4vw, 3.2rem);
}
}
@media (min-width: 900px) and (max-height: 720px) {
.hero {
padding: 96px 0 28px;
}
.hero-text {
padding-top: 20px;
}
.hero-photo {
aspect-ratio: 3/4;
max-height: 60vh;
}
.hero-bands .h-band {
width: 56%;
}
.hero-title .l1,
.hero-title .l3 {
font-size: clamp(2.6rem, 6.5vw, 6.5rem);
}
.hero-title .l2 {
font-size: clamp(3.4rem, 9vw, 8rem);
}
:root {
--hero-gap: 32px;
}
.hero-meta {
padding: 16px 0;
}
.why-photo img {
max-height: 72vh;
}
.why .sect-head h2 {
font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.why-lead {
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}
.why-body {
font-size: 1.1rem;
}
.founder-card {
max-width: 620px;
}
.founder-inner {
gap: 5px;
}
.founder-card img.portrait {
max-height: 76vh;
}
.founder .sect-head h2 {
font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.pullquote {
font-size: clamp(1.6rem, 3.2vw, 2.9rem);
}
} .marquee {
margin-top: 80px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
white-space: nowrap;
padding: 22px 0;
}
.marquee-track {
display: inline-flex;
gap: 48px;
font-family: var(--serif);
font-variation-settings: "opsz" 144;
font-style: italic;
font-weight: 300;
font-size: clamp(1.3rem, 2vw, 1.8rem);
color: var(--ink-soft);
animation: slide 38s linear infinite;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
} section {
padding: var(--sect-p) 0;
position: relative;
min-height: 100vh; display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 600px) {
section {
padding: clamp(40px, 8vw, 60px) 0;
min-height: auto !important; }
}
#why {
min-height: auto;
display: flex;
align-items: center;
padding: clamp(56px, 8vh, 88px) 0;
}
.sect-head {
margin-bottom: clamp(24px, 3vw, 40px);
}
.sect-head h2 {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 320;
letter-spacing: -0.025em;
line-height: 0.95;
font-size: clamp(2.2rem, 5.5vw, 4.5rem);
}
.sect-head h2 em {
font-style: italic;
font-weight: 300;
color: var(--ink);
} .why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
@media (min-width: 900px) {
.why-grid {
grid-template-columns: 2fr 1fr;
gap: 10px;
} .why-content {
order: 1;
}
.why-photo {
order: 2;
}
}
.why-photo img {
width: 100%;
height: auto;
max-height: 72vh;
object-fit: contain;
object-position: center bottom;
display: block;
margin-left: auto;
}
@media (max-width: 600px) {
.why-photo {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.why-photo img {
min-height: 48vh;
max-height: 62vh;
object-position: center bottom;
}
}
.why .sect-head {
margin-bottom: clamp(20px, 2.4vw, 32px);
}
.why .sect-head h2 {
font-size: clamp(2.4rem, 5.5vw, 4.5rem);
}
.why-inner {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
@media (max-width: 600px) {
.why-inner {
gap: 20px;
}
}
.why-lead {
font-family: var(--serif);
font-style: normal;
font-size: clamp(1.55rem, 2.5vw, 2.2rem);
line-height: 1.25;
color: var(--ink);
}
.why-body {
display: grid;
gap: 16px;
font-size: 1.1rem;
color: var(--ink-soft);
line-height: 1.6;
max-width: 52ch;
}
@media (max-width: 600px) {
.why-body {
gap: 10px;
font-size: 0.95rem;
}
}
.why-footnote {
margin-top: 48px;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.why-footnote span::before {
content: "— ";
color: var(--ink);
} #how {
min-height: auto;
display: flex;
align-items: center;
padding: clamp(48px, 7vh, 72px) 0;
}
#how .sect-head {
margin-bottom: clamp(16px, 2vw, 24px);
}
.how-steps {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
.how-row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 14px 0;
border: none;
align-items: start;
position: relative;
}
@media (max-width: 600px) {
.how-row,
.how-row:first-child {
border: none;
padding: 14px 0;
}
}
@media (min-width: 800px) {
.how-row {
grid-template-columns: 1fr;
padding: 18px 0;
align-items: center;
}
}
.how-row h3 {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 340;
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.how-row h3 em {
font-style: italic;
font-weight: 300;
color: var(--ink);
}
.how-row p {
color: var(--ink-soft);
font-size: 1.02rem;
line-height: 1.65;
}
.how-end {
margin-top: 24px;
text-align: left;
font-family: var(--serif);
font-style: normal;
font-weight: 320;
font-size: clamp(.85rem, 1.2vw, 1rem);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
display: flex;
flex-direction: column;
gap: 12px;
}
.how-end span+span::before {
content: "·";
margin-right: 36px;
color: var(--muted);
} .colours {
padding: 40px 0; min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 600px) {
.colours {
padding-top: 40px;
padding-bottom: 60px;
}
}
.colours-index {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 24px;
margin-bottom: 80px;
padding: 0 0 40px 0;
border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
.colours-index {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1100px) {
.colours-index {
grid-template-columns: repeat(6, 1fr);
}
}
.colours-index .ix {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 10px 0;
border-top: 1px solid var(--line);
}
.colours-index .ix .dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex: none;
}
.colours-index .ix .num {
color: var(--muted);
font-style: italic;
font-family: var(--serif-alt);
text-transform: none;
letter-spacing: 0;
font-size: .95rem;
}
.strip {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 600px) {
.strip {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
.strip {
grid-template-columns: repeat(3, 1fr) !important; gap: 20px;
}
}
.plate {
display: flex;
flex-direction: column;
gap: 8px; position: relative;
padding: 24px 20px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: 12px;
transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease;
}
@media (max-width: 600px) {
.plate {
padding: 24px 20px;
gap: 12px;
}
}
.plate:hover {
transform: translateY(-8px);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.05);
}
.plate .plate-img {
aspect-ratio: 16/9; max-height: 180px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.plate .plate-img img {
width: 110%; object-fit: contain;
mix-blend-mode: multiply;
transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.plate:hover .plate-img img {
transform: rotate(-5deg) scale(1.05);
}
.plate .plate-name {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 340;
font-size: 1.25rem; display: flex;
align-items: center;
gap: 8px;
}
.plate .plate-name .cdot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.plate .plate-meaning {
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
}
.plate .plate-hex {
font-family: var(--serif-alt);
font-style: italic;
font-size: .85rem;
color: var(--muted);
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--line-soft);
} .atmosphere {
position: relative;
width: 100%;
padding: var(--sect-p) 0;
min-height: 100vh;
display: flex;
align-items: center;
}
@media (min-width: 900px) {
.atmosphere .wrap {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 80px;
}
}
.atmos-img {
width: 100%;
position: relative;
display: flex;
justify-content: center;
}
.atmos-img img {
width: auto;
max-width: 100%;
height: auto;
max-height: 80vh; display: block;
filter: grayscale(100%) contrast(1.05);
opacity: 0.65;
mix-blend-mode: multiply;
transition: opacity 0.8s ease, filter 0.8s ease;
}
.atmos-img:hover img {
opacity: 0.9;
filter: grayscale(10%) contrast(1.05);
}
.atmosphere.product img {
filter: none;
opacity: 1;
}
.atmosphere.product:hover img {
filter: none;
opacity: 1;
}
.mood-caption {
margin-top: 40px;
text-align: left; max-width: 40ch;
}
@media (max-width: 600px) {
.mood-caption {
margin-top: 20px;
}
}
.mood-caption h3 {
font-family: var(--serif);
font-size: 1.25rem;
font-weight: 400;
color: var(--ink);
margin-bottom: 8px;
}
.mood-caption p {
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink-soft);
letter-spacing: 0.02em;
} .founder {
padding: clamp(48px, 7vh, 80px) 0;
min-height: auto;
display: flex;
align-items: center;
}
@media (max-width: 600px) {
.founder {
padding: clamp(40px, 8vw, 56px) 0;
}
}
.founder .sect-head {
margin-bottom: clamp(18px, 2.4vw, 28px);
}
.founder .sect-head h2 {
font-size: clamp(1.9rem, 4vw, 3.5rem);
}
.founder-inner {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
align-items: center;
}
@media (min-width: 900px) {
.founder-inner {
grid-template-columns: 0.60fr 1.25fr;
gap: 50px;
}
}
.founder-card {
position: relative;
width: 100%;
max-width: 620px;
}
.founder-card .frame {
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.founder-card img.portrait {
width: 100%;
height: auto;
max-height: 65vh;
object-fit: contain;
object-position: left;
display: block;
mix-blend-mode: multiply;
transition: transform 0.8s var(--ease-out-expo);
}
@media (max-width: 600px) {
.founder-card {
max-width: 100%;
}
.founder-card img.portrait {
min-height: 48vh;
max-height: 62vh;
object-position: center bottom;
}
}
.founder-card:hover img.portrait {
transform: scale(1.03);
}
.founder-card .corner {
position: absolute;
left: -14px;
top: -14px;
font-family: var(--serif-alt);
font-style: italic;
font-size: .95rem;
color: var(--ink);
background: var(--paper);
padding: 6px 12px;
border: 1px solid var(--line);
}
.pullquote {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 320;
font-size: clamp(1.8rem, 3vw, 3rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
position: relative;
}
.pullquote em {
font-style: italic;
font-weight: 300;
color: var(--ink);
}
.pullquote::before {
content: "\201C";
position: absolute;
left: -0.25em;
top: -0.35em;
font-size: 2.2em;
line-height: 1;
color: var(--ink);
opacity: .3;
font-style: italic;
}
.how-end {
margin-top: 28px;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
font-family: var(--sans);
font-style: normal;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
text-align: left;
}
.how-end span {
display: block;
}
.how-end span+span::before {
display: none;
content: none;
margin: 0;
}
@media (min-width: 600px) {
.how-end {
flex-direction: row;
justify-content: flex-start;
gap: 48px;
text-align: left;
}
}
.pullquote p+p {
margin-top: 12px;
}
.byline {
margin-top: 28px;
display: flex;
gap: 20px;
align-items: center;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.byline em {
font-family: var(--serif-alt);
font-style: italic;
color: var(--ink-soft);
font-size: .95rem;
text-transform: none;
letter-spacing: 0;
} .statement {
padding: var(--sect-p) 0;
background: transparent;
color: var(--ink);
text-align: center;
position: relative;
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
}
.statement-inner {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
}
.statement-inner p {
margin: 0;
}
.statement-stack {
display: flex;
flex-direction: column;
gap: clamp(8px, 2vh, 14px);
}
.statement-stack p {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(1.4rem, 4.5vw, 2.6rem);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink);
line-height: 1.1;
}
.statement-simply {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(1.6rem, 5.5vw, 3.8rem);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink);
margin-top: clamp(40px, 8vh, 64px) !important;
}
.statement-line {
display: none;
}
@media (max-width: 600px) {
.statement {
padding: 80px 0;
}
}  .closing {
padding: var(--sect-p) 0;
text-align: center;
position: relative;
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.closing .stamp {
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 48px;
}
.closing h2 {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 320;
font-size: clamp(2.6rem, 7vw, 6rem);
line-height: 1;
letter-spacing: -0.035em;
max-width: 20ch;
margin: 0 auto 32px; }
.closing h2 em {
font-style: italic;
font-weight: 300;
color: var(--ink);
}
.closing p {
font-family: var(--serif);
font-style: normal;
font-size: clamp(1.05rem, 1.6vw, 1.4rem);
color: var(--ink-soft);
max-width: 38ch;
margin: 0 auto;
}
.closing-intentions {
margin-top: clamp(48px, 10vh, 80px);
color: var(--c-green);
font-family: var(--sans);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
max-width: none !important;
line-height: 1.6;
}
.closing-intentions .highlight {
font-style: italic;
font-weight: 500;
text-transform: uppercase;
} .faq {
padding: clamp(72px, 12vh, 140px) 0 clamp(56px, 9vh, 110px);
min-height: auto;
}
.faq .wrap {
max-width: 820px;
}
.faq-head {
text-align: center;
margin: 0 auto clamp(48px, 7vh, 80px);
max-width: 620px;
}
.faq-head h2 {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 320;
letter-spacing: -0.025em;
line-height: 0.95;
font-size: clamp(2.2rem, 5.5vw, 4.5rem);
color: var(--ink);
}
.faq-head h2 em {
font-style: italic;
font-weight: 300;
color: var(--ink);
}
.faq-lead {
margin-top: clamp(16px, 2vh, 24px);
font-family: var(--sans);
font-size: clamp(1rem, 1.2vw, 1.2rem);
letter-spacing: 0.01em;
color: var(--ink-soft);
line-height: 1.55;
}
.faq-list {
display: block;
}
.faq-item {
border-top: 1px solid var(--line-soft);
}
.faq-item:last-child {
border-bottom: 1px solid var(--line-soft);
}
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(22px, 3.2vh, 32px) 4px;
text-align: left;
font-family: var(--serif);
font-weight: 400;
font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
font-size: clamp(1.2rem, 2.2vw, 1.55rem);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
cursor: pointer;
transition: color 0.5s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo);
}
.faq-q:hover,
.faq-q:focus-visible {
color: var(--ink-soft);
}
.faq-q:focus-visible {
outline: none;
}
.faq-q-text {
flex: 1 1 auto;
min-width: 0;
}
.faq-icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
opacity: 0.55;
transition: transform 0.55s var(--ease-out-expo), opacity 0.45s var(--ease-out-expo);
transform-origin: 50% 50%;
}
.faq-q[aria-expanded="true"] .faq-icon {
transform: rotate(180deg);
opacity: 0.9;
}
.faq-q[aria-expanded="true"] {
color: var(--ink);
}
.faq-a {
overflow: hidden;
height: 0;
opacity: 0;
transition:
height 0.55s var(--ease-out-expo),
opacity 0.45s var(--ease-out-expo);
will-change: height;
}
.faq-a[hidden] {
display: block;
}
.faq-a.is-open {
opacity: 1;
}
.faq-a-inner {
padding: 0 4px clamp(22px, 3vh, 30px);
max-width: 52ch;
font-family: var(--sans);
font-size: 1.1rem;
line-height: 1.6;
color: var(--ink-soft);
}
.faq-a-inner p {
margin: 0 0 0.7em;
}
.faq-a-inner p:last-child {
margin-bottom: 0;
}
.faq-a-inner em {
font-style: italic;
color: var(--ink);
}
.faq-a-inner ul,
.faq-a-inner ol {
margin: 0 0 0.7em;
padding-left: 1.4em;
}
.faq-a-inner ul {
list-style: disc;
}
.faq-a-inner ol {
list-style: decimal;
}
.faq-a-inner li {
margin: 0 0 0.35em;
padding-left: 0.15em;
}
.faq-a-inner li:last-child {
margin-bottom: 0;
}
.faq-a-inner li::marker {
color: var(--muted);
}
@media (max-width: 600px) {
.faq {
padding: clamp(56px, 9vh, 80px) 0 clamp(40px, 7vh, 60px);
}
.faq-head {
margin-bottom: clamp(32px, 6vh, 48px);
}
.faq-q {
padding: 22px 2px;
min-height: 44px;
font-size: 1.3rem;
line-height: 1.35;
gap: 14px;
}
.faq-q-text {
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.faq-icon {
width: 18px;
height: 18px;
}
.faq-a-inner {
padding: 0 2px 22px;
font-size: 0.95rem;
}
}
@media (prefers-reduced-motion: reduce) {
.faq-a,
.faq-icon,
.faq-q {
transition: none;
}
} .contact {
padding: clamp(56px, 8vh, 88px) 0 clamp(48px, 7vh, 72px);
min-height: auto;
}
.contact-inner {
display: grid;
grid-template-columns: 1fr;
gap: 44px;
align-items: start;
}
@media (min-width: 900px) {
.contact-inner {
grid-template-columns: 1fr 1.05fr;
gap: 72px;
align-items: flex-start;
}
}
.contact-title {
font-family: var(--serif);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
font-weight: 320;
font-size: clamp(2.8rem, 7.5vw, 6rem);
line-height: 0.95;
letter-spacing: -0.03em;
}
.contact-title em {
font-style: italic;
font-weight: 300;
color: var(--ink);
}
.contact-sub {
margin-top: 20px;
font-family: var(--sans);
font-style: normal;
font-size: 1.05rem;
color: var(--ink-soft);
max-width: 38ch;
}
.contact-direct {
margin-top: 28px;
display: grid;
gap: 8px;
font-size: 0.82rem;
}
.contact-direct a {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 16px;
align-items: center;
padding: 12px 0;
border-top: 1px solid var(--line);
transition: color .3s ease, padding .3s ease;
}
.contact-direct a:last-child {
border-bottom: 1px solid var(--line);
}
.contact-direct a:hover {
padding-left: 8px;
}
.contact-direct a .lbl {
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.contact-direct a .val {
font-family: var(--serif-alt);
font-style: italic;
color: var(--ink);
font-size: 1.05rem;
}
.contact-direct a .arr {
font-family: var(--serif-alt);
color: var(--muted);
transition: transform .4s ease, color .3s ease;
}
.contact-direct a:hover .arr {
transform: translateX(6px);
color: var(--ink);
} .form {
display: grid;
gap: 16px;
}
.f {
display: grid;
grid-template-columns: 110px 1fr;
gap: 14px;
align-items: center;
border-bottom: 1px solid var(--line);
padding: 10px 0;
transition: border-color .3s ease;
}
.f:focus-within {
border-color: var(--ink);
}
.f label {
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.f input,
.f textarea {
font-size: 1.05rem;
font-family: var(--serif-alt);
color: var(--ink);
padding: 6px 0;
width: 100%;
}
.f input::placeholder,
.f textarea::placeholder {
font-style: normal;
color: #a8a6a0;
}
.f.msg {
grid-template-columns: 1fr;
align-items: start;
gap: 8px;
}
.f.msg textarea {
min-height: 96px;
resize: none;
font-family: var(--sans);
font-style: normal;
}
@media (min-width: 800px) {
.f.msg textarea {
resize: vertical;
}
}
.form-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 8px;
}
.form-foot .note {
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.send {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 13px 26px;
background: var(--ink);
color: var(--paper);
border-radius: 999px;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
transition: transform .35s ease, background .35s ease;
}
.send:hover {
transform: translateY(-2px);
}
.send .arrow {
width: 16px;
height: 1px;
background: var(--paper);
display: inline-block;
position: relative;
}
.send .arrow::after {
content: "";
position: absolute;
right: -1px;
top: -3px;
width: 7px;
height: 7px;
border-right: 1px solid var(--paper);
border-top: 1px solid var(--paper);
transform: rotate(45deg);
}
.form-success {
display: none;
margin-top: 20px;
padding: 16px 20px;
border-top: 1px solid var(--c-green);
border-bottom: 1px solid var(--c-green);
color: var(--c-green);
font-family: var(--serif-alt);
font-style: italic;
}
.form-success.show {
display: block;
} footer {
padding: 40px 0 48px;
border-top: 1px solid var(--line);
}
.colophon {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.colophon .left {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.colophon .footer-logo {
height: 25px;
width: auto;
flex-shrink: 0;
}
.colophon .footer-brand { align-items: baseline;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.colophon .right {
text-align: center;
}
.colophon em {
font-family: var(--serif-alt);
font-style: italic;
color: var(--ink-soft);
text-transform: none;
letter-spacing: 0;
word-spacing: 0.15em;
font-size: .9rem;
}
@media (min-width: 800px) {
.colophon {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.colophon .left {
justify-content: flex-start;
}
.colophon .footer-logo {
height: 35px;
width: 35px; 
}
.colophon .footer-brand {
justify-content: flex-start;
}
.colophon .right {
text-align: right;
}
} .rv {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}
.rv.in {
opacity: 1;
transform: translateY(0);
}
.rv[data-d="1"] {
transition-delay: .12s;
}
.rv[data-d="2"] {
transition-delay: .24s;
}
.rv[data-d="3"] {
transition-delay: .36s;
}
.rv[data-d="4"] {
transition-delay: .48s;
}
.rv[data-d="5"] {
transition-delay: .6s;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
.rv {
opacity: 1;
transform: none;
}
} .wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-spinner { display: none !important; }
.wpcf7-response-output { display: none !important; font-size: 0.9rem; padding: 20px 0; color: #2F6B4F; border-top: 1px solid #D4D1CB; margin-top: 20px; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; }
.wpcf7 form.sent .wpcf7-response-output { display: block !important; }