/* markgabrielli.com
   Editorial. Left aligned, asymmetric, ruled.
   Deliberately avoids: floating shadow cards, pill buttons, centred columns,
   status chips, gradient blobs. Structure comes from hairlines and type. */

:root{
  --paper:#FDFBF6;
  --paper-2:#F5F2EA;
  --ink:#141412;
  --ink-2:#454339;
  --ink-3:#605E54;
  --rule:rgba(20,20,18,0.16);
  --rule-soft:rgba(20,20,18,0.09);

  --accent:#B03E14;
  --accent-deep:#98350F;
  --highlight:#F7DFA0;

  --font-display:'Bricolage Grotesque','Archivo',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;

  --wrap:1060px;
  --read:620px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--highlight);color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.read{max-width:var(--read)}
.section{padding:58px 0}
.section-tight{padding:44px 0}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* Section label sits ABOVE the heading. An indented label rail left a huge
   empty column on the left of every section, which read as unfinished. */
.split{display:block}
.split-label{
  display:block;margin:0 0 12px;padding:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.split-label br{display:none}
.split > div:last-child > .prose,
.split > div:last-child > p.lede{max-width:var(--read)}

/* photo tiles - a picture grid, not a row of shadow cards */
.tiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px 26px;margin-top:34px;
}
.tile{text-decoration:none;color:inherit;display:block}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-3)}
.tile h3{margin-top:12px;font-size:19px}
.tile p{margin-top:5px;font-size:15px;color:var(--ink-3)}
.tile:hover h3{box-shadow:inset 0 -2px 0 var(--accent)}

/* photo wall. CSS columns left up to 790px of ragged void at the bottom of a
   gallery, so this is a uniform grid instead - tidy, and it reads as deliberate. */
.gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:30px;
}
/* The ratio lives on the figure. Putting it on the img let the HTML height
   attribute win as a definite height, so photos rendered full-size. */
.gallery figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* a couple of wider frames so the wall is not a rigid checkerboard */
.gallery figure:nth-child(7n+1){aspect-ratio:4/3}

/* feature strip - one thing worth stopping on */
.feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:44px;align-items:center;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:44px 0;
}
.feature img{width:100%;aspect-ratio:5/4;object-fit:cover}
.feature-num{
  font-family:var(--font-display);font-weight:700;
  font-variation-settings:'wdth' 92,'opsz' 96;
  font-size:clamp(40px,5.6vw,70px);line-height:.92;letter-spacing:-0.05em;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:18px;
}
.feature-num em{font-style:normal;color:var(--accent-deep)}
.feature-num span{
  font-family:var(--font-mono);font-size:14px;letter-spacing:0.06em;color:var(--accent);
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--font-display);font-weight:700;
  font-variation-settings:'wdth' 96,'opsz' 40;
  letter-spacing:-0.028em;line-height:1.09;color:var(--ink);margin:0;
}
.display{font-size:clamp(33px,4.6vw,54px);line-height:1.03;letter-spacing:-0.035em}
h2{font-size:clamp(25px,2.9vw,34px);letter-spacing:-0.03em}
h3{font-size:19px;line-height:1.28;letter-spacing:-0.018em}

.eyebrow{
  display:block;font-family:var(--font-mono);
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  font-weight:500;color:var(--ink-3);margin:0 0 14px;
}

.lede{font-size:clamp(18px,1.9vw,20px);line-height:1.62;color:var(--ink-2);margin:20px 0 0}
p{margin:17px 0 0;color:var(--ink-2)}
.prose p{font-size:17.5px;line-height:1.8;color:var(--ink-2)}
.prose p:first-child{margin-top:0}
.prose h3{margin-top:38px}
.prose h3 + p{margin-top:9px}
.small{font-size:14px;line-height:1.6;color:var(--ink-3)}
.mono{font-family:var(--font-mono)}
strong{color:var(--ink);font-weight:600}

.hl{position:relative;display:inline-block;z-index:0;padding:0 .06em}
.hl::before{
  content:"";position:absolute;z-index:-1;left:-.03em;right:-.03em;bottom:.07em;
  height:.36em;background:var(--highlight);
}

.fill{
  font-family:var(--font-mono);font-size:0.85em;
  color:var(--accent-deep);border-bottom:1px dotted var(--accent);
}

/* ---------- links ---------- */
.link{
  text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--accent);
  transition:box-shadow .15s ease,background .15s ease;
}
.link:hover{box-shadow:inset 0 -1.6em 0 var(--highlight)}
.actions{display:flex;gap:30px;flex-wrap:wrap;margin-top:28px;align-items:baseline}
.actions a{
  font-family:var(--font-sans);font-size:16px;font-weight:600;
  text-decoration:none;box-shadow:inset 0 -2px 0 var(--accent);
  transition:box-shadow .15s ease;
}
.actions a:hover{box-shadow:inset 0 -1.5em 0 var(--highlight)}
.actions a.quiet{box-shadow:inset 0 -2px 0 var(--rule);font-weight:500;color:var(--ink-2)}
.actions a.quiet:hover{box-shadow:inset 0 -1.5em 0 var(--paper-2)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;gap:26px;height:62px}
.brand{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:-0.03em;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.brand img{width:30px;height:30px;border-radius:50%;flex:none}
.nav-links{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav-links a{
  font-size:14.5px;color:var(--ink-3);text-decoration:none;font-weight:500;
  padding-bottom:2px;transition:color .15s ease,box-shadow .15s ease;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.here{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- hero ---------- */
.hero{padding:48px 0 44px;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:52px;align-items:end}
.hero .display{max-width:16ch}
.contour-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.contour-wrap canvas{width:100%;height:100%;display:block}
.contour-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(253,251,246,.55) 46%,var(--paper) 100%);
}
.hero-layer{position:relative;z-index:2}


/* The cut-out portraits end in a hard horizontal edge across the chest.
   Dissolve the bottom into the paper so it reads as intentional. */
.hero img[src*="mark-hero"],
.hero img[src*="mark-about"]{
  -webkit-mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,0) 100%);
}

/* ---------- numbered editorial entries (replaces card grids) ---------- */
.entries{border-top:1px solid var(--rule);margin-top:32px}
.entry{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:26px;
  padding:24px 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;align-items:start;
}
a.entry:hover h3{box-shadow:inset 0 -2px 0 var(--accent)}
.entry-n{
  font-family:var(--font-mono);font-size:12px;color:var(--accent-deep);
  letter-spacing:0.06em;padding-top:5px;
}
.entry h3{display:inline}
.entry p{margin-top:8px;font-size:16px;color:var(--ink-3);max-width:62ch}

/* wide two-up entry list for short items */
.entries-2{
  border-top:1px solid var(--rule);margin-top:32px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:52px;
}
.entries-2 .entry{border-bottom:1px solid var(--rule-soft)}

/* ---------- pull quote ---------- */
.quote{
  font-family:var(--font-display);font-weight:700;
  font-variation-settings:'wdth' 96;
  font-size:clamp(21px,2.6vw,30px);line-height:1.2;letter-spacing:-0.03em;
  color:var(--ink);margin:0;max-width:26ch;
}
.quote-attr{
  margin-top:16px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-3);
}

/* ---------- images ---------- */
figure{margin:0}
.photo-slot{
  border:1px dashed var(--rule);padding:22px;
  display:flex;align-items:flex-end;min-height:220px;
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:46px 0 38px;margin-top:72px}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:34px}
.foot a{display:block;font-size:14.5px;color:var(--ink-3);text-decoration:none;margin-top:9px}
.foot a:hover{color:var(--ink)}
.foot-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-3);
}
.foot-meta{margin-top:36px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}

/* ---------- forms ---------- */
label{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-3);margin:22px 0 7px;
}
input,textarea,select{
  width:100%;padding:12px 13px;font-family:var(--font-sans);font-size:16px;
  color:var(--ink);background:transparent;
  border:1px solid var(--rule);border-radius:0;
}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent)}
textarea{min-height:150px;line-height:1.6;resize:vertical}
button[type=submit]{
  margin-top:26px;padding:14px 30px;border:0;border-radius:0;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-sans);font-size:15px;font-weight:600;cursor:pointer;
}
button[type=submit]:hover{background:var(--accent-deep)}

/* ==================================================================
   GOLF PAGE
   ================================================================== */
.bignum{
  font-family:var(--font-display);font-weight:700;
  font-variation-settings:'wdth' 92,'opsz' 96;
  font-size:clamp(50px,7.5vw,96px);line-height:.9;letter-spacing:-0.05em;color:var(--ink);
}
.handicap{display:flex;align-items:baseline;gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.handicap .arrowto{font-family:var(--font-mono);font-size:clamp(20px,3vw,32px);color:var(--accent);}
.bignum-cap{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-3);margin-top:10px;
}

.scorecard{border-top:1px solid var(--rule);margin-top:28px}
.sc-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--rule-soft);
}
.sc-row p{margin-top:5px;font-size:15px;color:var(--ink-3);max-width:56ch}
.sc-val{
  font-family:var(--font-display);font-weight:700;font-variation-settings:'wdth' 92;
  font-size:25px;line-height:1;letter-spacing:-0.03em;color:var(--accent-deep);white-space:nowrap;
}
.sc-val small{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);
  margin-top:5px;text-align:right;font-weight:400;
}
.sc-plain{
  font-family:var(--font-sans);font-size:16px;font-weight:500;
  color:var(--ink);white-space:normal;text-align:right;letter-spacing:0;
}

/* shot shapes as a ruled glossary, not chips */
.glossary{border-top:1px solid var(--rule);margin-top:26px}
.glossary div{
  display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;
  padding:13px 0;border-bottom:1px solid var(--rule-soft);
}
.glossary dt,.glossary b{
  font-family:var(--font-mono);font-size:13px;color:var(--accent-deep);font-weight:500;
}
.glossary span{font-size:16px;color:var(--ink-2)}

.tenet{border-left:2px solid var(--accent);padding-left:20px;margin-top:32px}
.tenet p{
  font-family:var(--font-display);font-weight:600;font-variation-settings:'wdth' 96;
  font-size:clamp(19px,2.2vw,24px);line-height:1.3;letter-spacing:-0.025em;color:var(--ink);margin:0;
}
.tenet cite{
  display:block;margin-top:11px;font-family:var(--font-mono);font-style:normal;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
}

/* the invitation - ruled band, not a rounded panel */
.invite{
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:44px 0;
}
.invite h2{max-width:18ch}
.invite .terms{
  margin-top:20px;font-family:var(--font-mono);font-size:12.5px;line-height:1.75;
  color:var(--ink-3);max-width:56ch;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  body{font-size:16px}
  .hero{padding:44px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .feature{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .entries-2{grid-template-columns:1fr;column-gap:0}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
  .entry{grid-template-columns:40px minmax(0,1fr);gap:16px}
  .sc-row{grid-template-columns:1fr;gap:7px}
  .sc-val,.sc-val small,.sc-plain{text-align:left}
  .glossary div{grid-template-columns:88px minmax(0,1fr);gap:14px}
  .nav-in{height:56px;gap:14px}
  .nav-links{gap:15px;overflow-x:auto}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{font-size:14px;white-space:nowrap}
  /* keep the name beside the photo on small screens - just make it smaller */
  .brand{font-size:15px;gap:9px}
  .brand img{width:26px;height:26px}
}

/* ==================================================================
   DYNAMIC LAYER
   Scroll-driven animations (animation-timeline), cross-document view
   transitions, and interactive rows. All of it is progressive
   enhancement: the static state is the readable state, so nothing
   depends on an animation running.
   ================================================================== */

/* cross-document view transitions - navigation feels continuous */
@view-transition { navigation: auto; }

/* reading progress */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- principle / entry rows, made interactive ---------- */
.principles{border-top:1px solid var(--rule);margin-top:34px}
.principle{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:start;
  padding:30px 4px 30px 0;border-bottom:1px solid var(--rule-soft);
  transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.principle-n{
  font-family:var(--font-display);font-weight:700;
  font-variation-settings:'wdth' 88,'opsz' 96;
  font-size:clamp(38px,5.4vw,68px);line-height:.78;letter-spacing:-0.055em;
  color:transparent;-webkit-text-stroke:1.4px rgba(20,20,18,.26);
  min-width:1.7em;
  transition:color .35s ease,-webkit-text-stroke-color .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.principle-body h3{font-size:clamp(19px,2.1vw,24px)}
.principle-body p{margin-top:9px;font-size:16.5px;color:var(--ink-3);max-width:60ch}
.principle::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .principle:hover{padding-left:16px}
  .principle:hover::after{transform:scaleX(1)}
  .principle:hover .principle-n{
    color:var(--accent);-webkit-text-stroke-color:transparent;transform:translateY(-2px);
  }
}

/* the plain entry lists get the same energy */
.entry{transition:padding-left .35s cubic-bezier(.2,.8,.2,1),background .2s ease;position:relative}
.entry-n{font-size:13px;transition:color .3s ease}
@media (hover:hover){
  a.entry:hover{padding-left:14px;background:transparent}
  a.entry:hover .entry-n{color:var(--ink)}
}

/* ---------- scroll-driven motion ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .principle{
      animation:rowIn linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 26%;
    }
    @keyframes rowIn{
      from{opacity:0;transform:translateY(26px)}
      to  {opacity:1;transform:none}
    }

    /* photographs wipe up as they arrive */
    .shot img,.gallery figure,.tile img,.feature img{
      animation:shotIn linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 24%;
    }
    @keyframes shotIn{
      from{opacity:0;clip-path:inset(18% 0 0 0);transform:scale(1.03)}
      to  {opacity:1;clip-path:inset(0 0 0 0);transform:none}
    }

    /* section headings reveal from the baseline */
    .section h2,.section-tight h2{
      animation:headIn linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 24%;
    }
    @keyframes headIn{
      from{opacity:0;clip-path:inset(0 0 82% 0);transform:translateY(10px)}
      to  {opacity:1;clip-path:inset(0 0 -12% 0);transform:none}
    }

    /* the big golf number counts itself up the page */
    .feature-num,.bignum{
      animation:numIn linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 30%;
    }
    @keyframes numIn{
      from{opacity:0;transform:translateY(20px) scale(.96)}
      to  {opacity:1;transform:none}
    }
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress{animation:progressGrow linear both;animation-timeline:scroll(root)}
    @keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

@media (max-width:860px){
  .principle{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:24px 0}
  .principle-n{font-size:34px;min-width:1.5em}
}