/* Landark Studio — landarkstudio.com
   One stylesheet for the whole site. Palette and rules follow landark-standards.md.

   Fonts are self-hosted and declared here rather than in a separate file, because
   on a metered mobile connection an extra request costs a round trip, not bytes.
   Latin subset, regular weight only — nothing on this site is set in 500 or italic.
   Adding either means adding the matching woff2, or the browser fakes it.

   The single weight is not a limitation to work around. Hierarchy comes from size,
   space and rule weight, which is how a drawing sheet works too. */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/spectral-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#1B1A17; --bone:#F2EEE6; --terra:#A85434;
  --stone-on-bone:#6C6961;      /* 4.74:1 on bone */
  --stone-on-ink:#8E8A7F;       /* 5.05:1 on ink  */

  /* Colour carries one meaning on this site: which discipline did the work.
     That is the practice's own organising idea, so the palette says something
     rather than decorating. Every accent is declared twice, once dark enough
     to set as text on bone and once light enough to set on walnut, because a
     single value cannot clear 4.5:1 on both grounds.

       walnut   the warm dark ground under reversed bands (Aspelin Reitan)
       foliage  landscape, after IDHEAL's olive, which it uses for planting
       terra    architecture — the identity's own terracotta, unchanged
       ochre    interiors, the readable weight of Aspelin's amber

     Each is pushed as far into saturation as 4.5:1 on its own ground allows,
     because at 13px a desaturated accent just reads as grey. Measured:
     foliage 5.2:1, terra 4.6:1, ochre 5.0:1 on bone; leaf 8.9:1, clay 6.5:1,
     amber 13.4:1 on walnut. Terracotta is the identity's and is not retuned. */
  --walnut:#26190F;
  --foliage:#2C7030; --ochre:#8A5D00;         /* set on bone   */
  --leaf:#9CC96F;    --clay:#E08A5F;  --amber:#FEE197;  /* set on walnut */
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Spectral',Georgia,serif;
  --gut:20px;
  --bay:72px;                   /* the gallery-walk gap between sections */

  /* the arrow is drawn, not typed: U+2192 sits outside the subset we ship,
     so a glyph would silently fall back to the system font */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 4h17.5M14 .8L17.7 4 14 7.2' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

/* --- ground rules -----------------------------------------------------------
   Two grounds, bone and ink, and one set of reversal rules from the standard:
   on ink the line goes bone, terracotta does not appear at all, and stone
   reverts to #8E8A7F. Those rules are declared once here and then simply
   swapped, so a dark band inside a light page and a light page in dark mode
   are the same rule applied twice rather than two palettes to maintain. */

:root,
.reverse .reverse{
  --bg:var(--bone); --fg:var(--ink);
  --line:var(--terra); --accent:var(--terra);
  --muted:var(--stone-on-bone);
  --hair:rgba(27,26,23,.15);
  --ph:#CFCAC0;
  --d-landscape:var(--foliage); --d-architecture:var(--terra); --d-interiors:var(--ochre);
}
/* Bands take walnut rather than flat ink: it is a ground you are meant to
   look at, not read a page on. The line still goes bone, as the standard
   requires. Terracotta stays off dark — clay is the accent's dark-ground
   member, not terracotta moved somewhere it cannot hold contrast. */
.reverse{
  --bg:var(--walnut); --fg:var(--bone);
  --line:var(--bone); --accent:var(--amber);
  --muted:var(--stone-on-ink);
  --hair:rgba(242,238,230,.2);
  --ph:#33251A;                 /* the empty image box, tinted to the ground */
  --d-landscape:var(--leaf); --d-architecture:var(--clay); --d-interiors:var(--amber);
}
@media (prefers-color-scheme:dark){
  /* Reading at night stays on ink rather than walnut — neutral is easier to
     read a page on, and walnut is reserved for the bands you look at. */
  :root{
    --bg:var(--ink); --fg:var(--bone);
    --line:var(--bone); --accent:var(--amber);
    --muted:var(--stone-on-ink);
    --hair:rgba(242,238,230,.2);
    --ph:#38352F;
    --d-landscape:var(--leaf); --d-architecture:var(--clay); --d-interiors:var(--amber);
  }
  .reverse{
    --bg:var(--bone); --fg:var(--ink);
    --line:var(--terra); --accent:var(--terra);
    --muted:var(--stone-on-bone);
    --hair:rgba(27,26,23,.15);
    --ph:#CFCAC0;
    --d-landscape:var(--foliage); --d-architecture:var(--terra); --d-interiors:var(--ochre);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:10;background:var(--bg);color:var(--fg);padding:8px 12px;border:1px solid var(--fg)}

/* horizontal only — the shorthand would zero the vertical padding that
   figcaption, section and footer set for themselves */
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.col{max-width:660px}
.rule{height:2px;background:var(--line);border:0;margin:0}
.hair{height:1px;background:var(--hair);border:0;margin:0}

/* a band carries its own ground the full width of the viewport while its
   contents stay on the page grid */
.band{background:var(--bg);color:var(--fg);padding:var(--bay) 0}
/* the band already sets the gap below itself; the caption should not add a
   second one and leave the drawing floating in the middle of the ground */
.band figcaption{padding-bottom:0}
.band>figure:last-child{margin-bottom:0}

/* pulls a figure out of .wrap and back to the viewport edges */
.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}

/* the logotype stands on the header line, as it does on the letterhead */
.head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
      row-gap:10px;gap:16px;padding-top:18px;padding-bottom:10px}
.head a{color:var(--fg)}
/* the wordmark is the home link, and without this it is the only thing on the
   bar that does not answer the cursor -- which is what makes people miss it */
.head>a:hover{color:var(--accent)}
.head svg{display:block;width:104px;height:auto}
nav{display:flex;gap:16px;font-size:13px;line-height:1}
nav a{color:var(--fg);text-decoration:none;padding-bottom:3px;border-bottom:1.5px solid transparent}
nav a:hover{color:var(--accent)}
nav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}

/* --- type -------------------------------------------------------------------
   The scale is deliberately long. A masthead at 118px against a 12px label is
   the whole hierarchy, and it is what stops a single weight reading as flat. */

h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,8vw,64px);line-height:1.06;
   letter-spacing:-.015em;margin:32px 0 14px}
.mast{font-family:var(--serif);font-weight:400;font-size:clamp(44px,10.5vw,118px);line-height:.98;
      letter-spacing:-.022em;margin:34px 0 26px;max-width:15ch}
.lede,.stand{font-family:var(--serif);line-height:1.5;color:var(--fg)}
.lede{font-size:20px;margin:26px 0 30px;max-width:34ch}
.stand{font-size:17px;line-height:1.6;margin:22px 0 10px;max-width:52ch}
h2,.sec{font-size:12px;letter-spacing:1.6px;color:var(--muted);font-weight:400;margin:0 0 12px;text-transform:uppercase}
.body,p.body{font-family:var(--serif);font-size:16px;line-height:1.65;margin:0 0 18px;max-width:62ch}
section{padding-bottom:var(--bay)}

/* Prose is justified, so both edges of the column are straight and only the
   last line of each paragraph runs short. Hyphenation is not optional here:
   without it a justified 62-character measure opens gaps between words wide
   enough to see as rivers down the page, and it gets worse the narrower the
   screen. The browser needs lang="en" on <html> to hyphenate, which it has.
   The limits stop it breaking short words or leaving two letters stranded. */
.body,p.body,.stand{
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}

/* Inline links inside prose. Every other link on this site is a whole block
   with its own class, so nothing was styling a plain <a> in a paragraph and it
   fell through to the browser's blue. The underline stays: inside a sentence
   the colour alone is not enough to mark a link, and on a band the accent is
   amber, which needs the line more than terracotta does. */
.body a,.lede a,.stand a,address a{color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.body a:hover,.lede a:hover,.stand a:hover,address a:hover{text-decoration-thickness:2px}

/* title block: name above the line, record below — same as the A3 sheet */
.block{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:18px 0 30px;margin:0}
.block dt{font-size:12px;color:var(--muted);margin-bottom:3px}
.block dd{font-size:13px;margin:0}
.block a{color:var(--accent);text-decoration:none}

/* Images carry width and height so the page does not jump while they load.
   Nothing here sets an aspect ratio — the attributes on the element do it. */
img{display:block;width:100%;height:auto;background:var(--ph)}

figure{margin:0}
figcaption{font-size:12px;color:var(--muted);padding-top:10px;padding-bottom:var(--bay)}
.legend{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 12px}
.seclabels{display:none}

/* Section labels sit centred over their own leader lines. Below the width
   where they stop clearing each other, the inline legend takes over. */
@media (min-width:1060px){
  .seclabels{display:block;position:relative;height:18px;line-height:18px;margin:0 0 8px;font-size:12px;color:var(--muted)}
  .seclabels span{position:absolute;bottom:0;white-space:nowrap;transform:translateX(-50%)}
  .seclabels span.l0{left:0;transform:none}
  .seclabels+.legend{display:none}
}
.capline{display:flex;justify-content:space-between;gap:16px}
.ref{font-family:var(--mono)}
/* on a band the drawing number is the one chromatic mark on the whole ground */
.band .ref{color:var(--accent)}

/* photographs bottom-align. ragged tops, shared ground.
   do not change flex-end to flex-start — see landark-standards.md */
.pair{display:flex;align-items:flex-end;gap:16px}
.pair>*{flex:1 1 0;min-width:0}
.pair>.wide{flex-grow:1.4}

/* An even pair: two photographs carrying equal weight instead of one leading.
   The shared ratio makes them the same box whatever the renders arrive at, so
   both read at a glance and neither looks like the afterthought. The bottom
   edges still align, they just align level. cover crops, it never distorts. */
.pair.even>.wide{flex-grow:1}
.pair.even img{aspect-ratio:16/9;height:auto;object-fit:cover}

.two{display:grid;grid-template-columns:1fr;gap:26px}
.plan svg,.section svg{display:block;width:100%;height:auto;color:var(--fg)}


/* Each discipline keeps its colour wherever it is named — in the filters, in
   the catalogue column, on the card meta and in the project title block. It is
   the only thing colour is allowed to mean here, which is what stops three
   accents reading as decoration. */
.dl{color:var(--d-landscape)}
.da{color:var(--d-architecture)}
.di{color:var(--d-interiors)}

.filters{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;padding:18px 0 6px}
.filters a,.filters button{font:inherit;background:none;border:0;padding:0 0 3px;color:var(--muted);
  cursor:pointer;text-decoration:none;border-bottom:1.5px solid transparent}
.filters a:hover,.filters button:hover{color:var(--fg)}
.filters a[aria-current],.filters button[aria-current]{color:var(--fg);border-bottom-color:var(--line)}
/* a filter is a discipline, so it carries the discipline's colour when live */
.filters [data-filter="landscape"][aria-current],.filters a[href*="landscape"][aria-current]{
  color:var(--d-landscape);border-bottom-color:var(--d-landscape)}
.filters [data-filter="architecture"][aria-current],.filters a[href*="architecture"][aria-current]{
  color:var(--d-architecture);border-bottom-color:var(--d-architecture)}
.filters [data-filter="interiors"][aria-current],.filters a[href*="interiors"][aria-current]{
  color:var(--d-interiors);border-bottom-color:var(--d-interiors)}
.count{font-size:12px;color:var(--muted);padding-bottom:6px}

/* --- the index --------------------------------------------------------------
   A catalogue, not a card list: column headings, hairline rows, the year set in
   mono so the column reads as a column. Nothing is filled and nothing is boxed.
   The arrow is the only interactive ornament, and hover moves it rather than
   recolouring the row. */

.index,.list{padding-bottom:var(--bay)}

.idxhead{display:none}


/* A visually hidden label. The discipline marks in the matrix are dots to the
   eye; a screen reader needs the word. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The seven projects against the three disciplines. The page claims the
   practice holds all three; this is the claim shown rather than asserted. */
/* The stages a commission runs through: the name, and what it produces. */
.stages{margin:6px 0 20px;padding:0}
.stages dt{font-family:var(--sans);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding-top:15px;border-top:1px solid var(--hair)}
.stages dd{margin:5px 0 15px;font-family:var(--serif);font-size:16px;line-height:1.55;max-width:62ch}

.matrix{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 14px}
.matrix th,.matrix td{padding:11px 8px 11px 0;border-bottom:1px solid var(--hair);text-align:left;font-weight:400}
.matrix thead th{font-family:var(--sans);font-size:9px;letter-spacing:0;text-transform:uppercase;color:var(--muted);white-space:nowrap;vertical-align:bottom}
.matrix tbody th{font-family:var(--serif);font-size:14px}
.matrix th+th,.matrix td{text-align:center}
.matrix tbody th{text-align:left;width:auto}
.matrix .m{font-size:15px;line-height:1}
.matrix tfoot th,.matrix tfoot td{border-bottom:0;color:var(--muted);font-size:12px;font-family:var(--sans)}

.item{display:block;text-decoration:none;color:inherit;padding:18px 0;border-top:1px solid var(--hair)}
.item:last-child{border-bottom:1px solid var(--hair)}
.item h2,.item h3,.item .t{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;
  margin:0 0 4px;letter-spacing:0;color:var(--fg);text-transform:none}
.item p,.item .l,.item .d,.item .y{font-size:12px;color:var(--muted);margin:0}
.item .y{font-family:var(--mono)}
/* Narrow, there are no columns to align to, so the cells run back together on
   one line with the separator the rest of the site uses. The wide block below
   removes these once the row becomes a real four-column row. */
.item .l::after,.item .d::after{content:" · "}
.item[hidden]{display:none}
.item:hover .t,.item:hover h2,.item:hover h3{color:var(--accent)}

.year{font-family:var(--mono);font-size:12px;color:var(--muted);padding:26px 0 10px;border-bottom:1px solid var(--hair)}

/* --- home page project cards ------------------------------------------------
   The index is for looking something up; this is for being persuaded. Image
   first, one line of type under it, no box around either. */

.cards{display:grid;grid-template-columns:1fr;gap:34px;padding-bottom:var(--bay)}
.card{text-decoration:none;color:inherit;display:block}
/* A card is a slot, not a picture frame. Whatever ratio the render or the
   photograph arrives at, every thumbnail in the row is the same shape: without
   this a 1.9:1 render sits 76px shorter than the 3:2 beside it and the grid
   reads as a mistake. cover crops to fill and never distorts, so a future
   project at any ratio drops in without breaking the row. */
.card img{margin-bottom:10px;aspect-ratio:3/2;height:auto;object-fit:cover}
.card.feature img{aspect-ratio:16/9}
.card .ct{font-family:var(--serif);font-size:22px;line-height:1.2;display:block}
.card .cm{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.card:hover .ct{color:var(--accent)}

dl.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:0;padding-bottom:12px}
dl.facts dt{font-size:12px;color:var(--muted);margin-bottom:3px}
dl.facts dd{font-size:13px;margin:0}

.addr-lg{font-family:var(--serif);font-size:20px;line-height:1.55;margin:26px 0 8px;font-style:normal}
.routes{display:grid;grid-template-columns:1fr;gap:22px}
.routes a{color:var(--accent);text-decoration:none}
.routes p{margin:0 0 4px;font-size:13px;color:var(--muted);line-height:1.6}

/* next / related: the arrow leads, the title follows */
.next,.rel{padding-top:26px;padding-bottom:var(--bay)}
.next span,.rel span{font-size:12px;color:var(--muted)}
.next a,.rel a{text-decoration:none;color:inherit;display:block}
.next strong,.rel a{font-family:var(--serif);font-weight:400;font-size:clamp(24px,4vw,38px);
  line-height:1.15;margin-top:6px;display:block}
.next a:hover strong,.rel a:hover{color:var(--accent)}

footer{padding:30px 0 44px;font-size:12px;color:var(--muted);line-height:1.7}
footer a{color:var(--muted)}
footer .addr{margin-bottom:14px}
footer .site{color:var(--accent);text-decoration:none}

@media (min-width:760px){
  :root{--gut:40px;--bay:104px}
  .head svg{width:150px}
  nav{font-size:14px;gap:24px}
  h1{margin:56px 0 20px}
  .mast{margin:56px 0 40px}
  .lede{font-size:28px;margin:44px 0 44px}
  .stand{font-size:21px;margin:34px 0 14px}
  .body,p.body{font-size:17px}
  .block{grid-template-columns:repeat(3,1fr);gap:18px 28px;padding:24px 0 44px}
  .block dd{font-size:14px}
  .matrix thead th{font-size:11px;letter-spacing:1.2px}
  .matrix{table-layout:fixed}
  .matrix tbody th{font-size:16px}
  .matrix th+th,.matrix td{width:16%}
  .two{grid-template-columns:1fr 1fr;gap:48px;align-items:start}

  /* the catalogue only becomes a table once there is room for four columns */
  .idxhead{display:grid;grid-template-columns:minmax(0,2.4fr) 1fr 1.5fr 4.2rem 20px;
    gap:24px;font-size:11px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;
    padding-bottom:10px}
  .idxhead .y{font-family:var(--mono);letter-spacing:0}
  .item.row{display:grid;grid-template-columns:minmax(0,2.4fr) 1fr 1.5fr 4.2rem 20px;
    gap:24px;align-items:baseline;padding:20px 0}
  .item.row .t{font-size:26px;margin:0}
  .item.row .l,.item.row .d,.item.row .y{font-size:13px}
  .item .l::after,.item .d::after{content:none}
  .item.row::after{content:"";width:20px;height:8px;align-self:center;background:currentColor;
    opacity:.35;transform:translateX(-4px);transition:transform .18s ease,opacity .18s ease;
    -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
  .item.row:hover::after{opacity:1;transform:translateX(0)}

  .cards{grid-template-columns:1fr 1fr;gap:56px 40px}
  .card.feature{grid-column:1 / -1}
  .card .ct{font-size:26px}

  dl.facts{grid-template-columns:repeat(3,1fr);gap:20px 30px}
  .routes{grid-template-columns:repeat(3,1fr);gap:34px}
  .addr-lg{font-size:26px;margin:44px 0 12px}
}

@media (prefers-reduced-motion:reduce){
  .item.row::after{transition:none}
}

/* The filter sets [hidden] on rows. This has to outrank the display:grid the
   wide-viewport block gives .item.row, which otherwise re-shows every row the
   filter just hid — same specificity, later in the file, so grid would win. */
.item[hidden],.item.row[hidden]{display:none}