/* Syncterface Media — static site * * Design language: "Tactile Editorial", adapted from the Ink & Iron export * (_inkiron/). Taken from it: sharp corners, hairline ink rules, oversized * Instrument Serif display type with italic accents, uppercase wide-tracked * micro-labels, edge-to-edge gutters instead of a centred column, and inverted * dark bands. * * NOT taken from it: the palette. The export's warm clay (#B45309) is replaced * by our steel blue, which comes from the logo, so the identity stays ours. * The role mapping is: * paper -> --paper (near-identical to the export's #F9F7F2) * ink -> --ink / --navy * clay -> --steel (accent: italic display words, labels, hovers) * * The export is Tailwind v4. This is hand-written CSS on purpose: Cloudflare's * build command must stay empty (see README), so there is no compile step. */ :root { --navy: #152232; --steel: #2f6f95; --steel-lt: #7fb3d0; --paper: #fbfaf8; --paper-alt: #f2efe9; --ink: #1d2733; --ink-soft: #56616e; --line: #e2ddd4; --gold: #b8873b; /* Tactile Editorial is square-edged; this is the "iron" in the name. */ --radius: 0px; --wrap: 1680px; --gutter: clamp(1.25rem, 4vw, 3rem); --serif: "Instrument Serif", "Lora", Georgia, "Times New Roman", serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --rule: 1px solid var(--line); --rule-ink: 1px solid var(--ink); --shadow: none; --shadow-lg: none; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================== motion ==== Parallax and scroll-reveal come from assets/js/motion.js: one rAF-throttled scroll handler writing transforms, plus an IntersectionObserver for reveals. Motion is opt-in: `.js-motion` is set on by an inline script in the head, and only when the visitor has not asked for reduced motion. With JS off, or with reduced motion, every element renders in its final state. That script carries a 2.5s failsafe: if motion.js never sets data-motion="ready" the class is stripped, so a failed script request cannot leave the page permanently blank. Testing note: headless Chrome starves requestAnimationFrame entirely, so scroll-linked motion cannot be exercised there. Judge it in a real browser. ========================================================================= */ .js-motion [data-reveal], .js-motion [data-reveal-group] > * { opacity: 0; transform: translateY(22px); } .js-motion [data-reveal].is-revealed, .js-motion [data-reveal-group].is-revealed > * { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); } .js-motion [data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: .07s; } .js-motion [data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: .14s; } .js-motion [data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: .21s; } .js-motion [data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: .28s; } .js-motion [data-reveal-group].is-revealed > *:nth-child(n+6) { transition-delay: .35s; } .js-motion [data-parallax] { will-change: transform; } /* ------------------------------------------------------------ foundation */ body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--ink); } h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0 0 .4em; letter-spacing: -.02em; line-height: .95; } h1 { font-size: clamp(2.9rem, 1.6rem + 6.2vw, 7.5rem); } h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); } h3 { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; } p { margin: 0 0 1em; } em, .italic { font-style: italic; } /* Edge-to-edge gutters rather than a narrow centred column. */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap.narrow { max-width: calc(820px + 2 * var(--gutter)); } .col-narrow { max-width: 760px; } .center { text-align: center; } .split > *, .contact-grid > *, .detail-grid > *, .grid.cards > *, .foot-grid > *, .pkgs > * { min-width: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; } .skip:focus { left: 0; } :where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; } /* The signature micro-label: tiny, uppercase, widely tracked, in accent. */ .kicker { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--steel); margin: 0 0 1.2rem; } .lede { font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; } /* ---------------------------------------------------------------- header */ .site-head { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 248, .92); backdrop-filter: saturate(1.3) blur(10px); border-bottom: var(--rule); } .head-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); min-height: 80px; padding-block: .9rem; } .brand { flex: none; display: block; } .brand-img, .brand img { width: 196px; height: auto; } .nav { margin-left: auto; } .nav ul { display: flex; gap: clamp(1.4rem, 2.6vw, 2.8rem); list-style: none; margin: 0; padding: 0; } .nav a { color: var(--ink); text-decoration: none; font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; padding: .4rem 0; display: block; transition: color .18s ease; } .nav a:hover, .nav a[aria-current] { color: var(--steel); } .nav a[aria-current] { border-bottom: 1px solid var(--steel); } .nav-toggle { display: none; width: 42px; height: 42px; border: var(--rule-ink); background: transparent; cursor: pointer; padding: 12px 10px; flex-direction: column; justify-content: space-between; } .nav-toggle span { display: block; height: 1px; background: var(--ink); } @media (max-width: 980px) { .nav-toggle { display: flex; margin-left: .4rem; } .nav { position: absolute; inset: 80px 0 auto; background: var(--paper); border-bottom: var(--rule-ink); display: none; } .nav.open { display: block; } .nav ul { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1.5rem; } .nav a { padding: .95rem 0; border-bottom: var(--rule); letter-spacing: .18em; } .nav a[aria-current] { border-bottom: var(--rule); color: var(--steel); } } @media (max-width: 480px) { .head-inner { min-height: 66px; gap: .5rem; } .brand-img, .brand img { width: 142px; } .nav { inset: 66px 0 auto; } .nav-toggle { width: 38px; height: 38px; padding: 11px 9px; } } /* ---------------------------------------------------------------- blocks */ .band { padding-block: clamp(3.5rem, 8vw, 8rem); } .band.alt { background: var(--paper-alt); } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); flex-wrap: wrap; border-bottom: var(--rule); padding-bottom: 1.4rem; } .section-head h2 { margin: 0; font-style: italic; } .more { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; text-decoration: none; white-space: nowrap; color: var(--ink-soft); } .more:hover { color: var(--steel); } /* Inverted page masthead. */ .page-head { background: var(--navy); color: var(--paper); padding-block: clamp(3.5rem, 8vw, 7rem); } .page-head h1 { color: var(--paper); margin-bottom: .3rem; } .page-head .kicker { color: var(--steel-lt); } .page-head .lede { color: rgba(251, 250, 248, .62); margin: 0; } .prose { max-width: 66ch; } .prose h2 { margin-top: 2.4rem; font-style: italic; } .prose p { color: var(--ink-soft); line-height: 1.75; } .narrow.prose, .prose.narrow { max-width: 66ch; } .archive-note { border-left: 2px solid var(--gold); padding: .2rem 0 .2rem 1.4rem; font-size: .92rem; color: var(--ink-soft); font-style: italic; } .fineprint { font-size: .88rem; color: var(--ink-soft); margin-top: 2rem; } /* --------------------------------------------------------------- buttons */ /* Square, hairline, invert on hover — the export's defining control. */ .btn { display: inline-block; padding: .95rem 2rem; border-radius: 0; font: 500 .72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .16em; text-decoration: none; border: 1px solid var(--ink); cursor: pointer; background: transparent; color: var(--ink); transition: background .2s ease, color .2s ease, border-color .2s ease; } .btn-primary { background: var(--ink); color: var(--paper); } .btn-primary:hover { background: var(--steel); border-color: var(--steel); color: var(--paper); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .cta-row { display: flex; gap: .9rem; flex-wrap: wrap; margin: 2rem 0 0; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3.5rem, 9vw, 9rem) 0; } .hero-glow { position: absolute; inset: -25% -10% auto; height: 120%; z-index: -1; pointer-events: none; background: radial-gradient(46rem 30rem at 14% 6%, rgba(127, 179, 208, .20), transparent 62%), radial-gradient(30rem 22rem at 92% 0%, rgba(184, 135, 59, .12), transparent 60%); } .hero-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero-inner { display: grid; gap: 2.5rem; align-items: end; } @media (min-width: 900px) { .hero-inner { grid-template-columns: repeat(12, 1fr); gap: 3rem; } .hero-copy { grid-column: span 8; } .hero-aside { grid-column: span 4; } } .hero-copy h1 { margin: 0; } .hero-copy h1 .accent { font-style: italic; color: var(--steel); } .hero-aside { display: flex; flex-direction: column; gap: 1.6rem; } .hero-aside .lede { margin: 0; } .hero-rule { height: 1px; width: 100%; background: var(--line); } .hero-meta { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--steel); margin: 0; } .hero-art { margin-top: clamp(2.5rem, 6vw, 5rem); } .hero-art picture, .hero-art img { display: block; width: 100%; } .hero-art img { border: var(--rule); } /* ------------------------------------------------- inverted showcase band */ .showcase { position: relative; isolation: isolate; overflow: clip; background: var(--navy); color: var(--paper); padding-block: clamp(4rem, 9vw, 8rem); } .showcase-bg { position: absolute; inset: -18% 0; z-index: -2; } .showcase-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .showcase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(15, 25, 38, .96) 24%, rgba(21, 34, 50, .78) 100%); } .showcase h2 { color: var(--paper); max-width: 16ch; font-style: italic; } .showcase .kicker { color: var(--steel-lt); } .showcase p { color: rgba(251, 250, 248, .68); max-width: 50ch; } .showcase .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } .showcase .btn-primary:hover { background: var(--steel-lt); border-color: var(--steel-lt); color: var(--ink); } .showcase .btn-ghost { border-color: rgba(251, 250, 248, .45); color: var(--paper); } .showcase .btn-ghost:hover { background: var(--paper); color: var(--ink); } .showcase-stats { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 5rem); margin-top: 3.5rem; padding-top: 2.2rem; border-top: 1px solid rgba(251, 250, 248, .18); } .showcase-stats dt { font-family: var(--serif); font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); color: var(--paper); line-height: 1; } .showcase-stats dd { margin: .6rem 0 0; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(251, 250, 248, .5); } /* ----------------------------------------------------------------- cards */ .grid.cards { display: grid; gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .card { display: flex; flex-direction: column; height: 100%; } /* Homepage feature row: three large editions, as in the export. */ .grid.cards.feature { grid-template-columns: 1fr; } @media (min-width: 700px) { .grid.cards.feature { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); } } .grid.cards.feature .card-media { aspect-ratio: 3 / 4; padding: clamp(.9rem, 1.8vw, 1.5rem); } .grid.cards.feature .card-body h3 { font-size: 1.5rem; } .card-media { display: grid; place-items: center; overflow: hidden; /* build.py trims the transparent padding baked into the source PNGs, which leaves the mockups roughly 3:4 portrait — so a portrait tile now fits them tightly instead of stranding them. Padding is deliberately small: the tile is a frame around the cover, not a mount. */ aspect-ratio: 3 / 4; background: var(--paper-alt); border: var(--rule); padding: clamp(.6rem, 1.2vw, 1rem); transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .card-media:hover { transform: translateY(-8px); } .card-media picture { display: contents; } /* Our covers are 3D mockups on a light ground, not flat 2:3 artwork, so they are contained inside the tile rather than cropped to fill it. */ /* Fill the padded box and letterbox inside it. Without width/height the img sits at its intrinsic size, which `sizes` pins to the slot width — that is what left the covers at two-thirds scale. min-height/min-width 0 is required: a grid item defaults to min-height:auto, which lets a replaced element push past its track, and overflow:hidden then crops the artwork (it clipped the foot off the taller flat covers). */ .card-media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; } .card-body { padding-top: 1.1rem; display: flex; flex-direction: column; flex: 1; } .card-body h3 { font-size: 1.15rem; margin: 0 0 .3rem; } .card-body h3 a { color: var(--ink); text-decoration: none; } .card-body h3 a:hover { color: var(--steel); } .byline { font-size: .88rem; font-style: italic; color: var(--ink-soft); margin: 0 0 .7rem; } .byline.big { font-size: 1.15rem; margin-bottom: 1.6rem; } .price { font-size: .95rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .muted { color: var(--ink-soft); } .card-buy { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .5rem; } /* ----------------------------------------------------------------- chips */ .chips { display: flex; flex-wrap: wrap; gap: 0; border-top: var(--rule); } .chip { display: inline-flex; align-items: baseline; gap: .6rem; padding: .9rem 1.5rem .9rem 0; margin-right: 1.5rem; text-decoration: none; color: var(--ink); font-size: .95rem; border-bottom: var(--rule); flex: 1 1 auto; min-width: 190px; transition: color .18s ease; } .chip span { color: var(--ink-soft); font-size: .72rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; margin-left: auto; } .chip:hover { color: var(--steel); } /* ----------------------------------------------------------- split lists */ .split { display: grid; gap: 3rem; align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 8vw, 7rem); } } .offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .offer-list li { padding: 1.4rem 0; border-top: var(--rule); } .offer-list li:last-child { border-bottom: var(--rule); } .offer-list h3 { margin: 0 0 .35rem; font-family: var(--sans); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); } .offer-list p { margin: 0; color: var(--ink-soft); font-size: .95rem; } .wide-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); } .team { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } @media (min-width: 820px) { .team { grid-template-columns: 1fr 1fr; gap: 0 clamp(3rem, 7vw, 6rem); } } .team li { border-top: var(--rule-ink); padding: 1.8rem 0; } .team h3 { font-size: 1.6rem; margin-bottom: .6rem; } .team p { color: var(--ink-soft); margin: 0; } .plain { list-style: none; margin: 0; padding: 0; } .plain li { margin-bottom: .6rem; } /* --------------------------------------------------- author spotlight */ .spotlight { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } /* The portraits are only 151px square, so the image column is narrower than the text column — a 1:1 split would leave them adrift in white space. */ @media (min-width: 900px) { /* 23rem leaves exactly enough inside the plate's padding for two 132px circles side by side; narrower and they wrap into a tall single column. */ .spotlight { grid-template-columns: minmax(0, 23rem) 1fr; } /* Stop the quote running to a 1000px measure on a wide screen. */ .spotlight > *:not(.spotlight-figure) { max-width: 46rem; } } .spotlight-figure { margin: 0; } /* Founders plate: two circular portraits on the tinted ground used by the book tiles, so it reads as part of the same family. */ .founders { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: start; background: var(--paper-alt); border: var(--rule); padding: clamp(1.5rem, 3vw, 2rem) 1.5rem; } .founder { margin: 0; text-align: center; max-width: 132px; } .founder picture { display: block; } .founder img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; background: var(--paper); /* A hairline ring keeps the cut-out from dissolving into the tinted ground. */ box-shadow: 0 0 0 1px var(--line); } .founder figcaption { margin-top: .9rem; } .founder b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.05rem; line-height: 1.15; color: var(--ink); } .founder span { display: block; margin-top: .3rem; white-space: nowrap; font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); } @media (max-width: 380px) { .founder, .founder img { width: 112px; max-width: 112px; } .founder img { height: 112px; } } .spotlight blockquote { margin: 0 0 2rem; padding-left: 2rem; border-left: 2px solid var(--steel); font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-style: italic; line-height: 1.3; color: var(--ink); } .spotlight h2 { margin-bottom: 1.6rem; } /* --------------------------------------------------------------- filters */ .filters { display: flex; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); padding-bottom: 1.5rem; border-bottom: var(--rule-ink); } .field { display: flex; flex-direction: column; gap: .5rem; } .field label { font-size: .66rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .18em; } .field input, .field select { font: 400 .95rem/1 var(--sans); padding: .7rem .2rem; border: 0; border-bottom: var(--rule-ink); border-radius: 0; background: transparent; color: var(--ink); min-width: 190px; height: 40px; } .field input::placeholder { color: var(--ink-soft); } .count { margin: 0 0 .2rem auto; font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); } .empty { text-align: center; padding: 4rem 0; color: var(--ink-soft); } .linkish { background: none; border: 0; color: var(--steel); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; } /* ---------------------------------------------------------------- detail */ .crumbs { padding: 1.1rem 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); border-bottom: var(--rule); } .crumbs a { text-decoration: none; color: var(--ink-soft); } .crumbs a:hover { color: var(--steel); } .crumbs span { margin: 0 .6rem; } .crumbs em { font-style: normal; color: var(--ink); } .detail-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } @media (min-width: 900px) { .detail-grid { grid-template-columns: 5fr 7fr; } } .detail-cover { background: var(--paper-alt); border: var(--rule); padding: clamp(1rem, 2.2vw, 1.75rem); display: grid; place-items: center; aspect-ratio: 3 / 4; } @media (min-width: 900px) { .detail-cover { position: sticky; top: calc(80px + 2rem); } } .detail-cover img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; } .detail-info h1 { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4rem); margin-bottom: .4rem; } .detail-price { font-family: var(--serif); font-size: 2.2rem; color: var(--ink); margin: 0 0 .4rem; font-variant-numeric: tabular-nums; } .detail-price.muted { font-size: 1.3rem; font-style: italic; } .buy-note { font-size: .82rem; color: var(--ink-soft); margin: 1rem 0 0; } .meta { display: grid; margin: 2.5rem 0 1.5rem; padding: 0; border-top: var(--rule-ink); } .meta > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: var(--rule); font-size: .92rem; } .meta dt { margin: 0; color: var(--ink-soft); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; } .meta dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } .meta.stack > div { grid-template-columns: 110px minmax(0, 1fr); } @media (max-width: 520px) { .meta > div, .meta.stack > div { grid-template-columns: 1fr; gap: .2rem; } } .tags { display: flex; flex-wrap: wrap; gap: .5rem; } .tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; border: var(--rule); padding: .45rem .9rem; text-decoration: none; color: var(--ink-soft); transition: border-color .18s ease, color .18s ease; } .tag:hover { border-color: var(--steel); color: var(--steel); } .detail .prose { margin-top: clamp(3rem, 6vw, 5rem); } /* -------------------------------------------------------------- packages */ .pkgs { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; } .pkg { border: var(--rule-ink); margin-left: -1px; padding: clamp(2rem, 3vw, 2.8rem); position: relative; display: flex; flex-direction: column; background: transparent; } .pkg-featured { background: var(--paper-alt); } .badge { position: absolute; top: 0; right: 0; background: var(--steel); color: var(--paper); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: .4rem .9rem; } .pkg h3 { font-family: var(--sans); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); margin-bottom: .8rem; } .pkg-price { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); color: var(--ink); margin: 0 0 1.8rem; line-height: 1; } .ticks { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0; flex: 1; } .ticks li { font-size: .9rem; color: var(--ink-soft); padding: .6rem 0; border-top: var(--rule); } .pkg .btn { align-self: start; } /* ------------------------------------------------------------------- faq */ .faq-sec { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .faq-sec h2 { font-size: 1.5rem; font-style: italic; padding-bottom: 1rem; margin-bottom: 0; border-bottom: var(--rule-ink); } details { border-bottom: var(--rule); } summary { cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; font-weight: 500; color: var(--ink); list-style: none; position: relative; font-size: 1rem; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; position: absolute; right: .2rem; top: 1rem; font-size: 1.2rem; color: var(--steel); line-height: 1; } details[open] summary::after { content: "\2212"; } details > div { padding: 0 2.5rem 1.4rem 0; } details p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; } /* --------------------------------------------------------------- contact */ .contact-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 3fr 2fr; } } .contact-card { background: var(--paper-alt); border: var(--rule-ink); padding: clamp(1.75rem, 3vw, 2.5rem); } .contact-card h2 { font-size: 1.3rem; margin-top: 0; font-style: italic; } .contact-card .meta { border-top: 0; margin: 0; } .contact-card .meta > div:first-child { border-top: 0; } /* ---------------------------------------------------------------- footer */ .site-foot { background: var(--navy); color: rgba(251, 250, 248, .66); margin-top: 0; padding-top: clamp(3rem, 6vw, 5rem); font-size: .92rem; } .foot-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .foot-brand { max-width: 300px; } .foot-brand img { width: 190px; margin-bottom: 1.2rem; } .foot-brand p { color: rgba(251, 250, 248, .5); font-style: italic; } .site-foot h3 { color: var(--paper); font-family: var(--sans); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; margin-bottom: 1.1rem; } .site-foot a { color: rgba(251, 250, 248, .66); text-decoration: none; } .site-foot a:hover { color: var(--paper); } .foot-legal { border-top: 1px solid rgba(251, 250, 248, .14); margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.6rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .foot-legal p { margin: 0; color: rgba(251, 250, 248, .4); font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; } /* ============================================================== basket ==== */ .basket-btn { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: var(--rule-ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .18s ease, color .18s ease; } .basket-btn:hover { background: var(--ink); color: var(--paper); } .basket-count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--steel); color: var(--paper); font: 600 10px/18px var(--sans); text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 980px) { .basket-btn { margin-left: auto; } } @media (max-width: 480px) { .basket-btn { width: 38px; height: 38px; } } .basket[hidden] { display: none; } .basket { position: fixed; inset: 0; z-index: 90; } .basket-backdrop { position: absolute; inset: 0; background: rgba(21, 34, 50, .55); opacity: 0; transition: opacity .24s ease; } .basket.is-open .basket-backdrop { opacity: 1; } .basket-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 430px); background: var(--paper); border-left: var(--rule-ink); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.22, .61, .36, 1); } .basket.is-open .basket-panel { transform: none; } @media (prefers-reduced-motion: reduce) { .basket-panel, .basket-backdrop { transition: none; } } body.basket-open { overflow: hidden; } .basket-head { display: flex; align-items: center; gap: .9rem; padding: 1.4rem; border-bottom: var(--rule-ink); } .basket-head h2 { margin: 0; font-size: 1.4rem; font-style: italic; } /* Push the close button to the far right; the empty control sits beside the title rather than at the foot of the drawer. */ .basket-head .basket-close { margin-left: auto; } .basket-close { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 .2rem; } .basket-close:hover { color: var(--ink); } .basket-lines { list-style: none; margin: 0; padding: 0 1.4rem; overflow-y: auto; flex: 1; } .basket-empty { color: var(--ink-soft); padding: 2rem 0; text-align: center; font-style: italic; } .basket-line { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: .1rem .9rem; align-items: start; padding: 1.2rem 0; border-bottom: var(--rule); } .basket-line img, .basket-noimg { grid-row: span 2; width: 50px; height: 45px; object-fit: contain; background: var(--paper-alt); border: var(--rule); } .basket-line-main { display: flex; flex-direction: column; min-width: 0; } .basket-line-main a { font-size: .95rem; color: var(--ink); text-decoration: none; } .basket-line-main a:hover { color: var(--steel); } .basket-author { font-size: .8rem; font-style: italic; color: var(--ink-soft); } .basket-price { font-size: .88rem; margin-top: .3rem; font-variant-numeric: tabular-nums; } .basket-qty { display: flex; align-items: center; border: var(--rule-ink); } .basket-qty button { width: 26px; height: 28px; border: 0; background: none; cursor: pointer; color: var(--ink); font-size: .95rem; line-height: 1; } .basket-qty button:hover:not(:disabled) { background: var(--ink); color: var(--paper); } .basket-qty button:disabled { color: var(--line); cursor: default; } .basket-qty span { min-width: 24px; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; } .basket-remove { grid-column: 3; border: 0; background: none; padding: 0; cursor: pointer; justify-self: end; font: 400 .66rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); text-decoration: underline; } .basket-remove:hover { color: var(--ink); } .basket-foot { border-top: var(--rule-ink); padding: 1.3rem 1.4rem 1.6rem; } .basket-region { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; } .basket-region span { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); } .basket-region select { flex: 1; font: 400 .9rem var(--sans); padding: .5rem .2rem; border: 0; border-bottom: var(--rule-ink); border-radius: 0; background: transparent; } .basket-totals { margin: 0 0 .6rem; display: grid; gap: .45rem; } .basket-totals > div { display: flex; justify-content: space-between; font-size: .9rem; } .basket-totals dt { color: var(--ink-soft); margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; } .basket-totals dd { margin: 0; font-variant-numeric: tabular-nums; } .basket-grand { border-top: var(--rule-ink); padding-top: .7rem; margin-top: .3rem; } .basket-grand dt { color: var(--ink); } .basket-grand dd { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); } .basket-hint:empty, .basket-error:empty { display: none; } .basket-hint { font-size: .78rem; color: var(--steel); margin: 0 0 .8rem; } .basket-error { font-size: .85rem; color: #8c2f26; border: 1px solid #d9b3ac; padding: .7rem .8rem; margin: 0 0 .8rem; } .basket-pay { width: 100%; } .basket-pay:disabled { opacity: .6; cursor: default; } .basket-secure { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); text-align: center; margin: .9rem 0 0; } .add-mini { border: var(--rule-ink); background: transparent; padding: .4rem .9rem; font: 500 .64rem var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .18s ease, color .18s ease; } .add-mini:hover { background: var(--ink); color: var(--paper); } .add-mini.is-added, .add-to-basket.is-added { background: #1c6b4a; border-color: #1c6b4a; color: var(--paper); } /* Empty basket — a quiet control beside the drawer title, deliberately not competing with Checkout. One press empties; the empty state offers an undo. */ .basket-empty-btn[hidden] { display: none; } .basket-empty-btn { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .6rem; border: var(--rule); background: transparent; color: var(--ink-soft); cursor: pointer; font: 500 .64rem var(--sans); text-transform: uppercase; letter-spacing: .14em; transition: border-color .18s ease, color .18s ease, background .18s ease; } .basket-empty-btn:hover { border-color: var(--ink); color: var(--ink); } .basket-empty-btn svg { flex: none; } .basket-empty-btn:active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* On a narrow drawer the icon carries it, rather than pushing close off the row. */ @media (max-width: 420px) { .basket-empty-btn { padding: .4rem .45rem; } .basket-empty-btn span { display: none; } } .basket-undo { border: var(--rule-ink); background: transparent; color: var(--ink); padding: .5rem 1rem; cursor: pointer; font: 500 .66rem var(--sans); text-transform: uppercase; letter-spacing: .14em; transition: background .18s ease, color .18s ease; } .basket-undo:hover { background: var(--ink); color: var(--paper); }