/* ==========================================================================
   studio hill. — Self-hosted type
   Termina © Fort Foundry. Licensed: Desktop (3 users) + Web (50K pageviews/mo).
   Perpetual. Subset to Latin under §1 of the Web EULA.
   Cormorant Garamond — SIL Open Font License 1.1.
   Place all .woff2 files in /assets/fonts/
   ========================================================================== */

/* ---------- Termina — UI face ---------- */
@font-face{
  font-family:'Termina';
  src:url('/assets/fonts/Termina-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Termina';
  src:url('/assets/fonts/Termina-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Termina';
  src:url('/assets/fonts/Termina-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Termina';
  src:url('/assets/fonts/Termina-Heavy.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Termina';
  src:url('/assets/fonts/Termina-Black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

/* ---------- Cormorant Garamond — display face ---------- */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/fonts/CormorantGaramond-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/fonts/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/fonts/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ==========================================================================
   studio hill. — design tokens
   Single source of truth for galleries, booking portals, and studiohill.com.au

   Import BEFORE any page CSS. Then delete the local :root block and the
   hardcoded values from each page — they inherit from here now.

   Extracted from the live client dashboard, with the ad-hoc values
   normalised. Nothing here changes the look; it makes it repeatable.
   ========================================================================== */

:root{

  /* ------------------------------------------------------------------------
     COLOUR — exactly the brand spec. Fixed palette, no accents.
     ------------------------------------------------------------------------ */

  --sh-studio-black:  #0A0A0A;
  --sh-deep-black:    #1E1E1E;
  --sh-charcoal:      #282828;
  --sh-slate:         #787870;
  --sh-linen:         #C8C3BE;
  --sh-stone:         #D2D2C8;
  --sh-warm-cream:    #F0EEE8;
  --sh-white:         #FFFFFF;

  /* Derived — these were hardcoded inline on the dashboard. Now named. */
  --sh-cream-hover:   #EBE9E2;   /* row hover */
  --sh-placeholder:   #B8B3AE;   /* media placeholder */

  /* Semantic — use these in components, not the raw names above */
  --sh-bg:            var(--sh-warm-cream);
  --sh-bg-hover:      var(--sh-cream-hover);
  --sh-bg-inverse:    var(--sh-studio-black);
  --sh-surface:       var(--sh-white);
  --sh-text:          var(--sh-charcoal);
  --sh-text-strong:   var(--sh-studio-black);
  --sh-text-muted:    var(--sh-slate);
  --sh-text-inverse:  var(--sh-warm-cream);
  --sh-text-inverse-muted: var(--sh-linen);
  --sh-line:          var(--sh-stone);

  /* ------------------------------------------------------------------------
     TYPE — three faces, three jobs. No overlap.

       Termina   → labels, nav, buttons, metadata, wordmark. The UI voice.
       Cormorant → display only. Headlines and titles. Never below 20px.
       Mono      → technical strings only. Credits, counts, filenames, sizes.
     ------------------------------------------------------------------------ */

  --sh-sans:  'Termina',system-ui,-apple-system,sans-serif;
  --sh-serif: 'Cormorant Garamond','Times New Roman',serif;
  --sh-mono:  ui-monospace,'SF Mono',Menlo,monospace;

  /* Weights */
  --sh-w-light:     300;   /* body; Cormorant display */
  --sh-w-regular:   400;   /* labels, captions; Cormorant titles */
  --sh-w-medium:    500;   /* active nav, buttons, emphasis */
  --sh-w-bold:      700;   /* avatar initials only */
  --sh-w-black:     900;   /* wordmark ONLY — never body text */

  /* Size scale — was 8/9/10/11/13/18/22/24/26/36/48 ad hoc.
     Now a ladder. Nearest step to what you had; nothing shifts visibly. */
  --sh-size-xs:      9px;    /* eyebrow, fine meta */
  --sh-size-sm:     10px;    /* labels, captions, buttons, nav */
  --sh-size-md:     11px;    /* sub-meta, studio card links */
  --sh-size-base:   13px;    /* body, inputs, search */
  --sh-size-lg:     18px;    /* wordmark (topbar) */
  --sh-size-xl:     22px;    /* tile title, side section head */
  --sh-size-2xl:    26px;    /* active row title */
  --sh-size-3xl:    36px;    /* section head */
  --sh-size-4xl:    48px;    /* page display */

  /* Tracking — was six improvised values (.22/.24/.26/.28/.30/.32em).
     Now three, tied to purpose. Biggest single consistency win in the file. */
  --sh-track-eyebrow:  0.32em;  /* smallest type, widest track */
  --sh-track-label:    0.26em;  /* nav, buttons, meta, pills — the workhorse */
  --sh-track-caption:  0.22em;  /* larger uppercase, sub-labels */
  --sh-track-mono:     0.06em;
  --sh-track-serif:    0.005em;
  --sh-track-wordmark:-0.01em;

  /* Line heights */
  --sh-lh-display:  1;
  --sh-lh-title:    1.05;
  --sh-lh-body:     1.6;

  /* ------------------------------------------------------------------------
     SPACE — was arbitrary (5,6,8,10,12,14,16,18,20,22,24,32,44,48,56,64,80,88).
     Now a scale. Use these; stop typing numbers.
     ------------------------------------------------------------------------ */

  --sh-space-1:   4px;
  --sh-space-2:   8px;
  --sh-space-3:  12px;
  --sh-space-4:  16px;
  --sh-space-5:  24px;
  --sh-space-6:  32px;
  --sh-space-7:  48px;
  --sh-space-8:  56px;   /* page gutter */
  --sh-space-9:  64px;
  --sh-space-10: 88px;   /* major section break */

  --sh-gutter:        var(--sh-space-8);
  --sh-gutter-mobile: 20px;
  --sh-side-width:    320px;

  /* ------------------------------------------------------------------------
     LINES, EDGES, MOTION
     ------------------------------------------------------------------------ */

  /* Was 0.5px — a subpixel border renders inconsistently across displays.
     1px on a hairline colour gives the same delicacy, reliably. */
  --sh-rule:        1px solid var(--sh-line);
  --sh-rule-strong: 1px solid var(--sh-studio-black);

  --sh-radius: 0;          /* squared. Termina is squared. Keep it. */
  --sh-shadow-menu: 0 16px 40px rgba(10,10,10,0.08);

  --sh-ease:       .2s ease;    /* colour, background, gap */
  --sh-ease-slow:  .6s ease;    /* image scale on hover */
}

/* ==========================================================================
   BASE
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:var(--sh-bg);
  color:var(--sh-text);
  font-family:var(--sh-sans);
  font-weight:var(--sh-w-light);
  font-size:var(--sh-size-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{min-height:100vh;overflow-x:hidden}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}

/* Accessibility floor — missing entirely from the current build */
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--sh-studio-black);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */

/* Termina Black, always. Never set the wordmark in the serif. */
.wordmark{
  font-family:var(--sh-sans);
  font-weight:var(--sh-w-black);
  letter-spacing:var(--sh-track-wordmark);
  color:var(--sh-text-strong);
  display:inline-block;
}

.eyebrow{
  font-family:var(--sh-sans);
  font-weight:var(--sh-w-regular);
  font-size:var(--sh-size-xs);
  letter-spacing:var(--sh-track-eyebrow);
  text-transform:uppercase;
  color:var(--sh-text-muted);
}

.label{
  font-family:var(--sh-sans);
  font-weight:var(--sh-w-regular);
  font-size:var(--sh-size-sm);
  letter-spacing:var(--sh-track-label);
  text-transform:uppercase;
  color:var(--sh-text-muted);
}

.caption{
  font-family:var(--sh-sans);
  font-weight:var(--sh-w-regular);
  font-size:var(--sh-size-sm);
  letter-spacing:var(--sh-track-caption);
  text-transform:uppercase;
  color:var(--sh-text-muted);
}

.mono{
  font-family:var(--sh-mono);
  font-size:var(--sh-size-sm);
  letter-spacing:var(--sh-track-mono);
  color:var(--sh-text-muted);
}

/* Cormorant. Never below --sh-size-xl (22px) — it goes thin and weak. */
.display{
  font-family:var(--sh-serif);
  font-weight:var(--sh-w-light);
  font-size:var(--sh-size-4xl);
  line-height:var(--sh-lh-display);
  letter-spacing:var(--sh-track-serif);
  color:var(--sh-text-strong);
}
.display--section{font-size:var(--sh-size-3xl)}
.display--row{font-size:var(--sh-size-2xl);font-weight:var(--sh-w-regular);line-height:var(--sh-lh-title)}
.display--tile{font-size:var(--sh-size-xl);font-weight:var(--sh-w-regular);line-height:var(--sh-lh-title)}
.display .loc{color:var(--sh-text-muted);font-weight:var(--sh-w-light)}

/* ==========================================================================
   STRUCTURE
   ========================================================================== */

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding-bottom:var(--sh-space-4);
  border-bottom:var(--sh-rule);
  margin-bottom:var(--sh-space-6);
}
.sec-head .count{
  font-family:var(--sh-mono);
  font-size:var(--sh-size-sm);
  letter-spacing:var(--sh-track-mono);
  color:var(--sh-text-muted);
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;gap:var(--sh-space-3);
  padding:13px 22px;
  font-family:var(--sh-sans);
  font-size:var(--sh-size-sm);
  font-weight:var(--sh-w-medium);
  letter-spacing:var(--sh-track-label);
  text-transform:uppercase;
  border-radius:var(--sh-radius);
  cursor:pointer;white-space:nowrap;
  transition:background var(--sh-ease),color var(--sh-ease),
             border-color var(--sh-ease),gap var(--sh-ease);
}
.btn--primary{
  background:var(--sh-studio-black);
  color:var(--sh-text-inverse);
  border:1px solid var(--sh-studio-black);
}
.btn--primary:hover{background:var(--sh-deep-black)}

.btn--ghost{
  background:transparent;
  color:var(--sh-charcoal);
  border:1px solid var(--sh-charcoal);
}
.btn--ghost:hover{background:var(--sh-charcoal);color:var(--sh-text-inverse)}

/* The arrow. Used on buttons and links across every surface. */
.arrow{width:14px;height:1px;background:currentColor;position:relative;display:inline-block}
.arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}

.link-underline{
  display:inline-flex;align-items:center;gap:var(--sh-space-3);
  padding:var(--sh-space-2) 0;
  font-size:var(--sh-size-sm);
  font-weight:var(--sh-w-medium);
  letter-spacing:var(--sh-track-label);
  text-transform:uppercase;
  color:var(--sh-text-strong);
  border-bottom:1px solid var(--sh-studio-black);
  transition:gap var(--sh-ease);
  white-space:nowrap;
}
.link-underline:hover{gap:20px}

.field{
  display:flex;align-items:center;gap:var(--sh-space-3);
  border-bottom:var(--sh-rule);
  padding:6px 0;
  transition:border-color var(--sh-ease);
}
.field:focus-within{border-bottom-color:var(--sh-studio-black)}
.field input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:var(--sh-sans);
  font-weight:var(--sh-w-light);
  font-size:var(--sh-size-base);
  color:var(--sh-studio-black);
}
.field input::placeholder{color:var(--sh-linen)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:720px){
  :root{
    --sh-gutter:   var(--sh-gutter-mobile);
    --sh-size-4xl: 32px;
    --sh-size-3xl: 26px;
    --sh-size-2xl: 18px;
  }
}