/* ============================================================================
   /dial/<slug>  ,  one piece, alone.

   The bar is Jamb's product page: one large calm photograph of the object,
   the name, the price, one quiet action. Everything else waits below the fold.

   The photograph is the largest one Robert has of that piece, shown edge to
   edge at its full true width (IMGS[src].max_css_w) with nothing tinted behind
   it, and the composition either side is sized from that width so the object
   holds about half of it. Nothing here upscales, crops or bleeds.
   Tokens only. No new colour, no new face.
   ============================================================================ */

/* ------------------------------------------------------------------ above -- */

.dp-crumb{
  grid-column:1 / -1;
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin:0 0 var(--s3);
}
.dp-crumb a{color:var(--ink-2);text-decoration-color:var(--ground-3)}
.dp-crumb a:hover{text-decoration-color:var(--brass)}

.dp-top{padding-block:var(--s4) var(--s6)}

/* --w is the photograph's true pixel width. The composition is two of those
   plus the gap, so the object holds about half of what the reader meets above
   the fold, and it starts on the same left rule as every heading further down
   the page. The page never asks the photograph to be bigger than it is. */
.dp-top__in{
  --dp-gap:clamp(28px,5vw,68px);
  display:grid;
  grid-template-columns:minmax(0,calc(var(--w) * 1px)) minmax(0,max(340px,calc(var(--w) * 1px)));
  gap:0 var(--dp-gap);
  align-items:center;
  justify-content:start;
}

/* The container is the shape of the photograph, not the other way round.
   No mat, no tint, no rectangle for it to float in: the object fills its frame
   edge to edge and sits straight on the parchment, seated by one hairline. */
.dp-hero{margin:0;width:min(calc(var(--w) * 1px),100%)}
.dp-hero picture{display:block}
.dp-hero img{
  display:block;width:100%;height:auto;
  box-shadow:0 0 0 1px var(--ground-3);
}

.dp-facts{margin:0}
.dp-facts h1{
  font-size:clamp(var(--t-xl),3.6vw,52px);
  line-height:1.04;letter-spacing:-.012em;margin:0;
}
.dp-material{
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);
  margin:var(--s2) 0 0;
}
.dp-price{
  font-family:var(--sans);font-size:var(--t-lg);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink);
  margin:var(--s2) 0 0;
}

.dp-actions{margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s3)}
.dp-jump{
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);
  text-decoration-color:var(--ground-3);text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px;
}
.dp-jump:hover{color:var(--ink);text-decoration-color:var(--brass)}

/* ------------------------------------------------------- sizes and weights -- */

.dp-spec{padding-block:var(--s5)}
.dp-spec h2{font-size:var(--t-xl)}
.dp-spec .dp-sizes{max-width:46ch}

.dp-sizes{margin:var(--s3) 0 0;border-top:1px solid var(--ground-3)}
.dp-size{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px var(--s3);
  padding:var(--s2) 0;
  border-bottom:1px solid var(--ground-3);
}
.dp-size__label{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);line-height:1.45}
.dp-size__price{
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;
}
.dp-size__meta{grid-column:1 / -1;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.5}

/* ------------------------------------------------------------------ words -- */
/* Every text section sits in the full wrap with its own measure, so the
   description, the sizes, the headings and the photograph above them all begin
   on one left rule rather than each finding its own centre. */
.dp-col{max-width:760px}

.dp-words{padding-block:var(--s5)}
.dp-words .prose p{font-size:var(--t-md);line-height:1.62}

.dp-motto{
  margin:var(--s5) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--ground-3);
}
.dp-motto .motto{font-size:clamp(var(--t-md),2.4vw,var(--t-xl));line-height:1.34}
.dp-motto__trans{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin:var(--s2) 0 0;
}

/* ------------------------------------------------------------ inscription -- */
/* The reward. Engraving is a real product at a real price and it is where the
   birthdays, the anniversaries and the memorials live. */

.dp-ins{background:var(--ground-2);color:var(--ink)}
.dp-ins h2{color:var(--ink)}
.dp-ins__lede{max-width:60ch;color:var(--ink-2);margin:var(--s3) 0 0}

.dp-ins__in{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,5vw,66px);
  align-items:start;
  margin-top:var(--s5);
}

.dp-stage{
  background:var(--ground);
  padding:clamp(14px,2.4vw,26px);
}
.dp-dial{display:block;width:100%;height:auto}
.dp-cap{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  line-height:1.55;margin:var(--s2) 0 0;
}

/* The drawing. Robert already gives customers a printable blank of a dial face
   so they can plan where an inscription sits. This is that blank, drawn for the
   latitude of the workshop, with their words in it. */
.dp-plate{fill:var(--ground);stroke:var(--ink-3);stroke-width:1.2}
.dp-plate--inner{fill:none;stroke-width:.7;opacity:.7}
.dp-hour{stroke:var(--ink-3);stroke-width:.9;fill:none}
.dp-hour--half{stroke-width:.55;opacity:.5}
.dp-num{fill:var(--ink-2);font-family:var(--serif);font-size:15px}
.dp-gnomon{fill:rgba(138,109,40,.30);stroke:var(--brass);stroke-width:.9}
.dp-sun{fill:rgba(138,109,40,.22);stroke:var(--brass);stroke-width:.9}
.dp-shadow{stroke:var(--brass);stroke-width:3;stroke-linecap:round}
.dp-ring{fill:none;stroke:var(--ink-3);stroke-width:1.1}
.dp-ring--faint{opacity:.42;stroke-width:.8}
.dp-band-face{fill:none;stroke:rgba(138,109,40,.26);stroke-width:26}
.dp-band-face--far{stroke:rgba(138,109,40,.11);stroke-width:20}
.dp-axis{stroke:var(--brass);stroke-width:2.2;fill:none}
.dp-axis-head{fill:var(--brass)}

/* the engraved letters themselves */
.dp-cut{
  font-family:var(--serif);
  font-variant-caps:all-small-caps;
  font-feature-settings:"smcp","c2sc";
  letter-spacing:.07em;
  fill:var(--ink);
}

.dp-ctrl label{margin-bottom:6px}
.dp-hint{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin:6px 0 0;line-height:1.55}
.dp-count{font-variant-numeric:tabular-nums}

.dp-pick{margin:var(--s4) 0 0}
.dp-pick h3{font-size:var(--t-md);margin:0 0 var(--s2)}
.dp-mottoes{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--ground-3)}
.dp-mottoes li{border-bottom:1px solid var(--ground-3)}
.dp-motto-pick{
  display:block;width:100%;text-align:left;
  background:transparent;border:0;border-radius:1px;
  padding:11px 2px;min-height:44px;cursor:pointer;
  font-family:var(--serif);font-style:italic;font-size:var(--t-base);
  color:var(--ink-2);line-height:1.4;
}
.dp-motto-pick:hover{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:3px}
.dp-motto-pick .dp-tr{
  display:block;font-family:var(--sans);font-style:normal;
  font-size:var(--t-xs);color:var(--ink-3);margin-top:3px;letter-spacing:.01em;
}
.dp-pdf{margin:var(--s3) 0 0;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.6}
.dp-pdf a{color:var(--ink-2)}

.dp-go{margin:var(--s4) 0 0}
.dp-note{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin:var(--s2) 0 0;max-width:44ch;line-height:1.55}

/* ---------------------------------------------------------- photographs -- */

.dp-strip{padding-block:var(--s5)}
.dp-strip h2{font-size:var(--t-xl)}
.dp-shots{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4) var(--s4);margin-top:var(--s4);
}
.dp-shot{margin:0}

/* One shared baseline for the whole row. The frame is a fixed height and the
   photographs stand on its floor; --dw is the CSS width, computed in Python
   from the photograph's own pixels, at which it is exactly that tall. A shot
   too short to reach the line simply does not, which is honest, and no shot
   can ever overrun the frame and land on its caption. No tint behind them:
   a box a photograph does not fill is worse than no box. */
.dp-shot__frame{
  display:flex;align-items:flex-end;justify-content:flex-start;
  height:240px;
}
.dp-shot__frame picture{display:block}
.dp-shot__frame img{
  display:block;height:auto;
  width:min(calc(var(--dw) * 1px),100%);
  box-shadow:0 0 0 1px var(--ground-3);
}
.dp-shot figcaption{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin-top:12px;
}

/* ------------------------------------------------------------- how to order -- */
/* The delivery charge, the telephone numbers, the printed pages. Well down the
   page and set to be read, not squinted at. */

.dp-order{padding-block:var(--s5)}
.dp-order h2{font-size:var(--t-xl)}
.dp-order__list{margin:var(--s4) 0 0;border-top:1px solid var(--ground-3)}
.dp-order__row{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:var(--s1) var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--ground-3);
}
.dp-order__row dt{
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;color:var(--ink);
  line-height:1.5;
}
.dp-order__row dd{
  margin:0;font-size:var(--t-base);color:var(--ink-2);line-height:1.6;
  max-width:56ch;
}
.dp-order__row dd a{color:var(--ink)}
/* The two numbers get their own line and a real target, because on a phone
   this is the row a customer actually acts on. */
.dp-tels{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-top:var(--s1)}
.dp-tels a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);
  text-decoration-color:var(--ground-3);text-underline-offset:3px;
}
.dp-tels a:hover{text-decoration-color:var(--brass)}

/* --------------------------------------------------------------- letters -- */

.dp-letters{padding-block:var(--s5)}
.dp-letters h2{font-size:var(--t-xl)}
.dp-letter-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4) var(--s5);margin-top:var(--s4);
}
.dp-letter{
  margin:0;padding-top:var(--s3);border-top:1px solid var(--ground-3);
}
.dp-letter p{margin:0 0 .7em;line-height:1.6}
.dp-letter p:last-child{margin-bottom:0}
.dp-letter__sal,.dp-letter__sign{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
}

/* ------------------------------------------------------------------ also -- */

.dp-also{padding-block:var(--s5) var(--s6)}
.dp-also h2{font-size:var(--t-xl)}
.dp-also .grid{margin-top:var(--s4)}
.dp-also__more{margin:var(--s5) 0 0;font-family:var(--sans);font-size:var(--t-sm)}

/* ------------------------------------------------------------ responsive -- */

@media (max-width:900px){
  .dp-ins__in{grid-template-columns:1fr;gap:var(--s4)}
  .dp-shots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  /* the object first, its name under it, still edge to edge and still at its
     own true width, never stretched to fill the phone */
  .dp-top__in{grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
  .dp-facts{grid-column:1 / -1}
  .dp-letter-grid{grid-template-columns:1fr}
  .dp-order__row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .dp-shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .dp-shot__frame{height:168px}
  .dp-shot__frame img{width:min(calc(var(--dws) * 1px),100%)}
}
/* A finger needs a target, so on a touch screen the two quiet text links on
   this page get a real one without changing how they read. */
@media (pointer:coarse){
  .dp-crumb a,.dp-pdf a,.dp-also__more a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* an inline link inside a sentence cannot become a block without breaking
     the line, so it grows its hit area instead, which changes nothing visible */
  .dp-order__row dd a{padding-block:11px}
}