/* Ossara Studio: the shared sheet, the first shared file on the site.
   Every page links it before its own <style>, so a page's rules win on any
   overlap. It carries the palette, the type stacks, the cursor, the button,
   the header, the footer, and the plain page layout the placeholder pages
   use. The header and footer markup is pasted into each page; there is no
   build step and no includes. */

:root{
  /* Five values. There is no sixth. */
  --olive:#312F17;
  --oxblood:#4A1620;
  --bone:#E7E2D8;
  --ink:#231911;
  --cash:#5A5C33;

  --display:"ivypresto-display","Ivy Presto Display",Didot,"Bodoni 72","Bodoni MT","Times New Roman",serif;
  --body:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gutter:clamp(24px,4.4vw,72px);

  /* The cursor: a 14px circle at half opacity, oxblood on light fields and
     bone on dark ones; over anything clickable it swaps to a 24px one. The
     two hexes here are the palette's, duplicated by hand the way theme-color
     is, because a data URI cannot take var(). */
  --cursor-oxblood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='7' fill='%234A1620' fill-opacity='.5'/%3E%3C/svg%3E") 10 10,auto;
  --cursor-bone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='7' fill='%23E7E2D8' fill-opacity='.5'/%3E%3C/svg%3E") 10 10,auto;
  --cursor-oxblood-live:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='12' fill='%234A1620' fill-opacity='.5'/%3E%3C/svg%3E") 15 15,auto;
  --cursor-bone-live:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='12' fill='%23E7E2D8' fill-opacity='.5'/%3E%3C/svg%3E") 15 15,auto;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* The reading floor is 17px; the ratio is the deck's. A page with its own
   body rule overrides this. */
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-weight:400;
  font-size:clamp(17px,1.25vw,20px);line-height:1.583;letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
/* Only 400 and 500 are loaded. Default bold would synthesise a 700. */
strong{font-weight:500}

/* Links and controls take the larger ring rather than the hand. Dark fields
   swap the circle to bone. Only on devices with a mouse: touch never sees a
   cursor. Each page adds its own dark fields to this list. */
@media (hover:hover) and (pointer:fine){
  body{cursor:var(--cursor-oxblood)}
  a,button,summary{cursor:var(--cursor-oxblood-live)}
  .site-foot,.site-head-oxblood{cursor:var(--cursor-bone)}
  .site-foot a,.site-head-oxblood a,.site-head-oxblood button,.btn{cursor:var(--cursor-bone-live)}
  .btn.btn-bone{cursor:var(--cursor-oxblood-live)}
}

/* ───────────────────────── Button ─────────────────────────
   Oxblood fill, bone label, square. The 1px border is on the resting state
   too, where it is the same colour as the fill and therefore invisible: the
   box has to be the same size in both states or the layout shifts under the
   cursor. Only background-color and color may transition.

   The hover: the fill and the label colour hold, and the label rolls up and
   out while a second copy, set from data-label, rolls in from below. The
   copy is CSS, so the source carries the words once. Under reduced motion
   the global rule makes the roll instant. The ring is what marks focus.
   The homepage's form button inverts instead and is its own rule there;
   one behaviour per page, never both on one button. */
.btn{
  display:inline-block;text-decoration:none;appearance:none;
  font-family:var(--body);font-weight:500;font-size:13px;line-height:1;
  letter-spacing:.22em;word-spacing:.32em;text-transform:uppercase;
  color:var(--bone);background:var(--oxblood);
  border:1px solid var(--oxblood);border-radius:0;
  padding:19px 38px;margin:0;
}
.btn:focus-visible{outline:2px solid var(--oxblood);outline-offset:4px}
/* The bone button, for oxblood and ink fields: bone fill, oxblood label. */
.btn-bone{background:var(--bone);color:var(--oxblood);border-color:var(--bone)}
.btn-bone:focus-visible{outline-color:var(--bone)}
.btn-roll{display:block;position:relative;overflow:hidden}
.btn-roll>span,.btn-roll::after{
  display:block;
  transition:transform 460ms cubic-bezier(.22,.61,.36,1);
}
.btn-roll::after{content:attr(data-label);position:absolute;left:0;top:100%;white-space:nowrap}
.btn:hover .btn-roll>span,.btn:hover .btn-roll::after,
.btn:focus-visible .btn-roll>span,.btn:focus-visible .btn-roll::after{transform:translateY(-100%)}
.btn[disabled]{opacity:.55}

/* ───────────────────────── Header ─────────────────────────
   A thin bone bar that scrolls away with the page; it is not fixed, because
   the pins and full-screen moments below were built to own the whole
   viewport. The wordmark sits at the far left and the five items are spaced
   across the full width with it, one gap between every pair. The items are
   the locked label, in ink. The current page carries the rule; the others
   take it on hover. An underline means the thing is clickable. */
.site-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:16px 32px;
  padding:18px var(--gutter);
  background:var(--bone);color:var(--ink);
}
.site-mark{display:block;flex:none;line-height:0}
/* The wordmark is artwork, never live text. The 4063px export, 54KB, one
   file for every size it takes on the site; a resampled cut came out
   larger, so the export itself is served. */
.site-mark img{width:auto;height:15px}
.site-mark:focus-visible{outline:2px solid currentColor;outline-offset:8px}
/* The nav's box dissolves so its links space out with the wordmark. */
.site-nav{display:contents}
.site-nav a,.site-menu{
  font-family:var(--body);font-weight:500;font-size:13px;line-height:1;
  letter-spacing:.22em;word-spacing:.32em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.site-nav a{
  padding:6px 0;
  text-underline-offset:7px;text-decoration-thickness:1px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{text-decoration:underline}
.site-nav a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* The toggle only exists under 760, where six things no longer fit on one
   line. The script un-hides it; with JS off it stays hidden and the list
   simply stacks in the open state. */
.site-menu{display:none;appearance:none;background:none;border:0;border-radius:0;padding:6px 0;margin:0}
.site-menu:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* The homepage's header is an oxblood field with the bone wordmark and bone
   labels. The hide below it is ink, so olive never meets it. */
.site-head-oxblood{background:var(--oxblood);color:var(--bone)}
.site-head-oxblood .site-nav a,.site-head-oxblood .site-menu{color:var(--bone)}
@media (max-width:759px){
  .site-head{padding-block:16px}
  .site-menu{display:inline-block}
  .site-menu[hidden]{display:none}
  .site-nav{display:block;flex:0 0 100%;padding-top:8px}
  .site-nav a{display:block;padding:16px 0;border-top:1px solid currentColor}
  .site-nav a:hover,.site-nav a[aria-current="page"]{text-decoration:none}
  .site-nav a[aria-current="page"]{color:var(--cash)}
  .site-head-oxblood .site-nav a[aria-current="page"]{color:var(--bone);opacity:.6}
  .has-js .site-head:not(.is-open) .site-nav{display:none}
}

/* ───────────────────────── Footer ─────────────────────────
   An ink field: ink sits between the leads, so it can follow the oxblood
   inquiry on the homepage and the bone close on the services page without
   olive ever meeting oxblood. Bone wordmark large at the left with the
   studio's one line under it, the three ways to reach Tori at the right
   as a ruled list, and the small print as one centred row along the
   bottom. The reference's pills have rounded corners and
   this system has no radius, so the pill became a full-width row: a rule
   above, a label at the left, an arrow at the right carrying the affordance
   the way an icon does. Arrows point out for external links and across for
   the site's own. */
.site-foot{
  background:var(--ink);color:var(--bone);
  padding:clamp(64px,7vw,112px) var(--gutter) clamp(40px,4vw,64px);
  font-family:var(--body);font-weight:400;
  font-size:clamp(17px,1.25vw,20px);line-height:1.583;letter-spacing:.015em;
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(240px,.9fr);
  grid-template-areas:"mark reach";
  gap:48px clamp(40px,6vw,120px);
  align-items:start;
}
.foot-mark{grid-area:mark}
.foot-mark img{width:clamp(220px,26vw,400px);height:auto}
/* Set at the 17px floor, no smaller, and as wide as the wordmark above it,
   so it runs two lines under the full-size mark. Where the mark shrinks
   under 1100 the line takes three. */
.foot-line{margin:24px 0 0;max-width:clamp(220px,26vw,400px);font-size:17px;line-height:1.5;text-wrap:balance}
.foot-reach{grid-area:reach}
.foot-reach a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.foot-reach{margin:0;padding:0;list-style:none}
.foot-reach li{border-top:1px solid color-mix(in srgb,var(--bone) 35%,transparent)}
.foot-reach li:last-child{border-bottom:1px solid color-mix(in srgb,var(--bone) 35%,transparent)}
.foot-reach a{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 0;color:inherit;text-decoration:none;
  font-family:var(--body);font-weight:500;font-size:13px;line-height:1;
  letter-spacing:.22em;word-spacing:.32em;text-transform:uppercase;
}
.foot-reach .arrow{font-size:17px;line-height:1;transition:transform 220ms ease}
.foot-reach a:hover .arrow-out{transform:translate(3px,-3px)}
.foot-reach a:hover .arrow-in{transform:translateX(4px)}
/* The small print: one centred row across the bottom, set as labels, which
   are the one thing allowed under the reading floor. 11px, under the 13px
   label spec, at Tori's call for this row only. */
.foot-bottom{
  display:flex;justify-content:center;flex-wrap:wrap;align-items:baseline;
  gap:10px 32px;
  margin-top:clamp(48px,6vw,96px);padding-top:20px;
  border-top:1px solid color-mix(in srgb,var(--bone) 35%,transparent);
  font-family:var(--body);font-weight:500;font-size:11px;line-height:1;
  letter-spacing:.22em;word-spacing:.32em;text-transform:uppercase;
}
.foot-bottom p{margin:0}
.foot-bottom a{
  color:inherit;text-decoration:none;
  text-underline-offset:6px;text-decoration-thickness:1px;
}
.foot-bottom a:hover{text-decoration:underline}
.foot-bottom a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
@media (max-width:1099px){
  .foot-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"mark" "reach";
    gap:clamp(48px,7vw,80px) clamp(40px,6vw,96px);
  }
}
@media (max-width:759px){
  .foot-grid{
    grid-template-columns:1fr;
    grid-template-areas:"mark" "reach";
    gap:48px;
  }
  .foot-mark img{width:min(72vw,300px)}
}

/* ───────────────────────── Back to top ─────────────────────────
   A 44px bone square fixed at the bottom right with an oxblood arrow drawn
   as a stroke, the way the site's icons are drawn. On bone it reads as the
   arrow alone; on ink, oxblood or olive the square is what keeps the arrow
   legible and keeps oxblood off those fields. Hidden until the page has
   scrolled most of a screen; the script adds .is-shown. Opacity only. */
.to-top{
  position:fixed;z-index:20;
  right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bone);color:var(--oxblood);
  border:0;border-radius:0;
  opacity:0;pointer-events:none;
  transition:opacity 240ms ease;
}
.to-top.is-shown{opacity:1;pointer-events:auto}
.to-top svg{width:20px;height:20px;display:block;transition:transform 220ms ease}
.to-top:hover svg{transform:translateY(-3px)}
.to-top:focus-visible{outline:2px solid var(--oxblood);outline-offset:4px}

/* ───────────────────────── Plain page ─────────────────────────
   The layout the placeholder pages share: one bone field, the display
   title, a short run of body copy. */
.page{
  background:var(--bone);color:var(--ink);
  padding:clamp(96px,9vw,144px) var(--gutter);
  min-height:60svh;
}
.page-inner{max-width:1180px;margin-inline:auto}
.page-title{
  font-family:var(--display);font-weight:300;letter-spacing:-.022em;
  font-size:clamp(40px,5.4vw,80px);line-height:1.08;
  margin:0 0 clamp(32px,4vw,48px);max-width:15ch;text-wrap:balance;
}
/* The display italic inside a title. Thin Italic 100 clears its 28px floor
   at every size the title takes. */
.page-title em{font-style:italic;font-weight:100}
.page p{margin:0 0 28px;max-width:60ch}
.page p:last-child{margin-bottom:0}
.page-link{
  color:inherit;text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:1px;
}
.page-link:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.page .btn{margin-top:clamp(32px,4vw,48px)}
/* Long-form pages: the date under the title, then sections headed by the
   locked label over a divider rule. Never an underline. */
.page-date{margin:calc(-1 * clamp(32px,4vw,48px) + 8px) 0 clamp(48px,6vw,72px);color:var(--cash)}
.page-h{
  font-family:var(--body);font-weight:500;font-size:13px;line-height:1;
  letter-spacing:.22em;word-spacing:.32em;text-transform:uppercase;
  color:var(--cash);margin:clamp(48px,6vw,72px) 0 20px;padding-bottom:10px;
  border-bottom:1px solid var(--cash);max-width:60ch;
}
.page-h:first-of-type{margin-top:0}
.page ul{margin:0 0 28px;padding-left:1.2em;max-width:60ch}
.page li{margin:0 0 8px}
/* The legal pages: the 17px floor, no smaller, on a wider column. */
.page-copy{max-width:920px;font-size:17px;line-height:1.6}
.page-copy p,.page-copy ul,.page-copy .page-h{max-width:none}
.page-copy p{margin-bottom:20px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn-roll>span,.btn-roll::after,.foot-reach .arrow,.to-top,.to-top svg{transition-duration:1ms}
}