/* Copper Portfolio: shared look. Phone-first; wider screens are added at the bottom of each block. */
/* ---------- Fonts (files live on this site, in /fonts) ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
src: url('/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
src: url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
src: url('/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
src: url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/pinyon-script-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- Colours and settings ---------- */
:root {
--stone: #171918;
--stone-deep: #0d0e0d;
--gold: #e0a63e;
--gold-hot: #ffd27a;
--copper: #b87333;
--copper-hi: #d28a4a;
--verdigris: #4a7c6f;
--text: #ece4d4; /* warm off-white */
--muted: #a89f8f;
--line: rgba(236, 228, 212, 0.16);
--display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
--script: 'Pinyon Script', 'Snell Roundhand', 'Brush Script MT', cursive;
/* Background: how big the stone tile is, how wide the verdigris edge strips are,
and how much dark veil sits over the stone (light at the edges, heavy in the middle). */
--stone-size: 900px;
--patina-w: clamp(84px, 24vw, 120px);
--veil: linear-gradient(90deg,
rgba(8, 9, 8, .3) 0%, rgba(8, 9, 8, .45) 4%, rgba(8, 9, 8, .84) 14%, rgba(8, 9, 8, .9) 50%,
rgba(8, 9, 8, .84) 86%, rgba(8, 9, 8, .45) 96%, rgba(8, 9, 8, .3) 100%);
color-scheme: dark;
}
@media (min-width: 701px) {
:root {
--stone-size: 1500px;
--patina-w: clamp(200px, 22vw, 340px);
--veil: linear-gradient(90deg,
rgba(8, 9, 8, .3) 0%, rgba(8, 9, 8, .45) 6%, rgba(8, 9, 8, .84) 20%, rgba(8, 9, 8, .9) 50%,
rgba(8, 9, 8, .84) 80%, rgba(8, 9, 8, .45) 94%, rgba(8, 9, 8, .3) 100%);
}
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--stone-deep); -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
color: var(--text);
font-family: var(--body);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* One continuous stone wall down the whole page. From the top layer down:
verdigris on the left edge, verdigris on the right edge, the dark veil, the stone itself. */
background-color: var(--stone-deep);
background-image: url('/img/patina-left.png'), url('/img/patina-right.png'), var(--veil), url('/img/stone-tile.jpg');
background-repeat: repeat-y, repeat-y, no-repeat, repeat;
background-position: left top, right top, 0 0, 0 0;
background-size: var(--patina-w) auto, var(--patina-w) auto, 100% 100%, var(--stone-size) auto;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }
[hidden] { display: none !important; }
::selection { background: rgba(224, 166, 62, .35); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.05; margin: 0; }
p { margin: 0 0 1em; }
.col { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: max(20px, 4vw); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--stone-deep); border: 1px solid var(--gold); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Small label text: chapter numbers, section labels */
.eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0; }
.eyebrow.gold { color: var(--gold); }
/* Placeholder copy, to be replaced with real words */
.ph { color: var(--muted); font-style: italic; }
.lede { color: var(--muted); max-width: 34em; }
/* A standard page: room at the top for the fixed nav, content, then the footer is pushed to the bottom */
.page { flex: 1; padding-top: clamp(116px, 18vw, 160px); padding-bottom: clamp(56px, 9vw, 100px); }
.page h1 { font-style: italic; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; margin-bottom: 14px; }
/* ---------- Buttons and form fields (used by the contact forms) ---------- */
.btn {
display: inline-block; background: var(--copper); color: #1b1109; border: 0; padding: 14px 22px; min-height: 44px;
font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .2s;
}
.btn:hover { background: var(--copper-hi); }
.form { display: flex; flex-direction: column; gap: 14px; max-width: 34rem; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea, .form select {
width: 100%; background: rgba(11, 12, 11, .85); border: 1px solid var(--line); border-radius: 0; color: var(--text);
padding: 11px 12px; min-height: 44px; font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--verdigris); outline: none; }
.form .btn { align-self: flex-start; }
.status { font-size: .9rem; color: var(--gold-hot); }
/* A hidden field that only automated spam programs fill in; Netlify throws such messages away. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Top navigation: signature on the left, four links on the right ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 30;
padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 22px;
background: linear-gradient(rgba(9, 10, 9, .9), rgba(9, 10, 9, .55) 60%, rgba(9, 10, 9, 0));
}
.nav-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The signature. To use your real one, replace the text with 
. */
.sig {
font-family: var(--script); font-size: 2.3rem; line-height: 1; color: var(--text); text-decoration: none;
padding: 4px 2px; text-shadow: 0 0 18px rgba(224, 166, 62, .25);
}
.sig:hover { color: var(--gold-hot); }
.sig img { height: 2.3rem; width: auto; }
.links { display: none; }
.links a, .menu-panel a {
text-decoration: none; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.links a:hover, .menu-panel a:hover { color: var(--text); }
.links a[aria-current="page"], .menu-panel a[aria-current="page"] { color: var(--gold-hot); border-color: var(--gold); }
/* Phone menu: a plain button, so it works even without JavaScript */
.menu summary {
list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 2px; padding: 10px 16px; min-height: 44px;
font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--gold); }
.menu-panel {
position: absolute; right: 0; top: calc(100% + 10px); width: min(260px, calc(100vw - 40px));
display: flex; flex-direction: column; padding: 6px 18px; background: rgba(12, 13, 12, .96); border: 1px solid var(--line);
}
.menu-panel a { font-size: .85rem; padding: 15px 0; border-bottom: 1px solid var(--line); }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current="page"] { border-color: var(--line); }
@media (min-width: 701px) {
.menu { display: none; }
.links { display: flex; gap: 28px; align-items: center; }
.sig { font-size: 2.6rem; }
}
/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 30px calc(env(safe-area-inset-bottom, 0px) + 40px); background: linear-gradient(rgba(9, 10, 9, 0), rgba(9, 10, 9, .6)); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; align-items: baseline; }
.foot a { text-decoration: none; color: var(--muted); font-size: .95rem; border-bottom: 1px solid var(--verdigris); padding: 4px 0; transition: color .2s; }
.foot a:hover { color: var(--gold-hot); }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; scroll-behavior: auto !important; }
}