/* Maranda Atelier — a drawing table at dusk.
   One lamp, a warm ground, and the graphite holding the only real contrast.
   No props: the atmosphere is light and depth, never a picture of paper. */

:root{
  --paper:var(--wp--preset--color--paper,#F6F2EA);
  --leaf:var(--wp--preset--color--leaf,#FFFCF6);
  --ink:var(--wp--preset--color--ink,#191713);
  --pencil:var(--wp--preset--color--pencil,#6A6259);
  --rule:var(--wp--preset--color--rule,#DFD6C6);
  --sage:var(--wp--preset--color--sage,#6E7F6C);
  --ease:cubic-bezier(.22,.61,.36,1);
  --lift:1.1s;
}
/* Beacon writes data-theme on the root before first paint, so that attribute is
   the switch the atelier follows — the media query below only covers a visitor
   whose script never ran. The block is stated twice because CSS has no way to
   give one declaration list two homes. */
[data-theme="dark"]{
  --paper:#14120F; --leaf:#1C1917; --ink:#F0EAE0; --pencil:#A79E92; --rule:#2B2722; --sage:#9CAF9A;
}

/* ---- the parent's palette, spoken in the atelier's voice ----
   Beacon builds everything downstream from a small set of tokens, and several
   are cold: --text is a lavender white, --muted a lavender grey, --deep and
   --glass are navy. Retoning the tokens once fixes every consumer at the same
   time — form fields, separators, the language pills, the header shadow, the
   lightbox, the footer — where chasing each selector would leave the next one
   to be found later. */
/* The parent reaches for preset colours this child never declares — mist,
   surface, primary and the rest — so each one falls through to a cold literal
   the theme.json cannot override. Declaring them here is what actually stops
   the lavender, because the fallback is only used when the name is undefined. */
html:root,html[data-theme="light"],html[data-theme="dark"]{
  --wp--preset--color--mist:var(--pencil);
  --wp--preset--color--surface:var(--leaf);
  --wp--preset--color--primary:var(--ink);
  --wp--preset--color--primary-bright:var(--pencil);
  --wp--preset--color--accent:var(--sage);
  --wp--preset--color--ember:var(--brass,#95794F);
  --wp--preset--color--alert:var(--brass,#95794F);
  --wp--preset--color--deep:var(--paper);
  --text:var(--ink);
  --muted:var(--pencil);
  --line:var(--rule);
  --bg:var(--paper);
  --bg-2:var(--paper);
  --surface:var(--leaf);
  --surface-2:var(--leaf);
  --deep:var(--paper);
  --bar:var(--leaf);
  --btn-ink:var(--paper);
  --accent-text:var(--sage);
  --focus:var(--sage);
  --focus-halo:color-mix(in srgb, var(--sage) 30%, transparent);
  --glass:color-mix(in srgb, var(--paper) 78%, transparent);
  --ring:0 0 0 1px var(--rule);
  --shadow:0 2px 6px rgba(25,23,19,.06), 0 24px 60px -22px rgba(25,23,19,.30);
}
html[data-theme="dark"]{
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 24px 60px -22px rgba(0,0,0,.7);
}
/* The viewer is a darkened room, warm like the rest of the site. */
.lightbox{background:color-mix(in srgb, var(--night,#131110) 94%, transparent) !important}
.lightbox .lb-close,.icon-btn.close{background:transparent !important;color:var(--paper) !important;border:1px solid var(--rule)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14120F; --leaf:#1C1917; --ink:#F0EAE0; --pencil:#A79E92; --rule:#2B2722; --sage:#9CAF9A;
  }
}

/* The ground: one warm light falling across the table, decaying outward. */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 90% at 72% 8%, rgba(255,250,238,.85), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(214,203,183,.30), transparent 62%);
  background-attachment:fixed;
}
[data-theme="dark"] body{
  background-image:
      radial-gradient(120% 90% at 72% 8%, rgba(58,52,44,.75), transparent 58%),
      radial-gradient(90% 70% at 8% 92%, rgba(0,0,0,.45), transparent 62%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{
    background-image:
      radial-gradient(120% 90% at 72% 8%, rgba(58,52,44,.75), transparent 58%),
      radial-gradient(90% 70% at 8% 92%, rgba(0,0,0,.45), transparent 62%);
  }
}
/* Grain so fine it is only felt when the eye rests. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)' opacity='.028'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.28}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.28}}

/* ---- type: elegance is proportion, not scale ---- */
.wp-site-blocks h1{
  font-size:clamp(2rem,3.1vw,3rem);
  /* Wide enough that the second line holds together; the break is the one the
     copy asks for, never one the container imposes. */
  line-height:1.07;letter-spacing:-.024em;font-weight:300;max-width:19ch;
}
.wp-site-blocks h1 em{font-style:italic;color:var(--sage)}
.wp-site-blocks h2{font-size:clamp(1.8rem,2.9vw,2.7rem);font-weight:300;letter-spacing:-.02em}

.label{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pencil);font-weight:600;
}
.label::before{content:"— ";opacity:.5}

/* Her words, set as a quiet aside rather than a novelty. */
.marginalia{
  font-family:var(--wp--preset--font-family--display);
  font-style:italic;font-size:clamp(1.02rem,1.4vw,1.22rem);
  line-height:1.55;color:var(--pencil);max-width:38ch;
  margin-top:clamp(1.4rem,3vw,2.2rem);
  /* A measure narrower than the track must still start on the track's edge. */
  margin-inline:0 auto;
  padding-left:1.4rem;border-left:1px solid var(--rule);
}
.marginalia a{color:var(--ink);border-bottom:1px solid var(--rule)}

/* A drawn rule, faint. */
.rule-hand{
  border:0;height:1px;margin:0;
  background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent);
}

/* ---- the masthead: the work leads at the size it deserves ---- */
.atelier-mast .wp-block-columns{align-items:center;gap:clamp(2rem,5vw,4.5rem)}
.atelier-mast figure{margin:0}

[id]{scroll-margin-top:6rem}

/* The slip is set to the picture, not to the column, so its first letter lands
   on the picture's edge rather than near it. */
.atelier-lead{position:relative;width:fit-content;max-width:100%}
/* The lead piece hangs in the same frame the collection uses, at a size that
   stays inside one screen so the eye meets the whole of it at once. */
.atelier-lead__frame{
  position:relative;display:block;overflow:hidden;
  padding:var(--frame-mat,0);
  background:var(--frame-mat-color,transparent);
  border:var(--frame-border,0) solid var(--frame-border-color,transparent);
  border-radius:var(--frame-radius,0);
  box-shadow:0 2px 3px rgba(25,23,19,.04),
    0 calc(var(--frame-lift,60px) * 1.6) calc(var(--frame-lift,60px) * 2.2) calc(var(--frame-lift,60px) * -1.5) rgba(25,23,19,.5);
}
.atelier-lead__frame::before{
  content:"";position:absolute;inset:calc(var(--frame-mat,0px) - var(--frame-inner,0px));
  border:var(--frame-inner,0) solid var(--frame-inner-color,transparent);pointer-events:none;
}
.atelier-lead__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(to top, var(--piece-tint, transparent) 0%, transparent 68%);
  mix-blend-mode:multiply;
}
.atelier-lead.reveal.in .atelier-lead__frame::after{
  animation:bcn-breeze var(--wash-ms,2100ms) var(--ease) both;
}
@media (prefers-reduced-motion:reduce){
  .atelier-lead.reveal.in .atelier-lead__frame::after{animation:none}
}
.atelier-lead img{
  display:block;width:auto;max-width:100%;max-height:min(74vh,760px);height:auto;
}
/* The catalogue slip, in the manner of patient documentation. */
.atelier-lead__slip{
  display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:baseline;
  margin-top:1rem;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pencil);
}
.atelier-lead__name{color:var(--ink);font-weight:600}
.atelier-lead__medium::before{content:"· ";opacity:.5}

/* Section headings begin where the work begins. A constrained centre column
   beside a wide grid reads as an accident rather than a decision. */
.atelier-mast,
#work,#shop,#commission{
  --wp--style--global--content-size:var(--wp--style--global--wide-size);
}

/* ---- the collection ----
   A table of equal tiles reads as pasted pictures. Here the work keeps its own
   proportions — a landscape piece takes more of the line than an upright one —
   and alternate pieces drop a little, so the eye travels down a continuous path
   instead of scanning rows. Reading order is untouched, so the catalogue still
   counts 01, 02, 03. */
.atelier-collection.bcn-collection{display:block;counter-reset:piece}

/* ---- one wall at a time ----
   Six pieces hang on a wall, then the visitor moves to the next. The wall is a
   plane of light, not a picture of plaster: a hair lighter than the room, with
   its edges falling away. */
.atelier-collection .bcn-wall{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:calc(var(--wall-gap,48px) * 1.4) var(--wall-gap,48px);
  align-items:start;
  position:relative;
  padding:var(--wall-pad,40px) calc(var(--wall-pad,40px) * .7);
  margin-bottom:clamp(3rem,6vw,6rem);
}
.atelier-collection .bcn-wall::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 42%, transparent),
      color-mix(in srgb, var(--paper) 10%, transparent) 62%,
      transparent),
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--paper) 78%, transparent), transparent 70%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--paper) 40%, #FFFFFF);
}

/* ---- the wall is mixed from the work on it ----
   Six soft panes, one per piece hanging here, laid out like tesserae and blurred
   until they read as a plastered wall that happens to hold the colours of the
   art in front of it. The colours arrive from the block; only the arrangement
   lives here. */
.atelier-collection .bcn-wall::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  opacity:var(--mosaic-opacity,.14);
  filter:blur(var(--mosaic-soft,46px)) saturate(1.15);
  background:
    radial-gradient(38% 44% at 16% 24%, var(--m1,transparent) 0%, transparent 72%),
    radial-gradient(36% 42% at 50% 12%, var(--m2,transparent) 0%, transparent 74%),
    radial-gradient(40% 46% at 84% 28%, var(--m3,transparent) 0%, transparent 72%),
    radial-gradient(42% 48% at 22% 78%, var(--m4,transparent) 0%, transparent 74%),
    radial-gradient(38% 44% at 56% 88%, var(--m5,transparent) 0%, transparent 72%),
    radial-gradient(40% 46% at 88% 72%, var(--m6,transparent) 0%, transparent 74%);
}
[data-theme="dark"] .atelier-collection .bcn-wall::after{
  opacity:calc(var(--mosaic-opacity,.14) * 1.5);
  filter:blur(var(--mosaic-soft,46px)) saturate(.9);
}
[data-theme="dark"] .atelier-collection .bcn-wall::before{
  background:
    linear-gradient(180deg, rgba(255,250,240,.055), rgba(255,250,240,.018) 62%, transparent),
    radial-gradient(120% 80% at 50% 0%, rgba(255,250,240,.05), transparent 70%);
  box-shadow:inset 0 1px 0 rgba(255,250,240,.07);
}
.atelier-collection .bcn-piece{counter-increment:piece;grid-column:span 2;min-width:0}
/* A wide piece spanning more columns would leave the line it could not fill,
   and a hole reads as broken rather than composed. The line always fills; the
   picture inside it keeps its own width, so the rhythm is still the work's. */
.atelier-collection .bcn-piece[data-orient="portrait"] .bcn-piece__frame{width:86%}
.atelier-collection .bcn-piece[data-orient="square"] .bcn-piece__frame{width:94%}
.atelier-collection .bcn-piece[data-orient="landscape"] .bcn-piece__frame{width:100%}

/* The drop that turns rows into a current. Every third piece rides low, so no
   two neighbours ever share a baseline. */
.atelier-collection .bcn-piece:nth-child(3n+2){margin-top:clamp(2rem,4vw,4.5rem)}
.atelier-collection .bcn-piece:nth-child(3n){margin-top:clamp(1rem,2vw,2.2rem)}

@media (max-width:1024px){
  .atelier-collection .bcn-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .atelier-collection .bcn-piece,
  .atelier-collection .bcn-piece[data-orient="landscape"],
  .atelier-collection .bcn-piece[data-orient="square"]{grid-column:span 2}
}
@media (max-width:600px){
  .atelier-collection .bcn-wall{grid-template-columns:minmax(0,1fr);gap:clamp(2.6rem,9vw,3.4rem);padding-inline:0}
  .atelier-collection .bcn-piece,
  .atelier-collection .bcn-piece[data-orient="landscape"],
  .atelier-collection .bcn-piece[data-orient="square"]{grid-column:span 1;margin-top:0}
}
.atelier-collection .bcn-piece__frame{display:block}
/* Depth belongs to the frame the studio chose, so the picture carries none. */
.atelier-collection .bcn-piece__frame{
  transition:transform var(--lift) var(--ease);
}
.atelier-collection .bcn-piece__frame:hover,
.atelier-collection .bcn-piece__frame:focus-visible{
  transform:translateY(-5px);
}

.atelier-collection .bcn-piece__note{margin-top:1.1rem}
.atelier-collection .bcn-piece__title{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.32rem;font-weight:400;letter-spacing:-.01em;color:var(--ink);
}
/* The catalogue number sits ahead of the title, quiet and consistent. */
.atelier-collection .bcn-piece__title::before{
  content:counter(piece,decimal-leading-zero);
  margin-right:.7rem;
  font-family:var(--wp--preset--font-family--body);
  font-size:.62rem;letter-spacing:.2em;color:var(--pencil);
  vertical-align:.28em;
}
.atelier-collection .bcn-piece__words{
  font-family:var(--wp--preset--font-family--display);
  font-style:italic;font-size:1.02rem;line-height:1.55;
  color:var(--pencil);max-width:40ch;margin-top:.5rem;
}
.atelier-collection .bcn-piece__facts{
  font-size:.62rem;letter-spacing:.22em;color:var(--pencil);margin-top:.7rem;
}
.atelier-collection .bcn-piece__offer{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:.9rem;font-size:.82rem;letter-spacing:.04em;
}
.atelier-collection .bcn-piece__price{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.1rem;font-weight:500;color:var(--ink);
}
.atelier-collection .bcn-piece__offer--closed{
  font-size:.62rem;letter-spacing:.22em;color:var(--pencil);
}
/* The one thing a visitor came to press. It arrived as an outline the same
   weight as a caption, which read as another line of text rather than an action;
   underlining is switched off here because the accessibility preference that
   underlines links in prose should not stripe a button. */
.atelier-collection .bcn-piece__buy{
  display:inline-block;padding:.55rem 1.15rem;
  background:var(--ink);color:var(--paper);border-color:var(--ink);
  text-decoration:none;
}
.atelier-collection .bcn-piece__buy:hover,
.atelier-collection .bcn-piece__buy:focus-visible{
  background:transparent;color:var(--ink);border-color:var(--ink);
}

/* ---- the form: the studio's voice, not a control panel ---- */
/* The measure is set on the form itself. Capping the wrapper would hand it to
   WordPress's constrained layout, which centres what it caps. */
/* ---- fields that look like fields ----
   These began as underlines only, which suited the paper but left a reader
   unsure there was anything to fill in — on the dark scheme the rules all but
   vanished. Each field now sits on its own faint card: still quiet, but plainly
   a place to type, and the boundary holds in both schemes. */
.atelier-form input[type=text],.atelier-form input[type=email],.atelier-form input[type=tel],
.atelier-form input[type=url],.atelier-form input[type=number],.atelier-form input[type=date],
.atelier-form select,.atelier-form textarea{
  background:color-mix(in srgb, var(--ink) 4%, var(--paper));
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:10px;
  color:var(--ink);
  padding:.78rem .9rem;
  width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.atelier-form textarea{min-height:8rem;resize:vertical}
.atelier-form input:hover,.atelier-form select:hover,.atelier-form textarea:hover{
  border-color:color-mix(in srgb, var(--ink) 34%, transparent);
}
.atelier-form input:focus,.atelier-form select:focus,.atelier-form textarea:focus{
  outline:none;
  background:var(--paper);
  border-color:var(--sage);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 22%, transparent);
}
/* The browser draws its own control here; without a colour hint it renders the
   picker glyph in near-black on the dark scheme. */
.atelier-form input[type=date]{color-scheme:light dark}

.atelier-form input[type=checkbox]{
  width:1.15rem;height:1.15rem;accent-color:var(--sage);
  border:1px solid color-mix(in srgb, var(--ink) 34%, transparent);border-radius:4px;
}

/* A required field says so where it is read, not only in the label above it. */
.atelier-form .bf-field.is-required input::placeholder,
.atelier-form .bf-field.is-required textarea::placeholder{opacity:.75}
.atelier-form label{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pencil);
}

/* ---- Beacon chrome that does not belong on an artist's page ---- */
.wp-block-site-title{display:none}
.wp-block-post-title:first-of-type{display:none}

/* The give button arrives in the parent's violet, which competes with graphite.
   Quiet by default so the subject leads; it fills only on approach. */
.btn-give{
  background:transparent;color:var(--ink);border:1px solid var(--rule);box-shadow:none;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn-give:hover,.btn-give:focus-visible{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}

/* ---- mobile is the first composition, not the remainder ---- */
@media (max-width:781px){
  .atelier-mast .wp-block-column{flex-basis:100% !important}
  .atelier-mast .wp-block-columns{gap:clamp(1.8rem,6vw,2.6rem)}
  .wp-site-blocks h1{max-width:none}
  .marginalia{max-width:none}
}

/* A layout that needs movement to make sense was never composed. */
@media (prefers-reduced-motion:reduce){
  .atelier-collection .bcn-piece__frame img,
  .atelier-collection .bcn-piece__frame:hover img{transition:none;transform:none}
}

/* ---- the darkened ground is its own design, not the light one inverted ---- */
[data-theme="dark"] .wp-element-button,
[data-theme="dark"] .wp-block-button__link{background:var(--ink);color:var(--paper)}
[data-theme="dark"] .is-style-outline .wp-block-button__link{
  background:transparent;color:var(--ink);border-color:var(--rule);
}
/* Graphite on white carries its own light; on a dark ground a drop shadow does
   nothing, so the lift comes from a held edge instead. */
[data-theme="dark"] .atelier-lead__frame,
[data-theme="dark"] .atelier-collection .bcn-piece__frame{
  box-shadow:0 0 0 1px rgba(255,250,240,.07), 0 40px 90px -60px rgba(0,0,0,.9);
}
/* A wash meant for warm paper turns to sludge on charcoal; it lightens instead. */
[data-theme="dark"] .atelier-collection .bcn-piece__frame::after,
[data-theme="dark"] .atelier-lead__frame::after{mix-blend-mode:screen;opacity:0}

/* The toggle arrives carrying the parent's violet; it speaks in ink here. */
#themeToggle{background:transparent;border:1px solid var(--rule);color:var(--ink)}
#themeToggle:hover,#themeToggle:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* The canvas template makes no allowance for a header that floats over the
   page, so every page it renders opens with room for one. The header stacks on
   a phone, which costs more. */
.wp-site-blocks > main{padding-top:clamp(7rem,11vw,9.5rem)}
@media (max-width:781px){ .wp-site-blocks > main{padding-top:11rem} }

/* The language pills arrive in the parent's violet. */
.lang-switch .lang-pill{background:transparent;color:var(--pencil);border:1px solid transparent}
.lang-switch .lang-pill.on{background:var(--ink);color:var(--paper)}
.lang-switch .lang-pill:hover,.lang-switch .lang-pill:focus-visible{border-color:var(--rule);color:var(--ink)}

/* ---- reachable by keyboard, and visibly so ---- */
.atelier-collection .bcn-piece__frame:focus-visible,
a:focus-visible,button:focus-visible{
  outline:2px solid var(--sage);
  outline-offset:3px;
}
.atelier-form input:focus-visible,
.atelier-form select:focus-visible,
.atelier-form textarea:focus-visible{
  outline:2px solid var(--sage);outline-offset:2px;
}

/* Clinical labels stay small, but not smaller than they can be read. */
.label{font-size:.7rem}
.atelier-collection .bcn-piece__facts,
.atelier-collection .bcn-piece__offer--closed{font-size:.68rem}
.atelier-lead__slip{font-size:.7rem}

/* ---- the form sits on the table, not on a card ---- */
.atelier-form .bf,
.atelier-form form{
  background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0;
}
/* Field names are clinical labels; a consent sentence is a sentence. */
.atelier-form label:has(input[type=checkbox]),
.atelier-form .bf-check{
  font-size:.94rem;letter-spacing:0;text-transform:none;color:var(--pencil);
}
.atelier-form input[type=file]{color:var(--pencil)}
.atelier-form .bf-actions .btn,
.atelier-form button[type=submit]{
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:999px;
  padding:.9rem 1.8rem;letter-spacing:.02em;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.atelier-form .bf-actions .btn:hover,
.atelier-form button[type=submit]:hover{background:transparent;color:var(--ink)}
/* WordPress's constrained layout centres every direct child with !important, so
   matching that weight is the only way to say anything about this wrapper. */
.atelier-form .bf-wrap{
  margin-left:auto !important;margin-right:auto !important;
  /* WordPress hands this wrapper the section's content width, which on the home
     page is the wide measure — long enough that a line of type in a field runs
     past comfortable reading. A form is read, so it keeps a form's measure. */
  max-width:min(840px, 100%);
  padding-inline:clamp(0px, 4vw, 1.5rem);
}

/* The artist's photograph is held the same way her work is. */
.atelier-studio{--wp--style--global--content-size:var(--wp--style--global--wide-size)}
.atelier-portrait img{
  border-radius:0;
  box-shadow:0 2px 3px rgba(25,23,19,.04),0 54px 100px -60px rgba(25,23,19,.5);
}

/* The archive prints a publication date; for a piece that date is when it was
   catalogued, not when it was drawn, so it is not shown as if it were. */
.post-type-archive-beacon_artwork .wp-block-post-date,
.tax-beacon_medium .wp-block-post-date,
.tax-beacon_subject .wp-block-post-date{display:none}

/* ---- the entrance ----
   Beacon already observes .reveal and stands down for reduced motion; only the
   temperature is changed here. Things arrive slowly, settle, and stay put. */
.atelier-mast .reveal,
.atelier-collection .bcn-piece.reveal{
  --t-reveal:var(--reveal-ms,1150ms);
  --stagger:.11s;
  transition-timing-function:var(--ease);
}
/* A shorter distance than the parent's: work should settle, not slide in. */
.atelier-collection .bcn-piece.reveal{transform:translateY(14px)}
.atelier-collection .bcn-piece.reveal.in{transform:none}
.atelier-lead.reveal{transform:translateY(18px)}
.atelier-lead.reveal.in{transform:none}

/* The parent theme draws a border on every figure. Now that each piece hangs in
   a real frame, that inherited edge boxes the caption in with the picture. */
.atelier-collection .bcn-piece{border:0;padding:0;background:none}

/* ---- the wash belongs to the mount, never to the work ----
   The picture sits above the colour, so the stream of graphite shows only in the
   margin around it. Nothing ever tints the drawing itself. */
.atelier-collection .bcn-piece__frame img,
.atelier-lead__frame img{position:relative;z-index:1}
.atelier-collection .bcn-piece__frame::after,
.atelier-lead__frame::after{z-index:0}

/* The hero is a figure too, so the parent theme's dark edge lands on it. */
.atelier-lead,
.atelier-lead figure{border:0;padding:0;background:none}

/* ---- hung like a wall ----
   Every piece gets the same mount and the same baseline, so the eye reads a
   hang rather than a drift. Cleaner, and it lets the work differ instead of
   the layout. */
.atelier-collection .bcn-piece:nth-child(3n+2),
.atelier-collection .bcn-piece:nth-child(3n){margin-top:0}
.atelier-collection.bcn-collection{align-items:stretch}
.atelier-collection .bcn-piece{display:flex;flex-direction:column}
/* A frame is cut to its picture. Forcing one shape on every piece crops the
   wide work into a tall mount and reads as a template, not a frame. */
.atelier-collection .bcn-piece__frame{width:100%;display:block}
.atelier-collection .bcn-piece__frame img{display:block;width:100%;height:auto}

/* ---- graphite in the air ----
   Four strokes, drawn not pictured, drifting far behind everything. They are
   decoration and carry no meaning, so they are hidden from assistive tech and
   stand down completely when less motion is asked for. */
.atelier-drift{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.atelier-drift svg{
  position:absolute;color:var(--pencil);opacity:0;
  will-change:transform,opacity;
}
.atelier-drift svg:nth-child(1){left:6%; width:132px; animation:drift-a var(--drift-seconds,34s) var(--ease) infinite}
.atelier-drift svg:nth-child(2){left:71%;width:96px;  animation:drift-b calc(var(--drift-seconds,34s) * 1.2) var(--ease) infinite;animation-delay:calc(var(--drift-seconds,34s) * .18)}
.atelier-drift svg:nth-child(3){left:38%;width:74px;  animation:drift-a calc(var(--drift-seconds,34s) * 1.38) var(--ease) infinite;animation-delay:calc(var(--drift-seconds,34s) * .38)}
.atelier-drift svg:nth-child(4){left:88%;width:110px; animation:drift-b calc(var(--drift-seconds,34s) * 1.12) var(--ease) infinite;animation-delay:calc(var(--drift-seconds,34s) * .62)}

@keyframes drift-a{
  0%   {transform:translate3d(0,108vh,0) rotate(-8deg);  opacity:0}
  14%  {opacity:var(--drift-opacity,.16)}
  82%  {opacity:calc(var(--drift-opacity,.16) * .62)}
  100% {transform:translate3d(4vw,-30vh,0) rotate(14deg); opacity:0}
}
@keyframes drift-b{
  0%   {transform:translate3d(0,112vh,0) rotate(10deg);  opacity:0}
  18%  {opacity:calc(var(--drift-opacity,.16) * .82)}
  80%  {opacity:calc(var(--drift-opacity,.16) * .5)}
  100% {transform:translate3d(-6vw,-26vh,0) rotate(-12deg); opacity:0}
}
@media (prefers-reduced-motion:reduce){ .atelier-drift{display:none} }

/* ---- the hero's light ----
   A wide, soft field lit by three colours taken from the collection itself. It
   sits behind everything, moves slowly enough to read as light rather than
   animation, and holds no colour of its own. */
.atelier-mast{position:relative;isolation:isolate}
.atelier-glow{
  position:absolute;inset:-10% -4% auto;height:118%;z-index:-1;pointer-events:none;
  filter:blur(var(--glow-blur,70px));opacity:var(--glow-opacity,.3);
  background:
    radial-gradient(38% 52% at 14% 32%, var(--glow-1,transparent) 0%, transparent 68%),
    radial-gradient(34% 46% at 62% 18%, var(--glow-2,transparent) 0%, transparent 70%),
    radial-gradient(42% 56% at 86% 66%, var(--glow-3,transparent) 0%, transparent 72%);
  animation:atelier-breathe var(--glow-seconds,26s) ease-in-out infinite alternate;
}
[data-theme="dark"] .atelier-glow{opacity:.24;filter:blur(84px)}
@keyframes atelier-breathe{
  0%   {transform:translate3d(0,0,0) scale(1)}
  100% {transform:translate3d(-2%,1.5%,0) scale(1.07)}
}

/* Thin strokes that surface and withdraw, never travelling far. */
.atelier-hand{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atelier-hand svg{position:absolute;color:var(--pencil);opacity:0;width:190px}
.atelier-hand svg{animation:atelier-surface var(--stroke-seconds,19s) var(--ease) infinite}
.atelier-hand svg:nth-child(1){left:52%;top:8%}
.atelier-hand svg:nth-child(2){left:78%;top:46%;width:150px;animation-delay:calc(var(--stroke-seconds,19s) * .37)}
.atelier-hand svg:nth-child(3){left:64%;top:72%;width:120px;animation-delay:calc(var(--stroke-seconds,19s) * .68)}
@keyframes atelier-surface{
  0%,100% {opacity:0;    transform:translateY(10px)}
  22%     {opacity:var(--stroke-opacity,.2); transform:translateY(0)}
  62%     {opacity:calc(var(--stroke-opacity,.2) * .65)}
}
@media (prefers-reduced-motion:reduce){
  .atelier-glow{animation:none}
  .atelier-hand{display:none}
}

/* ---- placeholders ----
   A prompt, not a label: pencil tone, faded well back, so an empty field reads
   as empty. The toolkit styles its own inputs, so this has to match its weight. */
.bf .bf-field input::placeholder,
.bf .bf-field textarea::placeholder,
.atelier-form input::placeholder,
.atelier-form textarea::placeholder{
  color:var(--pencil) !important;
  opacity:.42 !important;
  font-style:italic;
}
.atelier-form input,
.atelier-form textarea,
.atelier-form select{color:var(--ink)}

/* ---- focus ----
   A mouse click leaves no ring. A keyboard visitor always gets one:
   :focus-visible fires for keyboard and assistive navigation only, so the
   contour disappears on click without stranding anyone who cannot use a mouse.
   The toolkit rings its own fields, so these have to outweigh it. */
*:focus:not(:focus-visible),
.bf .bf-field input:focus:not(:focus-visible),
.bf .bf-field textarea:focus:not(:focus-visible),
.bf .bf-field select:focus:not(:focus-visible),
.bf .bf-actions .btn:focus:not(:focus-visible),
.wp-element-button:focus:not(:focus-visible){
  outline:none !important;
  box-shadow:none !important;
}

/* Text fields match :focus-visible even when clicked — that is by specification,
   because they take keyboard input. So the contour cannot simply be dropped for
   the mouse without dropping it for the keyboard too. Instead the heavy ring is
   replaced by the atelier's own mark: the rule under the field darkens to ink.
   Focus stays plainly visible; the box around it does not. */
.bf input:focus,
.bf textarea:focus,
.bf select:focus,
.atelier-form input:focus,
.atelier-form textarea:focus,
.atelier-form select:focus{
  outline:none !important;
  box-shadow:none !important;
  border-color:var(--ink) !important;
}
.bf input::placeholder,
.bf textarea::placeholder,
.atelier-form input::placeholder,
.atelier-form textarea::placeholder{
  color:var(--pencil) !important;
  opacity:.42 !important;
  font-style:italic;
}

/* ---- commissioning is its own room ----
   The estimate and the order form read as one task, so the section is lifted
   onto a full-width plane that fades away at its edges rather than sitting in a
   box. Same light as a gallery wall, so the two belong to one building. */
#commission{position:relative;isolation:isolate}
#commission::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,253,248,.62) 12%,
    rgba(255,253,248,.62) 88%,
    transparent 100%);
}
[data-theme="dark"] #commission::before{
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,250,240,.045) 12%,
    rgba(255,250,240,.045) 88%,
    transparent 100%);
}
.atelier-estimate{margin-inline:0 auto}

/* ---- the hero slide ----
   Pieces crossfade in place, held by the same frame. How many and how long are
   settings; nothing about the cycle is decided here. A single piece simply
   never advances. */
.atelier-lead{position:relative;width:fit-content;max-width:100%}
.atelier-lead[data-slide-count]{display:grid}
.atelier-lead[data-slide-count="1"] .atelier-lead__frame{animation:none;opacity:1}
.atelier-lead:not([data-slide-count="1"]) .atelier-lead__frame,
.atelier-lead:not([data-slide-count="1"]) .atelier-lead__caption{
  opacity:0;
  transition:opacity calc(var(--hero-interval,7s) * .22) var(--ease);
}
.atelier-lead .atelier-lead__frame.is-on,
.atelier-lead .atelier-lead__caption.is-on{opacity:1}

/* The mount is cut to the picture showing, and grows or narrows into the next
   one rather than holding one shape and leaving mat around the smaller work. */
/* Each mount is cut to its own picture, so no piece sits in another's shape and
   none leaves mat around itself. Only opacity animates: a size that animates is
   a size the whole document must re-lay out, which is what made the page
   tremble. The column already reserves the tallest slide, so the swap moves
   nothing. */
.atelier-lead[data-slide-count]{height:100%;display:grid;grid-template-rows:1fr auto}
.atelier-lead__frame{
  grid-area:1/1;
  align-self:center;justify-self:start;
  width:auto;height:auto;max-height:100%;max-width:100%;
}
.atelier-lead__slip{grid-area:2/1;align-self:end}
.atelier-lead__frame img{
  width:100%;height:100%;object-fit:contain;max-height:none;
}
@media (prefers-reduced-motion:reduce){
  .atelier-lead[data-slide-count]{transition:none}
}
.atelier-lead__caption{grid-area:1/1}
.atelier-lead__slip{display:grid;position:relative}
@media (prefers-reduced-motion:reduce){
  .atelier-lead .atelier-lead__frame,
  .atelier-lead .atelier-lead__caption{animation:none;opacity:0}
  .atelier-lead .atelier-lead__frame.is-first,
  .atelier-lead .atelier-lead__caption[data-slide="0"]{opacity:1}
}

/* The chosen language sits on an ink pill in light and a paper-toned one in
   dark; the parent theme paints its label white either way, which vanishes on
   the dark scheme's light pill. The label follows the pill instead. */
.lang-switch .lang-pill.on,
.lang-switch a.lang-pill.on,
.lang-switch button.lang-pill.on{
  background:var(--ink) !important;
  color:var(--paper) !important;
}

/* ---- nothing may widen the page ----
   The glow bleeds past the hero's sides on purpose, and on a phone that 4% is
   enough to make the document wider than the screen: the browser then zooms out
   and every full-bleed section lands on a different edge. The decorative layers
   are clipped where they live, and the page itself refuses to scroll sideways. */
html{overflow-x:clip}
.atelier-mast{overflow-x:clip}
.atelier-drift,.atelier-hand,.atelier-glow{max-width:100vw}

/* The hero's own box is the only thing allowed to change size while a slide
   turns, and its paint is isolated so the resize never re-rasterises the page
   around it. */
.atelier-mast__work{display:flex;align-items:center}
.atelier-lead[data-slide-count]{contain:layout paint}
.atelier-lead__frame{will-change:opacity}
.atelier-lead__frame{backface-visibility:hidden}

/* ---- the opening signature ----
   Drawn, then gone. The stroke length is measured by the browser, so any path a
   studio supplies writes itself correctly without being measured by hand. */
.atelier-intro{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;gap:.9rem;
  background:var(--paper);color:var(--ink);
  animation:atelier-intro-out var(--intro-ms,2600ms) var(--ease) forwards;
}
.atelier-intro__hand{width:min(46vw,320px);height:auto}
.atelier-intro__hand path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:atelier-write calc(var(--intro-ms,2600ms) * .62) var(--ease) forwards;
}
.atelier-intro__hand path:nth-child(2){animation-delay:calc(var(--intro-ms,2600ms) * .22)}
.atelier-intro__name{
  margin:0;font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1rem,2vw,1.4rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--pencil);opacity:0;
  animation:atelier-intro-name calc(var(--intro-ms,2600ms) * .4) var(--ease) forwards;
  animation-delay:calc(var(--intro-ms,2600ms) * .45);
}
@keyframes atelier-write{to{stroke-dashoffset:0}}
@keyframes atelier-intro-name{to{opacity:1}}
@keyframes atelier-intro-out{
  0%,72%  {opacity:1;visibility:visible}
  100%    {opacity:0;visibility:hidden}
}
@media (prefers-reduced-motion:reduce){ .atelier-intro{display:none} }

/* ---- the footer belongs to the same room ----
   It arrived in the parent's navy, with ink text on it in light and a blue-black
   ground in dark. The doctrine this site is written to uses warm charcoal and
   never blue-black, so the footer is retoned to the atelier's own surface. */
footer,
.wp-block-template-part footer,
footer.wp-block-group{
  background:var(--leaf) !important;
  color:var(--pencil) !important;
  border-top:1px solid var(--rule);
}
footer a,footer h2,footer h3,footer strong,footer .h{color:var(--ink) !important}
footer a:hover,footer a:focus-visible{color:var(--sage) !important}
[data-theme="dark"] footer,
[data-theme="dark"] .wp-block-template-part footer,
[data-theme="dark"] footer.wp-block-group{
  background:var(--leaf) !important;
  color:var(--pencil) !important;
}

/* The footer grid takes its colour from the mega-footer block rather than the
   page tokens, so it has to be named directly. */
.fgrid,.fgrid p,.fgrid li,.fgrid span{color:var(--pencil)}
.fgrid a,.fgrid h2,.fgrid h3,.fgrid strong,.fgrid b{color:var(--ink)}
.fgrid a:hover,.fgrid a:focus-visible{color:var(--sage)}
.u-32{color:var(--pencil)}

/* The footer re-declares --text and --muted as cold literals inside itself and
   mixes navy into its own background, so nothing set at the root can reach it.
   The overrides have to live at the same depth. */
html[data-theme="light"] footer:has(.fgrid) .fgrid,
html[data-theme="dark"] footer:has(.fgrid) .fgrid,
html footer:has(.fgrid) .fgrid{
  --text:var(--ink);
  --muted:var(--pencil);
  color:var(--pencil);
}
html footer:has(.fgrid){
  background:var(--leaf);
  border-top:1px solid var(--rule);
}
html footer:has(.fgrid) .fgrid a{color:var(--ink);opacity:1}
html footer:has(.fgrid) .fgrid a:hover,
html footer:has(.fgrid) .fgrid a:focus-visible{color:var(--sage)}
/* Each footer child re-declares the cold tokens for itself, so inheriting from
   the container is not enough — every descendant has to be told. */
html footer:has(.fgrid),
html footer:has(.fgrid) *{
  --text:var(--ink);
  --muted:var(--pencil);
}
html footer:has(.fgrid) .foot-bottom{color:var(--pencil)}
html footer:has(.fgrid) .foot-bottom a{color:var(--pencil)}
html footer:has(.fgrid) .foot-bottom a:hover{color:var(--ink)}
/* The parent scopes these with [data-theme="…"] footer:has(.fgrid) .x — three
   class-level parts. An html prefix alone loses on that count, so the attribute
   has to be carried here too. */
html[data-theme] footer:has(.fgrid) .fgrid,
html[data-theme] footer:has(.fgrid) .foot-bottom,
html[data-theme] footer:has(.fgrid) .foot-bottom p{
  --text:var(--ink);
  --muted:var(--pencil);
  color:var(--pencil);
}
html[data-theme] footer:has(.fgrid) .fgrid a{color:var(--ink)}
html[data-theme] footer:has(.fgrid) .foot-bottom a{color:var(--pencil)}

/* ---- the form sits in the middle of the page ----
   The section is full width so its background can run edge to edge, which left
   the form itself hard against the left margin with half the page empty beside
   it. The band stays full width; only what you read is centred. */
.atelier-form > .bf,
.atelier-form > *:not(.bf){
  max-width:var(--wp--style--global--content-size, 860px);
  margin-inline:auto;
}
.atelier-form .bf-grid{max-width:none}

/* ---- one piece, on its own page ----
   Hung in the same frame the collection uses, so a piece looks the same whether
   it is on the wall or on its own. */
.atelier-single{padding-block:clamp(2.5rem,6vw,5rem)}
.atelier-single__inner{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  max-width:var(--wp--style--global--wide-size,1240px);margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2rem);
}
@media (max-width:860px){ .atelier-single__inner{grid-template-columns:minmax(0,1fr)} }
.atelier-single__price{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink);margin:0 0 1.2rem;
}
.atelier-single__piece{margin:0}
.atelier-single__frame{
  position:relative;display:block;overflow:hidden;
  padding:var(--frame-mat,0);
  background:var(--frame-mat-color,transparent);
  border:var(--frame-border,0) solid var(--frame-border-color,transparent);
  border-radius:var(--frame-radius,0);
  box-shadow:0 2px 3px rgba(25,23,19,.04),
    0 calc(var(--frame-lift,60px) * 1.4) calc(var(--frame-lift,60px) * 2) calc(var(--frame-lift,60px) * -1.4) rgba(25,23,19,.45);
}
.atelier-single__frame::before{
  content:"";position:absolute;inset:calc(var(--frame-mat,0px) - var(--frame-inner,0px));
  border:var(--frame-inner,0) solid var(--frame-inner-color,transparent);pointer-events:none;
}
.atelier-single__frame img{display:block;width:100%;height:auto}
.atelier-single__title{
  font-size:clamp(1.9rem,3vw,2.8rem);font-weight:300;letter-spacing:-.02em;margin:.4rem 0 0;
}
.atelier-single__facts{
  margin:1.1rem 0 1.6rem;color:var(--pencil);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
}
.atelier-single__back{
  color:var(--pencil);font-size:.9rem;border-bottom:1px solid var(--rule);
}
.atelier-single__back:hover{color:var(--ink)}

/* ---- a plain page reads on the same measure as everything else ----
   The post content area is unconstrained here, so a heading typed straight into
   a page ran the full width of the window while the form beneath it sat centred
   — the two looked like they belonged to different pages. Anything explicitly
   aligned wide or full keeps its own width. */
.entry-content > *:not(.alignfull):not(.alignwide):not(.atelier-form):not(.atelier-collection){
  max-width:var(--wp--style--global--content-size, 760px);
  margin-inline:auto;
}

/* ---- the checkout belongs to the same room ----
   WooCommerce's blocks paint their own white fields with dark text, which ignores
   the scheme entirely: on the dark theme the floating labels are drawn in the
   page's light text over a white box and cannot be read at all. Every surface
   here is taken from the atelier's tokens so the checkout is simply the site,
   asking for an address. */
.wc-block-checkout, .wc-block-cart, .woocommerce{ color:var(--ink) }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-address-form input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"]{
  background:color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color:var(--ink) !important;
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius:10px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-form input:focus{
  background:var(--paper) !important;
  border-color:var(--sage) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 22%, transparent) !important;
  outline:none !important;
}
/* The label floats inside the field, so it has to read against the field. */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label,
.wc-block-components-text-input.is-active label{
  color:var(--pencil) !important;
}
.wc-block-components-text-input input::placeholder,
.wc-block-components-form input::placeholder{ color:var(--pencil) !important; opacity:.85 }

.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-panel,
.wc-block-components-totals-wrapper{
  background:var(--leaf);
  border-color:var(--rule) !important;
  color:var(--ink);
}
.wc-block-components-totals-item__label,
.wc-block-components-product-metadata,
.wc-block-components-product-details{ color:var(--pencil) }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ color:var(--ink) }

.wc-block-components-button:not(.is-link){
  background:var(--ink) !important;
  color:var(--paper) !important;
  border:1px solid var(--ink) !important;
  border-radius:999px !important;
}
.wc-block-components-button:not(.is-link):hover{
  background:transparent !important;
  color:var(--ink) !important;
}
/* Notices arrive with their own pale backgrounds and inherit the page's text
   colour, which on the dark scheme is light-on-pink and unreadable. The status
   colour stays on the edge where it still signals; the words sit on the room. */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info{
  border-radius:10px;
  background:color-mix(in srgb, var(--ink) 5%, var(--paper)) !important;
  color:var(--ink) !important;
}
.wc-block-components-notice-banner > svg{ fill:currentColor }
.wc-block-components-notice-banner.is-error{ border-left:3px solid #B4453C }
.wc-block-components-notice-banner.is-success{ border-left:3px solid var(--sage) }

/* An address is one long unbreakable word to a browser; without this it runs
   past the column it was given and is clipped. */
.fgrid a[href^="mailto"], .fgrid a[href^="tel"]{ overflow-wrap:anywhere }

/* Her own three lines. Set as a list because that is what they are, without the
   rosette she bullets them with elsewhere — an emoji marker reads as a social
   post, and these are the first words on an artist's page. */
.atelier-intro-list{
  list-style:none;margin:.2rem 0 1.6rem;padding:0;
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--pencil);
}
.atelier-intro-list li{margin:.15rem 0;padding-left:1.1rem;position:relative}
.atelier-intro-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.5rem;height:1px;background:var(--rule);
}
.atelier-portrait{margin:0}