/*
Theme Name: Arisha Notta Portfolio
Theme URI: https://arishanotta.com
Author: Arisha Notta
Author URI: https://arishanotta.com
Description: Warm, minimal, editorial portfolio theme for architecture, research and heritage work. Child theme of Twenty Twenty-Five. All design tokens live in theme.json.
Template: twentytwentyfive
Version: 0.5.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arisha-portfolio
Tags: portfolio, block-patterns, full-site-editing, one-column, custom-colors, custom-logo, editor-style
*/
/*
* Design tokens (colors, fonts, sizes, spacing) are defined in theme.json.
* Never hardcode hex values here - use var(--wp--preset--*) / var(--wp--custom--*).
* Only styling that core block settings cannot express belongs in this file.
*
* Contents
* 1 Parent palette bridge
* 2 Base
* 3 Shared helpers
* 4 Header
* 5 Navigation
* 6 Footer
* 7 Home - hero (retired, see 32)
* 8 Home - section chrome
* 9 Home - selected work
* 10 Home - index
* 11 Home - statement
* 12 Archive - page head
* 13 Archive - filter bar
* 14 Archive - grid and list
* 15 Project - head and facts
* 16 Project - hero
* 17 Project - story and table of contents
* 18 Project - figures, drawings, caption numbering
* 19 Project - lightbox
* 20 Project - previous / next
* 21 (retired - contact rows)
* 22 Buttons
* 23 Research archive
* 24 Research single
* 25 About page
* 26 CV page
* 27 (retired - contact rows)
* 28 404
* 29 Step 3 corrections
* 30 Header (premium)
* 31 Footer (premium)
* 32 Home hero
* 33 Contact form
* 34 Journal
* 35 Footer restructure
* 36 Home - journal
*/
/* =========================================================================
* 1. Parent palette bridge
* =========================================================================
* Our theme.json replaces Twenty Twenty-Five's palette outright, so the ~20
* places where the parent's own styles still reference its slugs (base,
* contrast, accent-1..6) resolve to nothing - post dates, code blocks, comment
* meta and the search/comments-form CSS would render with no color at all.
*
* These aliases map the parent's slugs onto our tokens so inherited styles stay
* legible. They are deliberately NOT palette presets, so the editor still
* offers only our seven colors.
*
* Retire each line as we take ownership of the blocks that use it.
*/
:root {
--wp--preset--color--base: var(--wp--preset--color--cream);
--wp--preset--color--contrast: var(--wp--preset--color--espresso);
--wp--preset--color--accent-1: var(--wp--preset--color--soft-brown);
--wp--preset--color--accent-2: var(--wp--preset--color--taupe);
--wp--preset--color--accent-3: var(--wp--preset--color--beige);
--wp--preset--color--accent-4: var(--wp--preset--color--soft-brown);
--wp--preset--color--accent-5: var(--wp--preset--color--sand);
--wp--preset--color--accent-6: var(--wp--preset--color--beige);
}
/* =========================================================================
* 2. Base
* ========================================================================= */
/*
* Instrument Sans carries a wdth axis (75-100); pin it to the normal width so
* the browser never synthesises a condensed instance.
*/
body {
font-variation-settings: "wdth" 100;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Headings run on Cormorant Garamond, which has no wdth axis. */
h1, h2, h3, h4, h5, h6 {
font-variation-settings: normal;
}
/*
* Paper grain.
*
* THE ONE SANCTIONED EXCEPTION to the no-literal-colour rule (docs/CLAUDE.md).
* The grain is an inline SVG turbulence filter, and an feColorMatrix takes bare
* channel multipliers - there is no way to feed it a CSS custom property, so the
* warm grey is written inline. Nothing else in this file may do that.
*
* Fixed, non-interactive, multiplied over the page at 20%.
*/
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 100;
pointer-events: none;
opacity: 0.2;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* Texture is decoration: drop it when the reader has asked for less, and in print. */
@media (prefers-reduced-transparency: reduce) {
body::after {
display: none;
}
}
@media print {
body::after {
display: none;
}
}
/* Anchor targets clear the sticky header. */
html {
scroll-padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--10));
}
/* Editor-only notices; assets/css/editor.css reveals these inside the editor. */
.arisha-editor-note {
display: none;
}
/* A button block that should read as a plain text link. */
.arisha-plain-link .wp-block-button__link {
background-color: transparent;
color: inherit;
border: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: none;
}
/* Accent is reserved for small details only - see docs/CLAUDE.md. */
:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
/* Rule 9: keep motion subtle and respect the user's OS preference. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================================
* 3. Shared helpers
* ========================================================================= */
/* Understated link: a taupe rule that darkens on hover (mockup .ul-on). */
.arisha-link {
margin: 0;
}
.arisha-link a {
text-decoration: none;
padding-bottom: 3px;
background: linear-gradient(var(--wp--preset--color--taupe), var(--wp--preset--color--taupe)) 0 100% / 100% 1px no-repeat;
transition: background-image 0.3s;
}
.arisha-link a:hover,
.arisha-link a:focus-visible {
background-image: linear-gradient(var(--wp--preset--color--espresso), var(--wp--preset--color--espresso));
}
/* Image wells: sand backing, cover-fitted media, slow settle on hover. */
.arisha-card__media,
.arisha-index__stage {
position: relative;
overflow: hidden;
background-color: var(--wp--preset--color--sand);
}
.arisha-card__media img,
.arisha-index__frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Taxonomy links inherit their container's color rather than the link color. */
.arisha-card__cat a,
.arisha-index__cat a {
color: inherit;
text-decoration: none;
}
/* =========================================================================
* 4. Header
* ========================================================================= */
.arisha-header {
position: sticky;
top: 0;
z-index: 40;
transition: background-color 0.4s, box-shadow 0.4s;
}
/* Solid state is toggled by assets/js/header.js past 10px of scroll. */
.arisha-header.is-solid {
background-color: color-mix(in srgb, var(--wp--preset--color--cream) 92%, transparent);
box-shadow: 0 1px 0 var(--wp--preset--color--beige);
}
/*
* backdrop-filter makes the header a containing block for fixed-position
* descendants, which would clip the full-screen nav overlay to the header box.
* Apply the blur only while the overlay is closed.
*/
.arisha-header.is-solid:not(:has(.wp-block-navigation__responsive-container.is-menu-open)) {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.arisha-header__inner {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
padding-inline: var(--wp--custom--gutter);
min-height: var(--wp--custom--header-height);
gap: var(--wp--preset--spacing--30);
}
.arisha-header__mark {
gap: var(--wp--preset--spacing--20);
align-items: baseline;
}
.arisha-header__label {
margin: 0;
}
/* The studio label is dropped before the nav collapses. */
@media (max-width: 820px) {
.arisha-header__label {
display: none;
}
}
/* =========================================================================
* 5. Navigation
* ========================================================================= */
.arisha-nav .wp-block-navigation__container {
gap: var(--wp--custom--nav-gap);
}
.arisha-nav .wp-block-navigation-item__content {
position: relative;
display: block;
padding-block: var(--wp--preset--spacing--10);
color: var(--wp--preset--color--soft-brown);
text-decoration: none;
transition: color 0.25s;
}
.arisha-nav .wp-block-navigation-item__content:hover,
.arisha-nav .wp-block-navigation-item__content[aria-current] {
color: var(--wp--preset--color--espresso);
}
/* Active item: a small dot centred above the label. */
.arisha-nav .wp-block-navigation-item__content[aria-current]::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--wp--preset--color--espresso);
transform: translateX(-50%);
}
/* Menu / Close are text buttons - core renders them as text when hasIcon is false. */
.arisha-nav .wp-block-navigation__responsive-container-open,
.arisha-nav .wp-block-navigation__responsive-container-close {
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--label);
color: var(--wp--preset--color--espresso);
min-height: 44px;
}
/*
* Core collapses the nav into its overlay at 600px. The mockup collapses at
* 820px, and the breakpoint is not exposed as a block attribute, so the two
* core rules that undo overlay mode are reverted across the 600-820px band.
*/
@media (min-width: 600px) and (max-width: 820px) {
.arisha-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
.arisha-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: block;
}
}
/*
* Full-screen overlay: cream ground, large serif links.
*
* The selector is deliberately long - core ships
* `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)`
* at 0,5,0 forcing a white ground, so this has to outweigh it.
*/
.arisha-header .arisha-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
background-color: var(--wp--preset--color--cream);
padding: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--20)) var(--wp--custom--gutter) var(--wp--preset--spacing--40);
}
/*
* The bar is right-justified, but core reuses that justification for the
* overlay column, which would right-align the stacked links.
*/
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open,
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
--navigation-layout-justification-setting: flex-start;
--navigation-layout-justify: flex-start;
--navigation-layout-align: stretch;
align-items: stretch;
text-align: left;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
width: 100%;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: 0;
width: 100%;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: block;
width: 100%;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: var(--wp--custom--nav-overlay-size);
font-weight: 400;
line-height: 1.15;
color: var(--wp--preset--color--espresso);
padding-block: var(--wp--preset--spacing--20);
border-bottom: 1px solid var(--wp--preset--color--beige);
}
/*
* Park Close exactly where Menu was. Fixed rather than absolute so it is
* measured from the viewport, not from inside the overlay's padding box.
*/
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
position: fixed;
top: calc(var(--wp--custom--header-height) / 2 - 1.375rem);
right: var(--wp--custom--gutter);
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] {
font-style: italic;
}
/* The dot belongs to the desktop bar only. */
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current]::before {
display: none;
}
/* =========================================================================
* 6. Footer
* ========================================================================= */
.arisha-footer {
margin-top: var(--wp--preset--spacing--80);
}
.arisha-footer__inner {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
padding-inline: var(--wp--custom--gutter);
padding-top: var(--wp--preset--spacing--60);
padding-bottom: var(--wp--preset--spacing--40);
}
.arisha-footer p {
margin: 0;
}
.arisha-footer a {
color: var(--wp--preset--color--taupe);
text-decoration: none;
transition: color 0.25s;
}
.arisha-footer a:hover,
.arisha-footer a:focus-visible {
color: var(--wp--preset--color--cream);
}
.arisha-footer__row {
border-top: 1px solid var(--wp--preset--color--soft-brown);
padding-top: var(--wp--preset--spacing--20);
gap: var(--wp--preset--spacing--20);
}
/* =========================================================================
* 8. Home - section chrome
* ========================================================================= */
.arisha-section {
padding-top: var(--wp--custom--section-top);
}
.arisha-sec-top {
align-items: flex-end;
gap: var(--wp--preset--spacing--30);
margin-bottom: var(--wp--custom--section-gap);
}
.arisha-sec-top__heading {
margin: 0;
font-weight: 300;
line-height: 0.9;
}
.arisha-sec-top__heading em {
color: var(--wp--preset--color--soft-brown);
font-style: italic;
}
.arisha-sec-top p {
margin: 0;
}
/* =========================================================================
* 9. Home - selected work
* ========================================================================= */
/*
* A plain two-up grid. The mockup staggered the four cards across twelve
* columns at three different aspect ratios; read as a page it was restless and
* the titles never shared a baseline. Equal columns, one ratio, rows that line
* up - the photographs carry the variety.
*/
.arisha-feat__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
list-style: none;
margin: 0;
padding: 0;
}
.arisha-feat__list > li {
margin: 0;
}
.arisha-card__media {
margin: 0;
aspect-ratio: 4 / 3;
}
.arisha-card__media img {
transition: transform 1.4s var(--wp--custom--ease);
}
.arisha-card:hover .arisha-card__media img {
transform: scale(1.035);
}
.arisha-card__caption {
margin-top: var(--wp--preset--spacing--20);
gap: var(--wp--preset--spacing--20);
}
.arisha-card__title {
margin: 0;
font-weight: 400;
line-height: 1.05;
/* Two lines are reserved whether or not the title needs them, so the
category line sits at the same height right across a row. */
min-height: 2.1em;
}
.arisha-card__title a {
text-decoration: none;
}
.arisha-card:hover .arisha-card__title a {
font-style: italic;
}
.arisha-card__year {
margin: 0;
font-variant-numeric: tabular-nums;
}
.arisha-card__cat {
margin-top: var(--wp--preset--spacing--10);
}
@media (max-width: 760px) {
.arisha-feat__list {
grid-template-columns: 1fr;
}
}
/* =========================================================================
* 10. Home - index
* ========================================================================= */
.arisha-index {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--wp--custom--column-gap);
align-items: stretch;
}
.arisha-index__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--wp--preset--color--espresso);
counter-reset: arisha-index;
}
.arisha-index__list > li {
counter-increment: arisha-index;
margin: 0;
}
.arisha-index__row {
display: grid;
grid-template-columns: 3.2em minmax(0, 1fr) auto;
column-gap: var(--wp--preset--spacing--20);
/* No row gap: the description row exists on every row, open or not, and a
gap would pad out all three closed ones by its own height. */
row-gap: 0;
align-items: baseline;
padding-block: var(--wp--preset--spacing--30);
border-bottom: 1px solid var(--wp--preset--color--beige);
transition: padding-left 0.45s var(--wp--custom--ease), color 0.3s;
}
/*
* Explicit placement: the description is a fourth child, and auto-placement
* would drop it into column 1 of the next row rather than under the title.
*/
.arisha-index__row::before { grid-column: 1; grid-row: 1; }
.arisha-index__title { grid-column: 2; grid-row: 1; }
.arisha-index__meta { grid-column: 3; grid-row: 1; }
.arisha-index__desc { grid-column: 2; grid-row: 2; }
/* Row numbers are a CSS counter, so nothing has to generate them server-side. */
.arisha-index__row::before {
content: counter(arisha-index, decimal-leading-zero);
font-size: var(--wp--preset--font-size--meta);
color: var(--wp--preset--color--soft-brown);
font-variant-numeric: tabular-nums;
}
.arisha-index__title {
margin: 0;
font-weight: 400;
line-height: 1.05;
}
.arisha-index__title a {
text-decoration: none;
}
/*
* One row is open at a time (assets/js/index-preview.js puts is-open on it, and
* on the first row at load). max-height rather than height so the row still
* opens for a two-line description; the value is a ceiling, not a size.
*
* With no script the descriptions stay closed, the same way the preview column
* stays empty - the titles are links and the section still reads as an index.
*/
.arisha-index__desc {
max-width: 52ch;
margin: 0;
line-height: 1.5;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-0.25rem);
transition:
max-height 0.5s var(--wp--custom--ease),
margin-top 0.5s var(--wp--custom--ease),
opacity 0.35s var(--wp--custom--ease),
transform 0.45s var(--wp--custom--ease);
}
.arisha-index__list > li.is-open .arisha-index__desc {
max-height: 6em;
margin-top: var(--wp--preset--spacing--20);
opacity: 1;
transform: none;
}
.arisha-index__meta {
text-align: right;
white-space: nowrap;
}
.arisha-index__meta p,
.arisha-index__meta div {
margin: 0;
}
.arisha-index__list > li:hover .arisha-index__row,
.arisha-index__list > li:focus-within .arisha-index__row {
padding-left: var(--wp--preset--spacing--20);
}
.arisha-index__list > li:hover .arisha-index__title a,
.arisha-index__list > li:focus-within .arisha-index__title a {
font-style: italic;
}
/*
* soft-brown, not taupe. Dimming used to be a hover state that nobody sat in;
* now that one row is open from the start the other three are dim on arrival,
* and taupe on cream is 2.4:1 - a persistent contrast failure. soft-brown
* reads as clearly recessive at 5.7:1.
*/
.arisha-index__list > li.is-dim .arisha-index__row,
.arisha-index__list > li.is-dim a {
color: var(--wp--preset--color--soft-brown);
}
/*
* The stage takes its height from the list rather than from an aspect ratio.
* A ratio scales with the column's width and the list with its row count, so
* the two agree at exactly one viewport and the image ran well past the foot
* of the list everywhere else. The viewport cap keeps a long index from
* stretching the photograph down the page - past it the column starts to
* behave like the sticky panel it was.
*/
.arisha-index__preview {
position: sticky;
top: var(--wp--custom--sticky-offset);
height: min(100%, 76vh);
}
.arisha-index__stage {
height: 100%;
}
/* Thumbs ship inside each row and are moved into the stage by JS. */
.arisha-index__thumb {
display: none;
}
.arisha-index__stage .arisha-index__thumb {
display: block;
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s var(--wp--custom--ease);
}
.arisha-index__stage .arisha-index__thumb.is-active {
opacity: 1;
}
.arisha-index__frame figure {
margin: 0;
height: 100%;
}
@media (max-width: 900px) {
.arisha-index {
grid-template-columns: 1fr;
}
.arisha-index__preview {
display: none;
}
.arisha-index__meta .arisha-index__cat {
display: none;
}
}
/* =========================================================================
* 11. Home - statement
* ========================================================================= */
/*
* Portrait left, statement right. The image sits on the opposite side to the
* Index preview above it, so the two sections do not stack the same way twice.
*/
.arisha-statement {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--wp--custom--column-gap);
align-items: center;
border-top: 1px solid var(--wp--preset--color--espresso);
padding-top: var(--wp--preset--spacing--40);
}
.arisha-statement__media {
position: relative;
overflow: hidden;
margin: 0;
aspect-ratio: 4 / 5;
background-color: var(--wp--preset--color--sand);
}
.arisha-statement__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.arisha-statement__body > * {
margin-block: 0;
}
.arisha-statement__label {
margin: 0 0 var(--wp--preset--spacing--20);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.arisha-statement__big {
margin: 0;
max-width: 24ch;
font-weight: 300;
line-height: 1.12;
letter-spacing: -0.012em;
}
.arisha-statement__big em {
color: var(--wp--preset--color--soft-brown);
font-style: italic;
}
/* Buttons, not plain links: this is the one place on the page that asks the
reader to go somewhere, so it should look like it. */
.arisha-statement__actions {
gap: var(--wp--preset--spacing--20);
margin-top: var(--wp--preset--spacing--40);
}
.arisha-statement__actions .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3rem;
}
@media (max-width: 860px) {
.arisha-statement {
grid-template-columns: 1fr;
align-items: start;
}
/* Statement first, portrait under it - the words are what the section is. */
.arisha-statement__media {
order: 2;
aspect-ratio: 3 / 2;
}
}
/* =========================================================================
* 12. Archive - page head
* ========================================================================= */
/*
* Title and standfirst share one line: the title left, the standfirst in the
* right column, their bottoms aligned. Stacked, the title left a wide empty
* band to its right on every page but the home page.
*
* A proportional split rather than `auto`, so a two-word title and a long
* category name both leave the standfirst the same measure.
*/
.arisha-pagehead {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: end;
column-gap: var(--wp--custom--column-gap);
padding-top: var(--wp--custom--page-head-top);
padding-bottom: var(--wp--preset--spacing--40);
}
/*
* Title and count are one text run, not a flex row. As a row the h1 fills the
* column, so the moment a long category name wrapped to two lines the count
* was flung to the far right on its own. Inline, it follows the last word.
*/
.arisha-pagehead .arisha-pagehead__line {
display: block;
}
.arisha-pagehead__line .arisha-pagehead__title {
display: inline;
}
.arisha-pagehead__title {
margin: 0;
font-weight: 300;
line-height: 0.82;
letter-spacing: -0.035em;
}
/* The count rides as a superscript beside the title. */
.arisha-pagehead__count {
display: inline;
margin: 0 0 0 0.2em;
padding: 0;
/* top, not super: super is measured against the count's own 14px and would
barely lift it off the baseline of a 150px title. */
vertical-align: top;
font-variant-numeric: tabular-nums;
}
.arisha-pagehead__intro {
max-width: 44ch;
/* The title's 0.82 leading puts its box edge close to the baseline; this
drops the standfirst's last line onto roughly the same line. */
margin: 0 0 0.35em;
font-weight: 300;
line-height: 1.4;
}
@media (max-width: 900px) {
.arisha-pagehead {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.arisha-pagehead__intro {
margin: var(--wp--preset--spacing--30) 0 0;
}
}
/* =========================================================================
* 13. Archive - filter bar
* ========================================================================= */
.arisha-bar {
border-top: 1px solid var(--wp--preset--color--espresso);
border-bottom: 1px solid var(--wp--preset--color--beige);
margin-bottom: var(--wp--custom--section-gap);
gap: var(--wp--preset--spacing--20);
align-items: center;
}
.arisha-chips {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--wp--preset--spacing--30);
}
/* The All chip is a paragraph, the rest are list items; style them alike. */
.arisha-chips__all {
margin: 0;
}
.arisha-chips__all a,
.arisha-chips__list a {
display: inline-flex;
align-items: baseline;
gap: 3px;
min-height: 52px;
line-height: 52px;
color: var(--wp--preset--color--soft-brown);
text-decoration: none;
transition: color 0.25s;
}
.arisha-chips__all a:hover,
.arisha-chips__all a:focus-visible,
.arisha-chips__all a[aria-current] {
color: var(--wp--preset--color--espresso);
}
.arisha-chips__all a[aria-current] .arisha-chip__label {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-style: italic;
font-size: var(--wp--custom--chip-active-size);
}
.arisha-chips__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0 var(--wp--preset--spacing--30);
}
.arisha-chips__list a {
display: inline-flex;
align-items: baseline;
gap: 3px;
min-height: 52px;
line-height: 52px;
color: var(--wp--preset--color--soft-brown);
text-decoration: none;
transition: color 0.25s;
}
.arisha-chips__list a:hover,
.arisha-chips__list a:focus-visible,
.arisha-chips__list a[aria-current] {
color: var(--wp--preset--color--espresso);
}
/* The selected category switches to italic serif, as in the mockup. */
.arisha-chips__list a[aria-current] .arisha-chip__label {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-style: italic;
font-size: var(--wp--custom--chip-active-size);
}
.arisha-chip__count {
font-size: var(--wp--custom--chip-count-size);
}
/* The toggle is injected by script, so it never shows as a dead control. */
.arisha-views {
display: none;
gap: var(--wp--preset--spacing--30);
}
.arisha-archive.is-enhanced .arisha-views {
display: flex;
}
.arisha-views__button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
min-height: 52px;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--label);
color: var(--wp--preset--color--soft-brown);
transition: color 0.25s;
}
.arisha-views__button[aria-pressed="true"] {
color: var(--wp--preset--color--espresso);
}
.arisha-archive__empty {
padding-block: var(--wp--preset--spacing--40);
}
/* =========================================================================
* 14. Archive - grid and list
* ========================================================================= */
.arisha-grid__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
list-style: none;
margin: 0;
padding: 0;
}
.arisha-grid__list > li {
margin: 0;
}
/*
* No column offset. Dropping every second card by a few rems read as an
* accident rather than a composition, and it put the first card's caption
* level with the second card's image.
*/
@media (max-width: 1024px) {
.arisha-grid__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.arisha-grid__list {
grid-template-columns: 1fr;
}
}
/*
* List view reuses the card markup rather than shipping a second copy of every
* title: the image is dropped and the caption is promoted into the row grid
* with display: contents.
*/
.arisha-archive.is-list .arisha-grid__list {
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--wp--preset--color--espresso);
counter-reset: arisha-row;
}
.arisha-archive.is-list .arisha-grid__list > li {
counter-increment: arisha-row;
margin-top: 0 !important;
}
.arisha-archive.is-list .arisha-card {
display: grid;
grid-template-columns: 3.2em minmax(0, 1fr) auto;
gap: 0 var(--wp--preset--spacing--20);
align-items: baseline;
padding-block: var(--wp--preset--spacing--20);
border-bottom: 1px solid var(--wp--preset--color--beige);
transition: padding-left 0.45s var(--wp--custom--ease);
}
.arisha-archive.is-list .arisha-card::before {
content: counter(arisha-row, decimal-leading-zero);
grid-column: 1;
grid-row: 1;
font-size: var(--wp--preset--font-size--meta);
color: var(--wp--preset--color--soft-brown);
font-variant-numeric: tabular-nums;
}
.arisha-archive.is-list .arisha-card__media {
display: none;
}
.arisha-archive.is-list .arisha-card__caption {
display: contents;
}
.arisha-archive.is-list .arisha-card__title {
grid-column: 2;
grid-row: 1;
font-size: var(--wp--preset--font-size--xx-large);
}
.arisha-archive.is-list .arisha-card__year {
grid-column: 3;
grid-row: 1;
text-align: right;
white-space: nowrap;
}
.arisha-archive.is-list .arisha-card__cat {
grid-column: 3;
grid-row: 2;
margin-top: 0;
text-align: right;
font-size: var(--wp--preset--font-size--meta);
}
.arisha-archive.is-list .arisha-card:hover,
.arisha-archive.is-list .arisha-card:focus-within {
padding-left: var(--wp--preset--spacing--20);
}
.arisha-archive.is-list .arisha-card:hover .arisha-card__title a {
font-style: italic;
}
@media (max-width: 620px) {
.arisha-archive.is-list .arisha-card__cat {
display: none;
}
}
/* =========================================================================
* 15. Project - head and facts
* ========================================================================= */
.arisha-project__head {
padding-top: var(--wp--custom--page-head-top);
padding-bottom: var(--wp--preset--spacing--40);
}
.arisha-crumb {
gap: 0;
margin-bottom: var(--wp--preset--spacing--30);
}
.arisha-crumb p,
.arisha-crumb div {
margin: 0;
}
.arisha-crumb__term::before {
content: " / ";
}
.arisha-crumb a {
color: inherit;
text-decoration: none;
transition: color 0.25s;
}
.arisha-crumb a:hover {
color: var(--wp--preset--color--espresso);
}
.arisha-phead {
gap: var(--wp--custom--column-gap);
margin-bottom: var(--wp--preset--spacing--40);
}
.arisha-phead__title {
margin: 0;
font-weight: 300;
line-height: 0.88;
letter-spacing: -0.03em;
}
.arisha-phead__lede {
margin: 0;
font-weight: 300;
line-height: 1.4;
}
.arisha-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--wp--preset--color--espresso);
border-bottom: 1px solid var(--wp--preset--color--beige);
}
.arisha-facts__cell {
padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 0;
}
.arisha-facts__cell + .arisha-facts__cell {
padding-left: var(--wp--preset--spacing--30);
border-left: 1px solid var(--wp--preset--color--beige);
}
.arisha-facts__label {
margin: 0 0 0.35em;
}
.arisha-facts__value {
margin: 0;
font-size: var(--wp--custom--fact-size);
line-height: 1.25;
}
@media (max-width: 820px) {
.arisha-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.arisha-facts__cell:nth-child(3) {
padding-left: 0;
border-left: 0;
}
.arisha-facts__cell:nth-child(n+3) {
border-top: 1px solid var(--wp--preset--color--beige);
}
}
/* =========================================================================
* 16. Project - hero
* ========================================================================= */
.arisha-project__hero {
margin-top: var(--wp--preset--spacing--40);
}
.arisha-project__heromedia {
margin: 0;
overflow: hidden;
background-color: var(--wp--preset--color--sand);
aspect-ratio: 16 / 8.5;
}
.arisha-project__heromedia img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 760px) {
.arisha-project__heromedia {
aspect-ratio: 4 / 3;
}
}
/* =========================================================================
* 17. Project - story and table of contents
* ========================================================================= */
.arisha-story {
display: grid;
grid-template-columns: minmax(180px, 2.4fr) minmax(0, 9.6fr);
gap: var(--wp--custom--column-gap);
margin-top: var(--wp--custom--story-top);
align-items: start;
}
.arisha-toc {
position: sticky;
top: var(--wp--custom--toc-offset);
align-self: start;
}
.arisha-toc__label {
margin: 0 0 var(--wp--preset--spacing--10);
}
.arisha-toc__items {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--wp--preset--color--beige);
}
.arisha-toc__items a {
display: flex;
gap: var(--wp--preset--spacing--20);
padding-block: var(--wp--preset--spacing--10);
border-bottom: 1px solid var(--wp--preset--color--beige);
font-size: var(--wp--preset--font-size--label);
/* taupe is 2.4:1 on cream - fine over espresso in the footer, a contrast
failure here. soft-brown stays recessive against the current chapter at
5.7:1. */
color: var(--wp--preset--color--soft-brown);
text-decoration: none;
transition: color 0.3s, padding-left 0.4s var(--wp--custom--ease);
}
.arisha-toc__items a:hover,
.arisha-toc__items a:focus-visible {
color: var(--wp--preset--color--espresso);
}
.arisha-toc__items a.is-current {
color: var(--wp--preset--color--espresso);
padding-left: var(--wp--preset--spacing--10);
}
.arisha-toc__n {
flex: none;
font-variant-numeric: tabular-nums;
font-size: var(--wp--preset--font-size--meta);
padding-top: 2px;
}
@media (max-width: 900px) {
.arisha-story {
grid-template-columns: 1fr;
}
.arisha-toc {
display: none;
}
}
/* Chapter numbering comes from a counter, so renaming an H2 needs no code. */
.arisha-story__body .wp-block-post-content {
counter-reset: arisha-chapter arisha-fig;
}
.arisha-story__body .wp-block-post-content > h2 {
counter-increment: arisha-chapter;
display: flex;
align-items: baseline;
gap: var(--wp--preset--spacing--20);
font-size: var(--wp--preset--font-size--chapter);
font-weight: 300;
margin: var(--wp--custom--chapter-gap) 0 var(--wp--preset--spacing--30);
scroll-margin-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--30));
}
.arisha-story__body .wp-block-post-content > h2:first-child {
margin-top: 0;
}
.arisha-story__body .wp-block-post-content > h2::before {
content: counter(arisha-chapter, decimal-leading-zero);
flex: none;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--meta);
font-weight: 400;
letter-spacing: 0;
color: var(--wp--preset--color--soft-brown);
font-variant-numeric: tabular-nums;
}
.arisha-story__body .wp-block-post-content > h2:focus {
outline: none;
}
.arisha-story__body .wp-block-post-content > p {
max-width: 60ch;
}
/* =========================================================================
* 18. Project - figures, drawings, caption numbering
* ========================================================================= */
.arisha-story__body figure.wp-block-image {
counter-increment: arisha-fig;
margin-block: var(--wp--preset--spacing--40);
}
.arisha-story__body figure.wp-block-image img {
display: block;
width: 100%;
height: auto;
background-color: var(--wp--preset--color--sand);
}
.arisha-story__body figure.wp-block-image.is-zoomable img {
cursor: zoom-in;
}
/* Caption left, figure number right. */
.arisha-story__body figure.wp-block-image > figcaption {
display: flex;
justify-content: space-between;
gap: var(--wp--preset--spacing--30);
margin-top: var(--wp--preset--spacing--10);
text-align: left;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--soft-brown);
}
.arisha-story__body figure.wp-block-image > figcaption::after {
content: counter(arisha-fig, decimal-leading-zero);
flex: none;
font-variant-numeric: tabular-nums;
}
/* "Drawing" image style: paper ground, hairline border, contained not cropped. */
.arisha-story__body figure.is-style-drawing img {
background-color: var(--wp--preset--color--cream);
border: 1px solid var(--wp--preset--color--beige);
object-fit: contain;
}
.arisha-figure-bleed img {
aspect-ratio: 21 / 9;
object-fit: cover;
}
@media (max-width: 760px) {
.arisha-figure-bleed img {
aspect-ratio: 4 / 3;
}
}
.arisha-figstack {
display: grid;
gap: var(--wp--preset--spacing--40);
}
.arisha-figstack > * {
margin: 0;
}
/* =========================================================================
* 19. Project - lightbox
* ========================================================================= */
.arisha-lightbox {
position: fixed;
inset: 0;
/* Above the paper grain (z-index 100) so an enlarged drawing stays crisp. */
z-index: 120;
display: grid;
grid-template-rows: auto 1fr auto;
background-color: color-mix(in srgb, var(--wp--preset--color--cream) 98%, transparent);
padding: var(--wp--preset--spacing--20) var(--wp--custom--gutter) var(--wp--preset--spacing--30);
}
.arisha-lightbox[hidden] {
display: none;
}
.arisha-lightbox__top {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 64px;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--soft-brown);
font-variant-numeric: tabular-nums;
}
.arisha-lightbox__close {
background: none;
border: 0;
padding: 0;
cursor: pointer;
min-height: 44px;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--label);
color: var(--wp--preset--color--espresso);
}
.arisha-lightbox__stage {
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.arisha-lightbox__stage img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.arisha-lightbox__bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--30);
padding-top: var(--wp--preset--spacing--20);
}
.arisha-lightbox__caption {
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-style: italic;
font-size: var(--wp--custom--fact-size);
color: var(--wp--preset--color--espresso);
}
.arisha-lightbox__buttons {
display: flex;
gap: var(--wp--preset--spacing--10);
flex: none;
}
.arisha-lightbox__prev,
.arisha-lightbox__next {
width: 48px;
height: 48px;
display: grid;
place-items: center;
background: none;
border: 1px solid var(--wp--preset--color--beige);
border-radius: 50%;
cursor: pointer;
color: var(--wp--preset--color--espresso);
transition: border-color 0.25s;
}
.arisha-lightbox__prev:hover,
.arisha-lightbox__next:hover {
border-color: var(--wp--preset--color--espresso);
}
/* =========================================================================
* 20. Project - previous / next
* ========================================================================= */
.arisha-project__nav {
margin-top: var(--wp--preset--spacing--70);
}
.arisha-projectnav__inner {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--wp--preset--color--espresso);
}
.arisha-projectnav__link {
display: grid;
grid-template-columns: var(--wp--custom--thumb-size) 1fr;
gap: var(--wp--preset--spacing--30);
align-items: center;
padding-block: var(--wp--preset--spacing--40);
text-decoration: none;
color: inherit;
}
.arisha-projectnav__link.is-next {
grid-template-columns: 1fr var(--wp--custom--thumb-size);
border-left: 1px solid var(--wp--preset--color--beige);
padding-left: var(--wp--preset--spacing--40);
text-align: right;
}
.arisha-projectnav__link.is-next .arisha-projectnav__media {
order: 2;
}
.arisha-projectnav__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
background-color: var(--wp--preset--color--sand);
}
.arisha-projectnav__label {
display: block;
margin-bottom: 0.4em;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--soft-brown);
}
.arisha-projectnav__title {
display: block;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: var(--wp--preset--font-size--x-large);
line-height: 1.1;
}
.arisha-projectnav__link:hover .arisha-projectnav__title {
font-style: italic;
}
@media (max-width: 640px) {
.arisha-projectnav__inner {
grid-template-columns: 1fr;
}
.arisha-projectnav__link.is-next {
border-left: 0;
border-top: 1px solid var(--wp--preset--color--beige);
padding-left: 0;
}
}
/* =========================================================================
* 22. Buttons
* =========================================================================
* theme.json carries the colours and type; the shape lives here. The plain-link
* variant is excluded so the footer email stays a bare link.
*/
.wp-block-button:not(.arisha-plain-link) > .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 48px;
line-height: 1.2;
text-decoration: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--espresso);
border: 1px solid var(--wp--preset--color--espresso);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
background-color: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--cream);
}
/*
* Download arrow. Drawn as a mask, not a background image, so the glyph takes
* currentColor and inverts with the button - a mask only reads alpha, so the
* stroke colour inside the SVG is never painted.
*/
.arisha-btn-download .wp-block-button__link::before {
content: "";
flex: none;
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* =========================================================================
* 23. Research archive
* ========================================================================= */
.arisha-research__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--wp--preset--color--espresso);
}
.arisha-research__list > li {
margin: 0;
}
.arisha-research__item {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--wp--custom--column-gap);
padding-block: var(--wp--preset--spacing--50);
border-bottom: 1px solid var(--wp--preset--color--beige);
}
.arisha-research__media {
margin: 0;
overflow: hidden;
background-color: var(--wp--preset--color--sand);
aspect-ratio: 4 / 5;
}
.arisha-research__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--wp--custom--ease);
}
.arisha-research__item:hover .arisha-research__media img {
transform: scale(1.035);
}
.arisha-research__top {
gap: var(--wp--preset--spacing--20);
margin-bottom: var(--wp--preset--spacing--40);
}
.arisha-research__top p,
.arisha-research__top div {
margin: 0;
}
/* The question carries the row; the title is the real heading beneath it. */
.arisha-research__question {
max-width: 24ch;
margin: 0 0 var(--wp--preset--spacing--40);
font-weight: 300;
font-style: italic;
line-height: 1.1;
letter-spacing: -0.015em;
}
.arisha-research__title {
margin: 0 0 0.7em;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.01em;
}
.arisha-research__title a {
text-decoration: none;
}
.arisha-research__title a:hover {
color: var(--wp--preset--color--soft-brown);
}
.arisha-research__abstract {
max-width: 58ch;
margin: 0;
}
.arisha-research__foot {
gap: var(--wp--preset--spacing--20);
margin-top: var(--wp--preset--spacing--40);
align-items: center;
}
/* core/read-more dressed as the outline button. */
.arisha-research__read {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding-inline: 1.625rem;
border: 1px solid var(--wp--preset--color--espresso);
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--label);
color: var(--wp--preset--color--espresso);
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.arisha-research__read:hover,
.arisha-research__read:focus-visible {
background-color: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--cream);
}
.arisha-research__credit {
margin-left: auto;
gap: 0;
}
.arisha-research__credit p {
margin: 0;
}
.arisha-research__credit .arisha-research__professor::before {
content: ", ";
}
@media (max-width: 820px) {
.arisha-research__item {
grid-template-columns: 1fr;
}
.arisha-research__media {
aspect-ratio: 16 / 10;
}
.arisha-research__credit {
margin-left: 0;
width: 100%;
}
}
/* =========================================================================
* 24. Research single
* ========================================================================= */
.arisha-researchsingle__question {
max-width: 24ch;
margin: 0 0 var(--wp--preset--spacing--20);
font-weight: 300;
font-style: italic;
line-height: 1.1;
letter-spacing: -0.015em;
}
.arisha-researchsingle__title {
margin: 0;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.01em;
}
.arisha-researchsingle__pdf {
justify-content: flex-start;
}
@media (min-width: 821px) {
.arisha-researchsingle__pdf {
justify-content: flex-end;
}
}
/* =========================================================================
* 25. About page
* ========================================================================= */
.arisha-about {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--wp--custom--column-gap);
align-items: start;
padding-top: var(--wp--preset--spacing--40);
}
.arisha-about__media {
margin: 0;
overflow: hidden;
background-color: var(--wp--preset--color--sand);
aspect-ratio: 4 / 5;
}
.arisha-about__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.arisha-about__media figcaption {
margin-top: var(--wp--preset--spacing--10);
}
.arisha-about__lede {
margin: 0 0 var(--wp--preset--spacing--40);
font-weight: 300;
line-height: 1.18;
letter-spacing: -0.01em;
}
.arisha-about__copy {
max-width: 56ch;
}
.arisha-about__facts {
margin-top: var(--wp--preset--spacing--40);
}
.arisha-interests {
margin-top: var(--wp--preset--spacing--50);
border-top: 1px solid var(--wp--preset--color--espresso);
}
.arisha-interests__label {
margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--10);
}
.arisha-interests__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--wp--preset--spacing--40);
}
.arisha-interests__item {
margin: 0;
padding-block: var(--wp--preset--spacing--20);
border-bottom: 1px solid var(--wp--preset--color--beige);
font-weight: 400;
line-height: 1.2;
}
.arisha-about__cv {
margin-top: var(--wp--preset--spacing--40);
}
@media (max-width: 860px) {
.arisha-about {
grid-template-columns: 1fr;
}
.arisha-interests__list {
grid-template-columns: 1fr;
}
}
/* =========================================================================
* 26. CV page
* ========================================================================= */
.arisha-cv {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--wp--custom--column-gap);
padding-top: var(--wp--preset--spacing--40);
align-items: start;
}
.arisha-cv__side {
position: sticky;
top: var(--wp--custom--toc-offset);
align-self: start;
}
.arisha-cv__note {
max-width: 20ch;
margin: 0;
font-weight: 300;
line-height: 1.35;
}
.arisha-cv__buttons {
max-width: 280px;
margin-top: var(--wp--preset--spacing--30);
gap: var(--wp--preset--spacing--10);
}
.arisha-cv__buttons .wp-block-button {
width: 100%;
}
.arisha-cv__buttons .wp-block-button__link {
width: 100%;
}
.arisha-cv__section {
border-top: 1px solid var(--wp--preset--color--espresso);
padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40);
}
.arisha-cv__heading {
margin: 0 0 var(--wp--preset--spacing--20);
font-weight: 300;
}
.arisha-cv__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px var(--wp--preset--spacing--30);
padding-block: var(--wp--preset--spacing--20);
border-top: 1px solid var(--wp--preset--color--beige);
}
.arisha-cv__role {
grid-column: 1;
grid-row: 1;
margin: 0;
}
.arisha-cv__year {
grid-column: 2;
grid-row: 1;
margin: 0;
text-align: right;
font-variant-numeric: tabular-nums;
}
.arisha-cv__detail {
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
}
.arisha-cv__tags {
gap: var(--wp--preset--spacing--10);
}
.arisha-cv__tag {
margin: 0;
padding: 7px 14px;
border: 1px solid var(--wp--preset--color--beige);
border-radius: 40px;
}
@media (max-width: 820px) {
.arisha-cv {
grid-template-columns: 1fr;
}
.arisha-cv__side {
position: static;
}
}
/* =========================================================================
* 28. 404
* ========================================================================= */
.arisha-notfound__links {
margin-top: var(--wp--preset--spacing--40);
gap: var(--wp--preset--spacing--30);
}
.arisha-notfound .arisha-pagehead__intro {
max-width: 36ch;
}
/* =========================================================================
* 29. Step 3 corrections
* ========================================================================= */
/*
* Core's flex layout resets the margin on every child, so margin-left:auto on
* the credit never lands. Letting it grow and align its own content right gets
* the same result without fighting specificity.
*/
.arisha-research__foot > .arisha-research__credit {
flex: 1 1 auto;
justify-content: flex-end;
margin-left: 0;
}
@media (max-width: 820px) {
.arisha-research__foot > .arisha-research__credit {
flex-basis: 100%;
justify-content: flex-start;
}
}
/* Taxonomy links in meta rows read as labels, not as links. */
.arisha-research__top a,
.arisha-facts__value a,
.arisha-crumb a {
color: inherit;
text-decoration: none;
}
.arisha-research__top a:hover,
.arisha-facts__value a:hover {
color: var(--wp--preset--color--espresso);
}
/* =========================================================================
* 30. Header (premium)
* ========================================================================= */
/* =========================================================================
* 1. Logo
* ========================================================================= */
.arisha-header .arisha-header__mark {
align-items: center;
}
.arisha-header .arisha-header__home {
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none;
}
/*
* 40px tall. The width/height attributes on the img carry the same numbers, so
* the box is reserved before the file arrives and nothing shifts.
*/
.arisha-header .arisha-header__logo {
display: block;
height: 40px;
width: auto;
}
/*
* Gold reads on cream, cream reads on the dark hero. Exactly one is rendered;
* display:none also drops the other out of the accessibility tree, so the home
* link has a single accessible name.
*/
.arisha-header .arisha-header__logo-cream {
display: none;
}
/*
* Colour lives here, not on the block. A preset colour class is emitted by core
* with !important, which no state rule can override - that is what kept this
* label soft-brown (1.8:1) over the dark hero.
*/
.arisha-header .arisha-header__label {
color: var(--wp--preset--color--soft-brown);
align-self: center;
}
/* =========================================================================
* 2. Bar: ground, hairline, hide on scroll
* ========================================================================= */
/*
* The cream bar is the resting state everywhere. style.css puts the same
* values on .is-solid; repeating them on the bare element is what makes an
* interior page correct with no class and no script.
*/
body .arisha-header {
background-color: color-mix(in srgb, var(--wp--preset--color--cream) 92%, transparent);
box-shadow: 0 1px 0 var(--wp--preset--color--beige);
transition:
background-color 0.4s,
box-shadow 0.4s,
transform 0.45s var(--wp--custom--ease);
}
/*
* backdrop-filter makes the header a containing block for fixed-position
* descendants, which would clip the full-screen overlay to the header box.
* Blur only while the overlay is closed - same guard style.css uses.
*/
body .arisha-header:not(:has(.wp-block-navigation__responsive-container.is-menu-open)) {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Hide on scroll down. The script never sets this under reduced motion. */
body .arisha-header.is-hidden {
transform: translateY(-100%);
}
/*
* A non-none transform is also a containing block, so the bar is pinned back
* in place for the whole time the overlay is open - belt and braces next to
* the script removing .is-hidden on open.
*/
body .arisha-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
transform: none;
}
.arisha-header .arisha-header__end {
gap: var(--wp--preset--spacing--30);
}
/* =========================================================================
* 3. Desktop nav
* ========================================================================= */
/*
* The bar is only on screen above the 820px collapse point, so the hover rule
* and the overlay-only Contact item are scoped there.
*/
@media (min-width: 821px) {
/* Contact is the outline button up here; the nav item is overlay-only. */
.arisha-header .arisha-nav .wp-block-navigation-item.arisha-nav-item-overlay {
display: none;
}
/* Hover underline - one of the few sanctioned uses of accent. */
.arisha-header .arisha-nav .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--wp--preset--spacing--10) - 2px);
height: 1px;
background-color: var(--wp--preset--color--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s var(--wp--custom--ease);
}
.arisha-header .arisha-nav .wp-block-navigation-item__content:hover::after,
.arisha-header .arisha-nav .wp-block-navigation-item__content:focus-visible::after {
transform: scaleX(1);
}
}
/* Active item dot: accent, per the project colour rule. */
.arisha-header .arisha-nav .wp-block-navigation-item__content[aria-current]::before {
background-color: var(--wp--preset--color--accent);
}
/* =========================================================================
* 4. Contact button
* ========================================================================= */
/*
* A small outline button, not core's is-style-outline - theme.json fills every
* button with espresso, so the outline look is set out in full here.
*/
.arisha-header .arisha-header__cta {
margin: 0;
}
.arisha-header .arisha-header__cta-link .wp-block-button__link {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 var(--wp--preset--spacing--20);
background-color: transparent;
color: var(--wp--preset--color--espresso);
border: 1px solid var(--wp--preset--color--espresso);
font-size: var(--wp--preset--font-size--label);
line-height: 1;
transition:
background-color 0.3s,
color 0.3s,
border-color 0.3s;
}
.arisha-header .arisha-header__cta-link .wp-block-button__link:hover,
.arisha-header .arisha-header__cta-link .wp-block-button__link:focus,
.arisha-header .arisha-header__cta-link .wp-block-button__link[aria-current] {
background-color: var(--wp--preset--color--espresso);
color: var(--wp--preset--color--cream);
border-color: var(--wp--preset--color--espresso);
}
/* Below the collapse point the overlay carries Contact instead. */
@media (max-width: 820px) {
.arisha-header .arisha-header__cta {
display: none;
}
}
/* =========================================================================
* 5. Transparent state (front page, over the hero)
* ========================================================================= */
/*
* WordPress prints `home` on the front page and nowhere else, so this is the
* whole scoping mechanism. `:not(.is-solid)` falls away the moment the reader
* scrolls past 10px or opens the overlay.
*/
body.home .arisha-header:not(.is-solid) {
background-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body.home .arisha-header:not(.is-solid) .arisha-header__logo-gold {
display: none;
}
body.home .arisha-header:not(.is-solid) .arisha-header__logo-cream {
display: block;
}
body.home .arisha-header:not(.is-solid) .arisha-header__label {
color: var(--wp--preset--color--sand);
}
body.home .arisha-header:not(.is-solid) .arisha-nav .wp-block-navigation-item__content {
color: var(--wp--preset--color--cream);
}
body.home .arisha-header:not(.is-solid) .arisha-nav .wp-block-navigation__responsive-container-open {
color: var(--wp--preset--color--cream);
}
body.home .arisha-header:not(.is-solid) .arisha-header__cta-link .wp-block-button__link {
color: var(--wp--preset--color--cream);
border-color: var(--wp--preset--color--cream);
}
body.home .arisha-header:not(.is-solid) .arisha-header__cta-link .wp-block-button__link:hover,
body.home .arisha-header:not(.is-solid) .arisha-header__cta-link .wp-block-button__link:focus {
background-color: var(--wp--preset--color--cream);
color: var(--wp--preset--color--espresso);
}
/* =========================================================================
* 6. Mobile overlay
* ========================================================================= */
/*
* The overlay contact block is an inner block of core/navigation, so it also
* renders into the desktop bar. It belongs to the overlay only.
*/
.arisha-header .arisha-nav .wp-block-navigation__responsive-container .arisha-nav__contact {
display: none;
}
/*
* Core's overlay is z-index 100000 and covers the bar, which would leave the
* top-left of the overlay empty. Both live inside the header's own stacking
* context, so lifting the mark one step puts the logo back on top of it.
*/
.arisha-header:has(.wp-block-navigation__responsive-container.is-menu-open) .arisha-header__mark {
position: relative;
z-index: 100001;
}
/*
* Push the contact block to the foot of the overlay. The chain of wrappers
* core renders between the overlay and its content all have to stretch for
* `margin-top: auto` to have any room to work in.
*/
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.arisha-header .arisha-nav .wp-block-navigation__responsive-container.is-menu-open .arisha-nav__contact {
display: flex;
width: 100%;
margin-top: auto;
padding-top: var(--wp--preset--spacing--40);
gap: var(--wp--preset--spacing--10);
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .arisha-nav__contact .wp-block-button__link {
color: var(--wp--preset--color--soft-brown);
transition: color 0.25s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .arisha-nav__contact .wp-block-button__link:hover,
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .arisha-nav__contact .wp-block-button__link:focus {
color: var(--wp--preset--color--espresso);
}
/* Staggered entrance for the large serif links, then the contact block. */
@keyframes arisha-nav-in {
from {
opacity: 0;
transform: translateY(0.625rem);
}
to {
opacity: 1;
transform: none;
}
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .arisha-nav__contact {
animation: arisha-nav-in 0.5s var(--wp--custom--ease) both;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) {
animation-delay: 0.06s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) {
animation-delay: 0.12s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) {
animation-delay: 0.18s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) {
animation-delay: 0.24s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) {
animation-delay: 0.3s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) {
animation-delay: 0.36s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) {
animation-delay: 0.42s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+8) {
animation-delay: 0.48s;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .arisha-nav__contact {
animation-delay: 0.54s;
}
/* =========================================================================
* Reduced motion
* ========================================================================= */
@media (prefers-reduced-motion: reduce) {
body .arisha-header.is-hidden {
transform: none;
}
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.arisha-nav .wp-block-navigation__responsive-container.is-menu-open .arisha-nav__contact {
animation: none;
}
.arisha-header .arisha-nav .wp-block-navigation-item__content::after {
transition: none;
}
}
/* =========================================================================
* 9. Front page: the header overlays the hero
* =========================================================================
* Everywhere else the bar stays `position: sticky`, which is in flow and has
* been correct since it was built. On the front page the hero is 100svh and
* the header has to sit ON it, so only there does it become fixed - otherwise
* the bar's own height plus the gap above `main` pushed the hero 108px below
* the fold and took the scroll cue off screen.
*/
body.home .arisha-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* The cover must start at the very top of the viewport. */
body.home .wp-site-blocks > main,
body.home .arisha-main {
margin-top: 0;
padding-top: 0;
}
/* =========================================================================
* 31. Footer (premium)
* ========================================================================= */
/* -------------------------------------------------------------------------
* Shell
* ---------------------------------------------------------------------- */
.arisha-footer__inner {
padding-bottom: calc(var(--wp--preset--spacing--40) + env(safe-area-inset-bottom, 0px));
}
/*
* theme.json paints every button espresso with generous side padding. In the
* footer the "plain link" variant has to sit flush with the type around it, so
* the button chrome is stripped back off. The real button
* (.arisha-footer__send) is not a plain link and keeps its shape.
*/
.arisha-footer .arisha-plain-link > .wp-block-button__link {
padding: 0;
min-height: 0;
border: 0;
background-color: transparent;
}
/* -------------------------------------------------------------------------
* Top: the call to action
* ---------------------------------------------------------------------- */
.arisha-footer__talk {
max-width: 22ch;
margin: var(--wp--preset--spacing--20) 0 0;
line-height: 1.04;
letter-spacing: -0.015em;
}
/* The one sanctioned use of accent in the footer. */
.arisha-footer__talk::after {
content: "";
display: block;
width: var(--wp--preset--spacing--40);
height: 2px;
margin-top: var(--wp--preset--spacing--30);
background-color: var(--wp--preset--color--accent);
}
.arisha-footer__send {
margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60);
}
/*
* Outline on espresso: the theme's is-style-outline is drawn in espresso, so
* the footer gets its own cream outline instead. Fills cream on interaction.
*/
.arisha-footer__send .wp-block-button__link {
min-height: 52px;
border: 1px solid var(--wp--preset--color--taupe);
background-color: transparent;
color: var(--wp--preset--color--cream);
transition: background-color 0.25s var(--wp--custom--ease), color 0.25s var(--wp--custom--ease), border-color 0.25s var(--wp--custom--ease);
}
.arisha-footer__send .wp-block-button__link:hover,
.arisha-footer__send .wp-block-button__link:focus-visible {
border-color: var(--wp--preset--color--cream);
background-color: var(--wp--preset--color--cream);
color: var(--wp--preset--color--espresso);
}
/* -------------------------------------------------------------------------
* Middle: the lockup, the line about the work, and the menu
* ---------------------------------------------------------------------- */
.arisha-footer__middle {
border-top: 1px solid var(--wp--preset--color--soft-brown);
padding-top: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--50);
}
/*
* The full lockup carries the tagline under the wordmark, so it needs real
* width to stay legible. The img keeps its own width/height attributes for
* aspect ratio; max-width lets it shrink on a narrow phone.
*/
.arisha-footer__logo {
margin: 0 0 var(--wp--preset--spacing--40);
}
.arisha-footer__logo img {
display: block;
width: 220px;
max-width: 100%;
height: auto;
}
/* -------------------------------------------------------------------------
* Bottom: copyright and back to top
* ---------------------------------------------------------------------- */
.arisha-footer__row {
align-items: baseline;
}
.arisha-footer__totop a {
text-decoration: none;
}
.arisha-footer__totop a:hover,
.arisha-footer__totop a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.25em;
}
/* -------------------------------------------------------------------------
* Narrow screens
* ---------------------------------------------------------------------- */
@media (max-width: 600px) {
.arisha-footer__talk {
max-width: none;
}
.arisha-footer__send .wp-block-button__link {
width: 100%;
}
.arisha-footer__row {
gap: var(--wp--preset--spacing--10);
}
}
/* =========================================================================
* 32. Home hero
* ========================================================================= */
/* =========================================================================
* 1. The cover
* ========================================================================= */
/*
* Height is owned here rather than by the block's minHeight attribute, so the
* svh value cannot be beaten by an inline min-height. 100vh is the fallback
* for browsers without small-viewport units; 100svh stops mobile browser
* chrome from pushing the scroll cue below the fold.
*
* No top padding on purpose: the site header overlays the hero, and every
* piece of hero content is bottom-aligned, so nothing hides behind it.
*/
.wp-block-cover.arisha-cover-hero {
min-height: 100vh;
min-height: 100svh;
align-items: flex-end;
/*
* Top padding reserves the header's band. The content is bottom-aligned, so
* on a short viewport (a 1440x700 laptop, a 390x620 phone in landscape) it
* grows past the available height and rides UP - straight under the fixed
* header, where the eyebrow collided with the logo. This stops it at the
* header's lower edge instead; the cover image still runs full-bleed behind.
*/
padding: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--20))
var(--wp--custom--gutter) var(--wp--preset--spacing--40);
overflow: hidden;
}
/*
* A warm scrim over the bottom third, layered on the block's own espresso dim
* (dimRatio 70). It lifts the cream body text to ~6.5:1 and the beige labels
* to ~4.6:1 even against a near-white photograph, without flattening the whole
* image. Core stacks the image and dim layers by source order and both precede
* this pseudo-element, so only the content needs lifting above it.
*/
.wp-block-cover.arisha-cover-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.5;
background-image: linear-gradient(
to top,
var(--wp--preset--color--espresso) 0%,
var(--wp--preset--color--espresso) 35%,
transparent 88%
);
}
.arisha-cover-hero > .wp-block-cover__inner-container {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
}
/* =========================================================================
* 2. Composition
* ========================================================================= */
.arisha-cover-hero .arisha-cover-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(11rem, 17vw, 15rem);
grid-template-areas:
"content titleblock"
"cue cue";
align-items: end;
column-gap: var(--wp--custom--column-gap);
row-gap: var(--wp--preset--spacing--40);
}
/* Core's flow layout would add block-gap margins between the grid items. */
.arisha-cover-hero .arisha-cover-hero__inner > *,
.arisha-cover-hero .arisha-cover-hero__titleblock > *,
.arisha-cover-hero .arisha-cover-hero__pair > * {
margin-block: 0;
}
.arisha-cover-hero .arisha-cover-hero__content {
grid-area: content;
min-width: 0;
}
.arisha-cover-hero .arisha-cover-hero__titleblock {
grid-area: titleblock;
}
.arisha-cover-hero .arisha-cover-hero__cue {
grid-area: cue;
justify-self: center;
}
/* =========================================================================
* 3. Name block
* ========================================================================= */
.arisha-cover-hero .arisha-cover-hero__eyebrow {
margin: 0 0 var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--instrument-sans);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.4;
}
/*
* Light serif, tight leading, Notta on its own line. The negative margin is
* optical only - it pulls the A's left sidebearing back onto the same edge as
* the eyebrow above it. Both lines start at that edge: the indent the mockup
* gave the second line left the whole left column reading as ragged.
*/
.arisha-cover-hero .arisha-cover-hero__name {
margin: 0 0 0 -0.05em;
font-weight: 300;
line-height: 0.86;
letter-spacing: -0.035em;
}
.arisha-cover-hero .arisha-cover-hero__name em {
display: block;
font-style: italic;
}
.arisha-cover-hero .arisha-cover-hero__lede {
max-width: 34ch;
margin: var(--wp--preset--spacing--30) 0 0;
font-weight: 300;
line-height: 1.32;
}
/* =========================================================================
* 4. Buttons
* ========================================================================= */
.arisha-cover-hero .arisha-cover-hero__actions {
margin: var(--wp--preset--spacing--40) 0 0;
gap: var(--wp--preset--spacing--20);
}
/*
* theme.json gives buttons an espresso ground, which vanishes into a dimmed
* photograph, so over the hero they invert: a cream fill for the primary
* action, a cream hairline for the secondary one.
*/
.arisha-cover-hero .arisha-cover-hero__actions .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3rem;
border: 1px solid var(--wp--preset--color--cream);
background-color: var(--wp--preset--color--cream);
color: var(--wp--preset--color--espresso);
text-decoration: none;
transition:
background-color 0.3s var(--wp--custom--ease),
border-color 0.3s var(--wp--custom--ease),
color 0.3s var(--wp--custom--ease);
}
.arisha-cover-hero .arisha-cover-hero__actions .wp-block-button__link:hover,
.arisha-cover-hero .arisha-cover-hero__actions .wp-block-button__link:focus-visible {
background-color: var(--wp--preset--color--beige);
border-color: var(--wp--preset--color--beige);
color: var(--wp--preset--color--espresso);
}
.arisha-cover-hero .arisha-cover-hero__actions .is-style-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--cream);
}
.arisha-cover-hero .arisha-cover-hero__actions .is-style-outline .wp-block-button__link:hover,
.arisha-cover-hero .arisha-cover-hero__actions .is-style-outline .wp-block-button__link:focus-visible {
background-color: var(--wp--preset--color--cream);
color: var(--wp--preset--color--espresso);
}
/* =========================================================================
* 5. Title block
* ========================================================================= */
/*
* A rail down the full height of the content column rather than a block parked
* at its foot. Bottom-aligning the three pairs left the whole upper right of
* the hero empty; spreading them, each under its own hairline, gives that side
* a structure to read as deliberate.
*/
.arisha-cover-hero .arisha-cover-hero__titleblock {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--wp--preset--spacing--30);
align-self: stretch;
min-width: 0;
text-align: right;
}
.arisha-cover-hero .arisha-cover-hero__pair {
display: grid;
gap: 0.125rem;
padding-top: var(--wp--preset--spacing--20);
border-top: 1px solid var(--wp--preset--color--taupe);
}
.arisha-cover-hero .arisha-cover-hero__label {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.4;
}
.arisha-cover-hero .arisha-cover-hero__value {
line-height: 1.4;
}
/* =========================================================================
* 6. Scroll cue
* ========================================================================= */
/*
* The word is the accessible label; the hairline under it is the decoration
* that carries the accent token - the hero scroll cue is one of accent's
* sanctioned uses (docs/CLAUDE.md).
*/
.arisha-cover-hero .arisha-cover-hero__cue {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wp--preset--spacing--10);
margin: 0;
font-family: var(--wp--preset--font-family--instrument-sans);
text-transform: uppercase;
letter-spacing: 0.14em;
line-height: 1;
}
.arisha-cover-hero .arisha-cover-hero__cue::after {
content: "";
display: block;
width: 1px;
height: 2.5rem;
background-image: linear-gradient(
to bottom,
var(--wp--preset--color--accent),
transparent
);
}
/* =========================================================================
* 7. Entrance sequence
* ========================================================================= */
/*
* One sequence: the photograph settles out of a slight scale while the text
* rises into place. Both keyframe sets end on the element's natural, visible
* state, so collapsing the duration (the global prefers-reduced-motion block
* in style.css) leaves a finished hero rather than a blank one.
*/
@keyframes arisha-hero-settle {
from {
transform: scale(1.07);
}
to {
transform: none;
}
}
@keyframes arisha-hero-rise {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: none;
}
}
.arisha-cover-hero > .wp-block-cover__image-background {
animation: arisha-hero-settle 1.9s var(--wp--custom--ease) both;
}
.arisha-cover-hero .arisha-cover-hero__eyebrow,
.arisha-cover-hero .arisha-cover-hero__name,
.arisha-cover-hero .arisha-cover-hero__lede,
.arisha-cover-hero .arisha-cover-hero__actions,
.arisha-cover-hero .arisha-cover-hero__titleblock,
.arisha-cover-hero .arisha-cover-hero__cue {
animation: arisha-hero-rise 0.9s var(--wp--custom--ease) both;
}
.arisha-cover-hero .arisha-cover-hero__eyebrow {
animation-delay: 0.1s;
}
.arisha-cover-hero .arisha-cover-hero__name {
animation-delay: 0.18s;
}
.arisha-cover-hero .arisha-cover-hero__lede {
animation-delay: 0.3s;
}
.arisha-cover-hero .arisha-cover-hero__actions {
animation-delay: 0.4s;
}
.arisha-cover-hero .arisha-cover-hero__titleblock {
animation-delay: 0.48s;
}
.arisha-cover-hero .arisha-cover-hero__cue {
animation-delay: 0.6s;
}
/*
* The global reduced-motion block collapses durations but not delays, and
* animation-fill-mode: both would hold the hidden start state for the whole
* delay. Drop the animations outright instead.
*/
@media (prefers-reduced-motion: reduce) {
.arisha-cover-hero > .wp-block-cover__image-background,
.arisha-cover-hero .arisha-cover-hero__eyebrow,
.arisha-cover-hero .arisha-cover-hero__name,
.arisha-cover-hero .arisha-cover-hero__lede,
.arisha-cover-hero .arisha-cover-hero__actions,
.arisha-cover-hero .arisha-cover-hero__titleblock,
.arisha-cover-hero .arisha-cover-hero__cue {
animation: none !important;
}
}
/* =========================================================================
* 8. Narrow viewports
* ========================================================================= */
@media (max-width: 900px) {
.arisha-cover-hero .arisha-cover-hero__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"content"
"titleblock"
"cue";
row-gap: var(--wp--preset--spacing--30);
}
.arisha-cover-hero .arisha-cover-hero__titleblock {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--20);
align-self: auto;
text-align: left;
}
}
@media (max-width: 600px) {
.wp-block-cover.arisha-cover-hero {
padding-bottom: var(--wp--preset--spacing--30);
}
.arisha-cover-hero .arisha-cover-hero__titleblock {
grid-template-columns: minmax(0, 1fr);
}
.arisha-cover-hero .arisha-cover-hero__pair {
grid-template-columns: 6.5rem minmax(0, 1fr);
align-items: baseline;
column-gap: var(--wp--preset--spacing--20);
}
.arisha-cover-hero .arisha-cover-hero__cue::after {
height: 1.75rem;
}
}
/* =========================================================================
* 33. Contact form
* ========================================================================= */
/* =========================================================================
* 1. Shell
* ========================================================================= */
/*
* The form is the whole Contact page below the head, so it starts at the same
* edge as the title - a constrained wrapper centred it in the wide column and
* left it floating under a flush-left head. The width cap lives here rather
* than on the section because core's own alignwide rule outranks a single
* class, and because the rule above the fields should be the fields' width.
*/
.arisha-form {
max-width: var(--wp--custom--measure);
padding-top: var(--wp--preset--spacing--50);
border-top: 1px solid var(--wp--preset--color--espresso);
}
.arisha-form__form {
max-width: var(--wp--custom--measure);
margin: 0;
}
.arisha-form__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--40) var(--wp--custom--column-gap);
}
/* Subject and message run the full width; name and email share the top row. */
.arisha-form__field:nth-child(3),
.arisha-form__field:nth-child(4) {
grid-column: 1 / -1;
}
.arisha-form__field {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--10);
min-width: 0;
}
@media (max-width: 680px) {
.arisha-form__fields {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--40);
}
}
/* =========================================================================
* 2. Labels and hints
* ========================================================================= */
.arisha-form__label {
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--meta);
font-weight: 500;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wp--preset--color--soft-brown);
}
.arisha-form__hint {
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--small);
line-height: 1.5;
color: var(--wp--preset--color--soft-brown);
}
/* =========================================================================
* 3. Controls
* ========================================================================= */
.arisha-form__input,
.arisha-form__select,
.arisha-form__textarea {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0 0 var(--wp--preset--spacing--10);
appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-image: none;
border: 0;
border-bottom: 1px solid var(--wp--preset--color--beige);
border-radius: 0;
box-shadow: none;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: var(--wp--preset--font-size--large);
font-weight: 300;
line-height: 1.3;
color: var(--wp--preset--color--espresso);
transition: border-color 0.3s var(--wp--custom--ease);
}
.arisha-form__textarea {
display: block;
min-height: 7.5rem;
resize: vertical;
}
.arisha-form__input:hover,
.arisha-form__select:hover,
.arisha-form__textarea:hover {
border-bottom-color: var(--wp--preset--color--taupe);
}
.arisha-form__input:focus,
.arisha-form__select:focus,
.arisha-form__textarea:focus {
border-bottom-color: var(--wp--preset--color--espresso);
}
/* The accent is allowed here: a focus ring is one of its sanctioned uses. */
.arisha-form__input:focus-visible,
.arisha-form__select:focus-visible,
.arisha-form__textarea:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 4px;
}
.arisha-form__input::placeholder,
.arisha-form__textarea::placeholder {
color: var(--wp--preset--color--stone);
opacity: 1;
}
/* An unanswered select reads as a prompt, an answered one as an answer. */
.arisha-form__select:invalid,
.arisha-form__select option[value=""] {
color: var(--wp--preset--color--soft-brown);
}
.arisha-form__select option {
color: var(--wp--preset--color--espresso);
background-color: var(--wp--preset--color--cream);
}
/* --- Select chevron ------------------------------------------------------
* Drawn in CSS rather than an SVG data URI, because a data URI would have to
* carry a literal colour and only the paper grain may do that.
* ------------------------------------------------------------------------ */
.arisha-form__selectwrap {
position: relative;
display: block;
}
.arisha-form__selectwrap::after {
content: "";
position: absolute;
right: 0.25rem;
bottom: 0.9rem;
width: 0.4375rem;
height: 0.4375rem;
border-right: 1px solid var(--wp--preset--color--soft-brown);
border-bottom: 1px solid var(--wp--preset--color--soft-brown);
transform: rotate(45deg);
pointer-events: none;
}
.arisha-form__select {
padding-right: var(--wp--preset--spacing--30);
cursor: pointer;
}
/* =========================================================================
* 4. Validation
* ========================================================================= */
.arisha-form__error {
display: block;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--small);
line-height: 1.5;
color: var(--wp--preset--color--soft-brown);
}
/* Empty slot takes no space, so the layout does not jump before an error. */
.arisha-form__error:empty {
display: none;
}
/* The accent dot is the tiny detail that marks the line as a correction. */
.arisha-form__error:not(:empty)::before {
content: "";
display: inline-block;
width: 0.3125rem;
height: 0.3125rem;
margin-right: 0.5rem;
vertical-align: 0.1em;
background-color: var(--wp--preset--color--accent);
border-radius: 50%;
}
/*
* An invalid field is marked by weight as well as the message, never by colour
* alone: the underline doubles and darkens.
*/
.arisha-form__field.is-invalid .arisha-form__input,
.arisha-form__field.is-invalid .arisha-form__select,
.arisha-form__field.is-invalid .arisha-form__textarea,
.arisha-form__input[aria-invalid="true"],
.arisha-form__select[aria-invalid="true"],
.arisha-form__textarea[aria-invalid="true"] {
border-bottom-width: 2px;
border-bottom-color: var(--wp--preset--color--soft-brown);
}
/* =========================================================================
* 5. Honeypot
* ========================================================================= */
/*
* Out of sight without display:none, which some bots check for. aria-hidden
* and tabindex="-1" in the markup keep it out of the accessibility tree and
* the tab order, so it is unreachable by keyboard or screen reader.
*/
.arisha-form__trap {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* =========================================================================
* 6. Submit
* ========================================================================= */
.arisha-form__foot {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--30);
align-items: center;
padding-top: var(--wp--preset--spacing--40);
}
.arisha-form__submit {
margin: 0;
padding: 0.9375rem 1.625rem;
appearance: none;
-webkit-appearance: none;
background-color: var(--wp--preset--color--espresso);
border: 1px solid var(--wp--preset--color--espresso);
border-radius: 0;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--label);
font-weight: 400;
line-height: 1;
color: var(--wp--preset--color--cream);
cursor: pointer;
transition:
background-color 0.3s var(--wp--custom--ease),
border-color 0.3s var(--wp--custom--ease);
}
.arisha-form__submit:hover,
.arisha-form__submit:focus {
background-color: var(--wp--preset--color--soft-brown);
border-color: var(--wp--preset--color--soft-brown);
color: var(--wp--preset--color--cream);
}
.arisha-form__submit:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
.arisha-form__submit[disabled] {
background-color: var(--wp--preset--color--taupe);
border-color: var(--wp--preset--color--taupe);
cursor: progress;
}
.arisha-form__note {
margin: 0;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--small);
line-height: 1.5;
color: var(--wp--preset--color--soft-brown);
}
/* =========================================================================
* 7. Form-level status and the sent state
* ========================================================================= */
.arisha-form__status {
margin: var(--wp--preset--spacing--30) 0 0;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
color: var(--wp--preset--color--soft-brown);
}
.arisha-form__status:empty {
display: none;
}
.arisha-form__status.is-error {
padding-left: var(--wp--preset--spacing--20);
border-left: 2px solid var(--wp--preset--color--accent);
}
/* The sent panel replaces the form, so the outcome is the only thing left. */
.arisha-form__done {
padding: var(--wp--preset--spacing--40);
background-color: var(--wp--preset--color--sand);
}
.arisha-form__done:focus {
outline: none;
}
.arisha-form__done:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
.arisha-form__donetitle {
margin: 0 0 var(--wp--preset--spacing--10);
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: var(--wp--preset--font-size--x-large);
font-weight: 300;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--wp--preset--color--espresso);
}
.arisha-form__donebody {
max-width: var(--wp--custom--measure);
margin: 0;
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--medium);
line-height: 1.6;
color: var(--wp--preset--color--soft-brown);
}
/* =========================================================================
* 8. Editor preview
* ========================================================================= */
.arisha-form.is-editor-preview .arisha-form__input.is-editor-line,
.arisha-form.is-editor-preview .arisha-form__textarea.is-editor-line {
display: block;
border-bottom: 1px solid var(--wp--preset--color--beige);
}
.arisha-form.is-editor-preview .arisha-form__input.is-editor-line {
height: 2.25rem;
}
.arisha-form.is-editor-preview .arisha-form__submit.is-editor-button {
display: inline-block;
}
/* =========================================================================
* 9. Motion
* ========================================================================= */
@media (prefers-reduced-motion: reduce) {
.arisha-form__input,
.arisha-form__select,
.arisha-form__textarea,
.arisha-form__submit {
transition: none;
}
}
/* =========================================================================
* 34. Journal
* ========================================================================= */
/* =========================================================================
* 1. Archive - list
* ========================================================================= */
.arisha-journal {
margin-top: var(--wp--preset--spacing--20);
}
.arisha-journal__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--wp--preset--color--espresso);
}
.arisha-journal__list > li {
margin: 0;
}
.arisha-journal__item {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--wp--custom--column-gap);
padding-block: var(--wp--preset--spacing--50);
border-bottom: 1px solid var(--wp--preset--color--beige);
}
.arisha-journal__media {
margin: 0;
overflow: hidden;
background-color: var(--wp--preset--color--sand);
aspect-ratio: 4 / 3;
}
.arisha-journal__media a,
.arisha-journal__media img {
display: block;
width: 100%;
height: 100%;
}
.arisha-journal__media img {
object-fit: cover;
transition: transform 1.4s var(--wp--custom--ease);
}
.arisha-journal__item:hover .arisha-journal__media img {
transform: scale(1.035);
}
/* The title carries the row, in the display serif. */
.arisha-journal__title {
max-width: 30ch;
margin: 0;
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.02em;
}
.arisha-journal__title a {
text-decoration: none;
}
.arisha-journal__title a:hover,
.arisha-journal__title a:focus-visible {
color: var(--wp--preset--color--soft-brown);
font-style: italic;
}
.arisha-journal__excerpt {
max-width: 58ch;
margin: var(--wp--preset--spacing--30) 0 0;
}
.arisha-journal__excerpt p {
margin: 0;
}
.arisha-journal__read {
display: inline-block;
margin-top: var(--wp--preset--spacing--30);
padding-bottom: 2px;
border-bottom: 1px solid var(--wp--preset--color--beige);
font-size: var(--wp--preset--font-size--label);
color: var(--wp--preset--color--espresso);
text-decoration: none;
transition: border-color 0.3s, color 0.3s;
}
.arisha-journal__read:hover,
.arisha-journal__read:focus-visible {
border-bottom-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--soft-brown);
}
.arisha-journal__empty {
padding-block: var(--wp--preset--spacing--50);
}
@media (max-width: 820px) {
.arisha-journal__item {
grid-template-columns: 1fr;
}
.arisha-journal__media {
aspect-ratio: 16 / 10;
}
.arisha-journal__title {
max-width: none;
}
}
/* =========================================================================
* 2. Archive - meta line and draft badge
* ========================================================================= */
.arisha-journal__meta,
.arisha-article__meta {
align-items: center;
gap: var(--wp--preset--spacing--20);
margin-top: var(--wp--preset--spacing--20);
}
.arisha-journal__meta > *,
.arisha-article__meta > * {
margin: 0;
}
/* A middot between the date, the reading time and anything after them. */
.arisha-journal__meta > * + *::before,
.arisha-article__meta > * + *::before {
content: "\00b7";
margin-right: var(--wp--preset--spacing--20);
color: var(--wp--preset--color--taupe);
}
/*
* The status badge is a tag, not a sentence, and it only exists while an entry
* is unpublished - once it is live the bound value is empty and the whole
* block is dropped, separator included.
*/
.arisha-journal__badge,
.arisha-article__badge {
display: inline-flex;
align-items: center;
padding: 0.25em 0.6em;
border: 1px solid var(--wp--preset--color--beige);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}
.arisha-journal__badge::before,
.arisha-article__badge::before {
display: none;
}
/* =========================================================================
* 3. Archive - paging
* ========================================================================= */
.arisha-journal__pages {
gap: var(--wp--preset--spacing--30);
margin-top: var(--wp--preset--spacing--50);
}
.arisha-journal__pages a {
font-size: var(--wp--preset--font-size--label);
text-decoration: none;
border-bottom: 1px solid var(--wp--preset--color--beige);
padding-bottom: 2px;
transition: border-color 0.3s;
}
.arisha-journal__pages a:hover,
.arisha-journal__pages a:focus-visible {
border-bottom-color: var(--wp--preset--color--accent);
}
/* =========================================================================
* 4. Entry - head
* ========================================================================= */
.arisha-article {
padding-top: var(--wp--custom--page-head-top);
}
.arisha-article__head {
padding-bottom: var(--wp--preset--spacing--40);
}
.arisha-article__title {
max-width: 34ch;
margin: var(--wp--preset--spacing--30) 0 0;
font-weight: 300;
line-height: 1.04;
letter-spacing: -0.022em;
}
.arisha-article__author {
font-weight: 500;
}
/* =========================================================================
* 5. Entry - hero
* ========================================================================= */
.arisha-article__heromedia {
margin: 0;
background-color: var(--wp--preset--color--sand);
}
.arisha-article__heromedia img {
display: block;
width: 100%;
height: auto;
}
/* =========================================================================
* 6. Entry - body and reading measure
* ========================================================================= */
.arisha-article__body {
margin-top: var(--wp--custom--story-top);
}
/*
* The measure, not the theme's 720px contentSize. core/post-content's own
* constrained rule is written with :where(), which has no specificity, so two
* classes are enough to narrow it - and alignwide / alignfull children are
* left to the theme's widths.
*/
.arisha-article__body .wp-block-post-content > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
max-width: var(--wp--custom--measure);
}
.arisha-article__body .wp-block-post-content > h2 {
max-width: var(--wp--custom--measure);
font-size: var(--wp--preset--font-size--intro);
font-weight: 300;
margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--20);
scroll-margin-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--30));
}
.arisha-article__body .wp-block-post-content > h3 {
margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--10);
}
.arisha-article__body .wp-block-post-content > p {
margin-block: var(--wp--preset--spacing--20);
line-height: 1.7;
}
/* The first line is the review note on every draft; set it apart quietly. */
.arisha-article__body .wp-block-post-content > p:first-child {
padding-bottom: var(--wp--preset--spacing--20);
border-bottom: 1px solid var(--wp--preset--color--beige);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--soft-brown);
}
.arisha-article__body .wp-block-post-content > ul,
.arisha-article__body .wp-block-post-content > ol {
max-width: var(--wp--custom--measure);
padding-left: var(--wp--preset--spacing--30);
line-height: 1.7;
}
.arisha-article__body .wp-block-post-content > ul li,
.arisha-article__body .wp-block-post-content > ol li {
margin-bottom: var(--wp--preset--spacing--10);
}
.arisha-article__body .wp-block-post-content a {
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
text-decoration-color: var(--wp--preset--color--beige);
transition: text-decoration-color 0.3s;
}
.arisha-article__body .wp-block-post-content a:hover,
.arisha-article__body .wp-block-post-content a:focus-visible {
text-decoration-color: var(--wp--preset--color--accent);
}
.arisha-article a:focus-visible,
.arisha-journal a:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
/* =========================================================================
* 7. Entry - writing block styles
* ========================================================================= */
/*
* "Journal quote" - a pull quote as a serif aside under a hairline, rather
* than core's boxed-in default.
*/
.wp-block-pullquote.is-style-journal-quote {
margin-block: var(--wp--preset--spacing--50);
padding: var(--wp--preset--spacing--30) 0 0;
border: 0;
border-top: 1px solid var(--wp--preset--color--beige);
text-align: left;
}
.wp-block-pullquote.is-style-journal-quote blockquote {
margin: 0;
padding: 0;
border: 0;
}
.wp-block-pullquote.is-style-journal-quote p {
max-width: 34ch;
margin: 0;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: var(--wp--preset--font-size--x-large);
font-style: italic;
font-weight: 300;
line-height: 1.25;
letter-spacing: -0.012em;
color: var(--wp--preset--color--espresso);
}
.wp-block-pullquote.is-style-journal-quote cite {
display: block;
margin-top: var(--wp--preset--spacing--20);
font-family: var(--wp--preset--font-family--instrument-sans);
font-size: var(--wp--preset--font-size--small);
font-style: normal;
text-transform: none;
letter-spacing: 0;
color: var(--wp--preset--color--soft-brown);
}
/*
* "Journal plate" - a figure set like a plate in a book: paper ground,
* hairline border, and wider than the reading measure.
*/
.wp-block-image.is-style-journal-plate {
margin-block: var(--wp--preset--spacing--50);
}
.wp-block-image.is-style-journal-plate img {
display: block;
width: 100%;
height: auto;
background-color: var(--wp--preset--color--cream);
border: 1px solid var(--wp--preset--color--beige);
}
.wp-block-image.is-style-journal-plate figcaption {
margin-top: var(--wp--preset--spacing--10);
text-align: left;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--soft-brown);
}
/* Breaking the measure only makes sense inside an entry's body. */
.arisha-article__body .wp-block-post-content > .is-style-journal-plate {
max-width: calc(var(--wp--custom--measure) * 1.45);
}
/* =========================================================================
* 8. Entry - related projects
* ========================================================================= */
.arisha-related {
margin-top: var(--wp--custom--story-top);
}
.arisha-related__head {
align-items: flex-end;
gap: var(--wp--preset--spacing--20);
padding-bottom: var(--wp--preset--spacing--20);
border-bottom: 1px solid var(--wp--preset--color--espresso);
}
.arisha-related__label {
margin: 0;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.4;
}
.arisha-related__all {
margin: 0;
}
.arisha-related__all a {
text-decoration: none;
border-bottom: 1px solid var(--wp--preset--color--beige);
padding-bottom: 2px;
transition: border-color 0.3s;
}
.arisha-related__all a:hover,
.arisha-related__all a:focus-visible {
border-bottom-color: var(--wp--preset--color--accent);
}
.arisha-related__list {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--custom--column-gap);
margin: var(--wp--preset--spacing--40) 0 0;
padding: 0;
}
.arisha-related__list > li {
margin: 0;
}
.arisha-related__media {
margin: 0 0 var(--wp--preset--spacing--20);
overflow: hidden;
background-color: var(--wp--preset--color--sand);
aspect-ratio: 4 / 3;
}
.arisha-related__media a,
.arisha-related__media img {
display: block;
width: 100%;
height: 100%;
}
.arisha-related__media img {
object-fit: cover;
transition: transform 1.4s var(--wp--custom--ease);
}
.arisha-related__item:hover .arisha-related__media img {
transform: scale(1.035);
}
.arisha-related__term {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.arisha-related__term a {
text-decoration: none;
color: inherit;
}
.arisha-related__title {
margin: var(--wp--preset--spacing--10) 0 0;
font-weight: 300;
line-height: 1.12;
letter-spacing: -0.015em;
}
.arisha-related__title a {
text-decoration: none;
}
.arisha-related__title a:hover,
.arisha-related__title a:focus-visible {
font-style: italic;
color: var(--wp--preset--color--soft-brown);
}
@media (max-width: 900px) {
.arisha-related__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.arisha-related__list {
grid-template-columns: 1fr;
}
}
/* =========================================================================
* 9. Entry - previous / next
* ========================================================================= */
.arisha-article__nav {
margin-top: var(--wp--custom--story-top);
}
.arisha-journalnav__inner {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--wp--preset--color--espresso);
}
.arisha-journalnav__link {
display: grid;
grid-template-columns: var(--wp--custom--thumb-size) 1fr;
gap: var(--wp--preset--spacing--30);
align-items: center;
padding-block: var(--wp--preset--spacing--40);
text-decoration: none;
color: inherit;
}
.arisha-journalnav__link.is-next {
grid-template-columns: 1fr var(--wp--custom--thumb-size);
border-left: 1px solid var(--wp--preset--color--beige);
padding-left: var(--wp--preset--spacing--40);
text-align: right;
}
.arisha-journalnav__link.is-next .arisha-journalnav__media {
order: 2;
}
.arisha-journalnav__media {
display: block;
background-color: var(--wp--preset--color--sand);
aspect-ratio: 1;
}
.arisha-journalnav__media img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.arisha-journalnav__label {
display: block;
margin-bottom: 0.4em;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--soft-brown);
}
.arisha-journalnav__title {
display: block;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-size: var(--wp--preset--font-size--x-large);
font-weight: 300;
line-height: 1.1;
}
.arisha-journalnav__link:hover .arisha-journalnav__title,
.arisha-journalnav__link:focus-visible .arisha-journalnav__title {
font-style: italic;
}
@media (max-width: 640px) {
.arisha-journalnav__inner {
grid-template-columns: 1fr;
}
.arisha-journalnav__link.is-next {
border-left: 0;
border-top: 1px solid var(--wp--preset--color--beige);
padding-left: 0;
text-align: left;
}
.arisha-journalnav__link.is-next .arisha-journalnav__media {
order: 0;
}
.arisha-journalnav__link.is-next {
grid-template-columns: var(--wp--custom--thumb-size) 1fr;
}
}
/* =========================================================================
* 10. Motion
* ========================================================================= */
@media (prefers-reduced-motion: reduce) {
.arisha-journal__media img,
.arisha-related__media img {
transition: none;
}
.arisha-journal__item:hover .arisha-journal__media img,
.arisha-related__item:hover .arisha-related__media img {
transform: none;
}
}
/* =========================================================================
* 35. Footer restructure
* =========================================================================
* Replaces the stacked call to action and the logo-above-columns arrangement
* from section 31. Later in the file, so these win.
*/
/* Heading and button on ONE line, baseline aligned, button pushed right. */
.arisha-footer__cta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--40);
border-bottom: 1px solid var(--wp--preset--color--soft-brown);
}
.arisha-footer__cta .arisha-footer__talk {
margin: 0;
flex: 1 1 18ch;
}
.arisha-footer__cta .arisha-footer__send {
margin: 0;
flex: 0 0 auto;
}
/* Centred: mark, a line about the work, then the menu on one row. */
.arisha-footer__middle {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--wp--preset--spacing--30);
/* spacing--60 is the section rhythm and was far too loose for three short
centred lines - it opened a blank band above and below the lockup. */
padding-block: var(--wp--preset--spacing--40);
/* Section 31 gave this a border-top; the call to action now draws that line. */
border-top: 0;
}
.arisha-footer__middle > * {
margin-block: 0;
}
.arisha-footer__logo {
margin: 0;
}
.arisha-footer__logo img {
display: block;
width: 220px;
height: auto;
}
.arisha-footer__intro {
max-width: 46ch;
line-height: 1.6;
}
/* Menu on a single horizontal row, wrapping only when it has to. */
.arisha-footer__menu {
gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
margin-top: var(--wp--preset--spacing--10);
}
.arisha-footer__menu p {
margin: 0;
}
@media (max-width: 560px) {
.arisha-footer__cta {
justify-content: flex-start;
}
.arisha-footer__menu {
gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
}
}
/* =========================================================================
* 36. Home - journal
* =========================================================================
* Three latest entries, in the same uniform grid as the work cards. The whole
* section is dropped for a visitor while nothing is published (inc/journal.php).
*/
.arisha-jfeed__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
list-style: none;
margin: 0;
padding: 0;
}
.arisha-jfeed__list > li {
margin: 0;
}
.arisha-jcard {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--20);
}
.arisha-jcard > * {
margin-block: 0;
}
.arisha-jcard__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: var(--wp--preset--color--sand);
}
.arisha-jcard__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--wp--custom--ease);
}
.arisha-jcard:hover .arisha-jcard__media img {
transform: scale(1.035);
}
/* The date and the reading time read as one line of metadata, divided. */
.arisha-jcard__meta {
gap: var(--wp--preset--spacing--20);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.arisha-jcard__meta > * {
margin: 0;
}
.arisha-jcard__title {
font-weight: 400;
line-height: 1.1;
/* Matches the work cards: two lines reserved, so the excerpts line up. */
min-height: 2.2em;
}
.arisha-jcard__title a {
text-decoration: none;
}
.arisha-jcard:hover .arisha-jcard__title a {
font-style: italic;
}
.arisha-jcard__excerpt {
line-height: 1.6;
}
.arisha-jcard__excerpt p {
margin: 0;
}
.arisha-jfeed__empty {
margin: 0;
}
@media (max-width: 900px) {
.arisha-jfeed__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* A third card alone on a second row reads as a mistake; two is the set. */
.arisha-jfeed__list > li:nth-child(3) {
display: none;
}
}
@media (max-width: 620px) {
.arisha-jfeed__list {
grid-template-columns: 1fr;
}
.arisha-jfeed__list > li:nth-child(3) {
display: block;
}
.arisha-jcard__title {
min-height: 0;
}
}