/* ============================================================================
   Home. The arrival.

   One signature: a horizontal dial drawn after Robert's own Classic, whose
   gnomon casts the shadow the sun is genuinely casting at this minute. The
   geometry is arithmetic, the hour lines are cut for a latitude, and the only
   thing on this page allowed to be large is the drawing, because every
   photograph Robert owns is a 2003 JPEG and vector costs nothing.

   Tokens only. No colour and no typeface is invented here.
   ============================================================================ */

[hidden]{display:none !important}

/* The masthead toggle exists in the shared header but carries no shared
   styling, so the arrival is painted here rather than opening on a default
   browser button. */
.navtoggle{
  display:none;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--ground-3);border-radius:1px;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.navtoggle span{display:block;width:18px;height:1px;background:var(--ink-2)}
@media (max-width:760px){
  .navtoggle{display:flex}
  .site-head__in{flex-wrap:wrap}
  .nav--open{
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
    flex-basis:100%;padding-bottom:var(--s3);
  }
}

/* A photograph that was never cropped to a plate is never shown above its true
   pixel width. The cap arrives inline because it differs per photograph.
   No mat and no card: on this site a photograph sits on the page ground. */
.capped img{max-width:min(100%,var(--cap));height:auto}
.capped .plate__mat img{max-width:min(100%,var(--cap));max-height:100%}

/* ------------------------------------------------------------------- hero -- */

.hero{padding-block:var(--s5)}
.hero__in{display:grid;gap:var(--s4);grid-template-columns:1fr}
/* No measure cap on a phone. 15ch at 31px is 225px of a 350px column, which
   forced a short four line headline with a ragged right and pushed the dial
   most of the way off the first screen. The full column gives three. */
/* The headline was set to a NARROWER measure (15ch) than the paragraph beneath
   it (was 46ch), so it broke into a four line stair leaving "handmade" and
   "sundials." stranded as one word stubs while the body ran wider underneath.
   The headline measure now sits just outside the body's, and text-wrap:balance
   evens what is left of the rag. */
.hero h1{font-size:clamp(33px,5.6vw,56px);line-height:1.02;text-wrap:balance}
@media (min-width:760px){.hero h1{max-width:19ch}}
.hero .lede{max-width:44ch;margin:var(--s3) 0 0;text-wrap:pretty}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:var(--s4) 0 0}
.hero__acts .quiet{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2)}

@media (min-width:760px){
  .hero{padding-block:var(--s6)}
  .hero__in{gap:var(--s5)}
}
@media (min-width:900px){
  .hero{padding-block:var(--s7) var(--s6)}
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:var(--s6);align-items:center}
}

/* ------------------------------------------------------- the drawn dial -- */
/* The signature moment, and the only thing on this page allowed to be large,
   because it is drawn rather than photographed and vector has no resolution.
   It fills its column on a desktop and runs edge to edge on a phone: at 390px
   the plate is about 380px across where it was 280px, and the empty margin
   that made it read as a stamp in a tinted rectangle has gone out of the
   viewBox as well as out of the layout. The readout below carries the dial's
   own width, so the two share a left edge at every size above the full bleed. */

.dialfig{margin:0;display:flex;flex-direction:column;gap:var(--s4);align-items:stretch}
.dial{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto}

@media (max-width:759px){
  .dial{
    width:calc(100% + var(--gut) * 2);
    max-width:none;
    margin-inline:calc(var(--gut) * -1);
  }
}

.dial__plate{fill:var(--ground-2);stroke:var(--brass);stroke-opacity:.34;stroke-width:1}
.dial__ring{fill:none;stroke:var(--brass);stroke-opacity:.3;stroke-width:.8}
.dial__rose .a{fill:var(--brass);fill-opacity:.5}
.dial__rose .b{fill:var(--brass);fill-opacity:.2}
.dial__lines line{stroke:var(--ink-3);stroke-opacity:.5;stroke-width:.8}
.dial__lines .half{stroke:var(--ink-3);stroke-opacity:.35}
.dial__nums text{
  fill:var(--ink-2);font-family:var(--serif);font-size:15px;
  text-anchor:middle;letter-spacing:.02em;
}
.dial__motto{fill:var(--ink-3);font-family:var(--serif);font-size:11px;letter-spacing:.24em}
.dial__shadow{fill:var(--ink);fill-opacity:.15}
.dial__gnomon .lit{fill:var(--brass);fill-opacity:.95}
.dial__gnomon .shade{fill:var(--ink);fill-opacity:.55}
.dial__foot{fill:var(--brass);fill-opacity:.6}

/* After sunset the ground goes dark, the shadow is gone, and Robert's motto
   about darkness takes its place. Every colour re-declared, never inherited. */
.hero.night{background:var(--night)}
.hero.night .dial__plate{fill:var(--night-2);stroke:var(--brass-lit);stroke-opacity:.3}
.hero.night .dial__ring{stroke:var(--brass-lit);stroke-opacity:.22}
.hero.night .dial__rose .a{fill:var(--brass-lit);fill-opacity:.3}
.hero.night .dial__rose .b{fill:var(--brass-lit);fill-opacity:.14}
.hero.night .dial__lines line{stroke:#8E8779;stroke-opacity:.45}
.hero.night .dial__nums text{fill:#BEB8AA}
.hero.night .dial__motto{fill:#8E8779}
.hero.night .dial__gnomon .lit{fill:var(--brass-lit);fill-opacity:.55}
.hero.night .dial__gnomon .shade{fill:#8E8779;fill-opacity:.35}
.hero.night .dial__foot{fill:var(--brass-lit);fill-opacity:.35}
.hero.night .read__time{color:#F0EBE0}
.hero.night .read__time .part{color:#BEB8AA}
.hero.night .read__say{color:#BEB8AA}
.hero.night .read__meta,
.hero.night .read__cut,
.hero.night .read__note{color:#A29B8C}
.hero.night .read__nojs{color:#BEB8AA}
.hero.night .hero__acts .quiet{color:#BEB8AA}
.hero.night .read a{color:inherit;text-decoration-color:var(--brass-lit)}
.hero.night .read a:hover{text-decoration-color:#F0EBE0}
.hero.night .read__more a{color:#E4DFD3}

/* --------------------------------------------------------- the readout -- */

/* One measure, one left edge, reading size. The block is the width of the dial
   it belongs to, so it hangs off the same axis rather than floating centred
   under it, and no line is centred on its own private axis. */
.read{width:100%;max-width:560px;margin-inline:auto;text-align:left}

/* Every rule below is scoped under .read on purpose. A bare `.read p{margin:0}`
   reset is a class plus a type selector, so it out-specifies a plain class and
   silently swallowed every margin in this block, leaving the whole readout as
   one undifferentiated stack of line boxes. Matching the specificity is the
   fix; deleting the reset would let the shared paragraph margin back in. */
.read p{margin:0}
.read .read__time{
  font-family:var(--sans);font-size:clamp(var(--t-lg),4.4vw,var(--t-xl));font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.12;
  letter-spacing:-.01em;margin:0;
}
.read .read__time .part{font-weight:400;color:var(--ink-2)}
.read .read__say{
  font-family:var(--sans);font-size:var(--t-base);color:var(--ink-2);
  line-height:1.5;margin-top:10px;
}
.read .read__meta{
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3);
  line-height:1.55;margin-top:var(--s2);
}
.read .read__more{
  font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;margin-top:var(--s1);
}
.read .read__nojs{
  font-family:var(--sans);font-size:var(--t-base);color:var(--ink-2);line-height:1.55;
}
.read .motto{font-size:var(--t-lg)}

/* A clear break between what the dial is reading now and what the drawing is,
   then the control that changes it: a real button at a real size, not a five
   word fragment trailing the end of a sentence. */
.read .read__cut{
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3);
  line-height:1.55;margin-top:var(--s4);
}
.read .read__geo{margin-top:var(--s2);min-height:44px;padding:11px 18px}
.read .read__note{
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3);
  line-height:1.55;margin-top:var(--s2);
}
.read .read__note:empty{display:none}

/* A link inside a running sentence takes that sentence's colour and is marked
   by a brass underline alone, so it never reads as a bold word dropped into
   the middle of the line. A link that stands on its own line may be darker. */
.read a{
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--brass);
}
.read a:hover{text-decoration-color:var(--ink)}
.read__more a{color:var(--ink-2)}
.read__more a:hover{color:var(--ink)}

/* The two links in the hero that are text rather than a button are the only
   tap targets on this page under a thumb's width, so on a phone they are given
   real height instead of the 16px a bare inline anchor gets. */
@media (max-width:759px){
  .hero__acts .quiet a,
  .read .read__more a{display:inline-block;padding-block:12px}
  .read .read__more{margin-top:0}
}

/* ------------------------------------------------------- the collections -- */

.band__head{max-width:54ch}
.band__head h2{font-size:clamp(var(--t-xl),3.4vw,var(--t-2xl))}
.band__head p{margin:var(--s3) 0 0}

.cats{display:grid;gap:var(--s5);margin-top:var(--s5)}
.cat{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--s3);align-items:center}
.cat__text{display:block}
.cat__name{font-size:var(--t-lg);line-height:1.15;display:block}
.cat__blurb{font-size:var(--t-base);color:var(--ink-2);margin:var(--s1) 0 0;display:block}
.cat__count{
  display:block;font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin:var(--s2) 0 0;font-variant-numeric:tabular-nums;
}
.cat:hover .cat__name{
  text-decoration:underline;text-decoration-color:var(--brass);
  text-decoration-thickness:1px;text-underline-offset:4px;
}

@media (min-width:820px){
  .cats{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  /* The card and its photograph share one width, so a card has one right edge
     rather than a small picture with wider text beside it. 300px, because the
     narrowest of the three square crops is 308 and none of them may upscale. */
  /* align-content, not just align-items: the three cards are stretched to the
     tallest of them, and stretched auto rows would hand the spare height to
     the picture row, dropping two of the three names 14px below the third. */
  .cat{
    grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;
    gap:var(--s3);max-width:300px;
  }
}

/* --------------------------------------------------------- the selection -- */

.selection__foot{
  max-width:950px;margin:var(--s5) auto 0;
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);
}

/* ------------------------------------------------------------- the maker -- */

.maker__in{display:grid;gap:var(--s5);grid-template-columns:1fr}

/* ONE rail, ONE right edge. Two photographs stacked in a column have to share
   a width or the column has three different right edges, and a caption may
   never run wider than the photograph it belongs to. The shared width is 300px
   because that is every true pixel the workshop snapshot has, and nothing on
   this site is ever stretched past its own pixels. The gnomon, at 600px, is
   therefore shown at exactly half, which is the crisp width anyway. */
.maker__figs{
  display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);
  align-items:start;max-width:300px;
}
.maker__fig{margin:0}
.maker__fig figcaption{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin-top:var(--s2);line-height:1.55;max-width:100%;
}
.maker__say{max-width:var(--measure)}
.maker__letter{margin:var(--s4) 0 0;padding-left:var(--s3);border-left:1px solid var(--ground-3)}
.maker__letter p{font-style:italic;color:var(--ink-2);margin:0}
.maker__letter cite{
  display:block;font-style:normal;font-family:var(--sans);
  font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s2);
}
@media (min-width:900px){
  .maker__in{grid-template-columns:300px minmax(0,1fr);gap:var(--s6);align-items:start}
}

/* ------------------------------------------------------------ the letter -- */

.letter{margin:var(--s5) 0 0}
.letter p{font-size:clamp(var(--t-md),2.1vw,var(--t-lg));line-height:1.45;color:var(--ink);margin:0}
.letter cite{
  display:block;font-style:normal;font-family:var(--sans);
  font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s3);
}
.letters__foot{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);margin:var(--s5) 0 0}

/* --------------------------------------------------------- the commission -- */

.commission__in{display:grid;gap:var(--s4);grid-template-columns:1fr}
.commission h2{font-size:clamp(var(--t-xl),3.4vw,var(--t-2xl))}
.commission .prose{margin-top:var(--s3)}
.commission__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4)}
.commission__acts .quiet{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2)}
.commission__terms{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  line-height:1.65;margin:0;
}
@media (min-width:900px){
  .commission__in{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--s6)}
  .commission__terms{margin-top:calc(var(--t-2xl) * .55)}
}

/* The shadow steps once a minute, which is far too slow to be motion, and
   under prefers-reduced-motion it is drawn once and held. Nothing else here
   animates, so the shared rule covers the rest. */