/* Tortuga Pacific
   Concept: a small shop's work, filed as cyanotype drafting sheets.
   Cyanotype blueprint blue warmed by windward sun (ochre), chalk-line ink,
   a faint drafting grid, a corner title block on every sheet.
   Faces: Archivo (title block + body), IBM Plex Mono (annotations, sheet
   numbers), Caveat (one hand-note). Tortuga's own identity, not Porchlight. */

:root{
  --blue:#102a3c;         /* cyanotype paper */
  --blue-2:#143247;       /* panel */
  --blue-3:#0c2230;       /* deep */
  --chalk:#d8e7ef;        /* chalk-line ink */
  --chalk-2:#eef5f9;      /* brightest line */
  --dim:#90b0c0;          /* muted annotation */
  --faint:#5f8194;        /* faintest */
  --sun:#e2a64a;          /* windward sun, the warm accent */
  --sun-2:#efba61;        /* lit sun */
  --rust:#cf6f42;         /* secondary warm */
  --grid:rgba(216,231,239,.07);
  --grid-2:rgba(216,231,239,.13);
  --hair:rgba(216,231,239,.18);
  --hair-2:rgba(216,231,239,.32);
  --display:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --hand:"Caveat",ui-rounded,cursive;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--blue); color:var(--chalk);
  font:400 17px/1.62 var(--display); -webkit-font-smoothing:antialiased;
  position:relative; min-height:100vh;
}
/* drafting grid + paper grain on every sheet */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px, 140px 140px, 140px 140px;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:0 26px 90px}
a{color:var(--sun); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--sun-2)}

/* ---- title block masthead (like a real drawing border) ---- */
.titleblock{
  border:1px solid var(--hair-2); margin-top:22px;
  display:grid; grid-template-columns:1fr auto; gap:0;
}
.titleblock .id{padding:16px 18px; border-right:1px solid var(--hair)}
.titleblock .id .shop{font:700 17px/1 var(--display); letter-spacing:.02em; color:var(--chalk-2)}
.titleblock .id .where{font:500 10px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-top:7px}
.titleblock nav{display:flex; align-items:stretch}
.titleblock nav a{
  display:flex; align-items:center; padding:0 16px; text-decoration:none;
  font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  border-left:1px solid var(--hair);
}
.titleblock nav a:hover{color:var(--chalk-2); background:var(--blue-2)}
.titleblock nav a[aria-current]{color:var(--sun); background:var(--blue-2)}

/* sheet stamp line under the title block */
.sheetline{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font:500 10px/1.6 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  border:1px solid var(--hair-2); border-top:none; padding:8px 18px;
}
.sheetline .sun{color:var(--sun)}

/* ---- hero ---- */
.hero{padding:52px 0 34px; border-bottom:1px solid var(--hair)}
.hero h1{
  font:700 clamp(40px,7vw,80px)/1.0 var(--display); letter-spacing:-.015em;
  margin:0 0 20px; color:var(--chalk-2); max-width:16ch;
}
.hero h1 .sun{color:var(--sun)}
.hero .lede{font:400 21px/1.55 var(--display); color:var(--chalk); max-width:52ch; margin:0 0 28px}
.cta-row{display:flex; gap:13px; flex-wrap:wrap}
.btn{
  display:inline-block; font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  padding:15px 24px; border:1px solid var(--hair-2); color:var(--chalk-2); text-decoration:none; background:transparent;
  border-radius:1px; transition:background .12s ease,border-color .12s ease;
}
.btn:hover{background:var(--blue-2); border-color:var(--dim)}
.btn.sun{background:var(--sun); border-color:var(--sun); color:#16202a}
.btn.sun:hover{background:var(--sun-2); border-color:var(--sun-2)}

/* ---- sections ---- */
.sec{padding:50px 0 6px}
.sec > h2{
  font:600 12px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--sun);
  margin:0 0 8px; display:flex; align-items:center; gap:14px;
}
.sec > h2::after{content:""; flex:1; height:1px; background:var(--hair)}
.sec .sub{font:400 18px/1.55 var(--display); color:var(--dim); max-width:60ch; margin:14px 0 28px}

/* ---- service details, like drawing callouts ---- */
.specs{border-top:1px solid var(--hair-2)}
.spec{
  display:grid; grid-template-columns:auto 1fr; gap:8px 24px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--hair);
}
.spec .no{font:500 11px/1.5 var(--mono); letter-spacing:.12em; color:var(--faint); white-space:nowrap}
.spec .body h3{font:700 22px/1.2 var(--display); color:var(--chalk-2); margin:0}
.spec .body p{font:400 16px/1.6 var(--display); color:var(--dim); margin:7px 0 0; max-width:56ch}

/* ---- index of sheets ---- */
.sheets{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); border:1px solid var(--hair); border-bottom:none}
.sheet-tile{
  padding:20px; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair);
  text-decoration:none; display:block; transition:background .12s ease;
}
.sheet-tile:hover{background:var(--blue-2)}
.sheet-tile .n{font:500 10px/1 var(--mono); letter-spacing:.16em; color:var(--sun)}
.sheet-tile h3{font:700 19px/1.15 var(--display); color:var(--chalk-2); margin:11px 0 6px}
.sheet-tile p{font:400 14px/1.5 var(--display); color:var(--dim); margin:0}

/* ---- hand note ---- */
.note{
  border:1px dashed var(--hair-2); padding:18px 22px; margin:28px 0; max-width:60ch;
  display:flex; gap:16px; align-items:flex-start;
}
.note .tag{font:500 10px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sun); white-space:nowrap; padding-top:4px}
.note p{font:400 21px/1.4 var(--hand); color:var(--chalk); margin:0}

/* ---- prose ---- */
.prose{max-width:64ch}
.prose p{margin:0 0 18px}
.prose h3{font:700 20px/1.2 var(--display); color:var(--chalk-2); margin:30px 0 10px}
.lead{font:400 22px/1.5 var(--display); color:var(--chalk); max-width:54ch; margin:6px 0 24px}

/* ---- pricing table ---- */
.rate{border-top:1px solid var(--hair-2)}
.rate .line{display:grid; grid-template-columns:1fr auto; gap:6px 20px; padding:18px 0; border-bottom:1px solid var(--hair); align-items:baseline}
.rate .line h4{font:700 19px/1.2 var(--display); color:var(--chalk-2); margin:0}
.rate .line .p{font:500 13px/1.4 var(--mono); letter-spacing:.04em; color:var(--sun); white-space:nowrap; text-align:right}
.rate .line p.d{grid-column:1 / -1; font:400 15px/1.55 var(--display); color:var(--dim); margin:5px 0 0; max-width:60ch}

/* ---- contact ---- */
.callout{border:1px solid var(--hair-2); background:var(--blue-2); padding:26px; max-width:560px}
.callout .k{font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:8px}

/* ---- footer ---- */
footer.foot{border-top:1px solid var(--hair-2); margin-top:64px; padding-top:20px}
.foot .row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font:500 11px/1.7 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.foot .row a{color:var(--dim); text-decoration:none}
.foot .row a:hover{color:var(--sun)}

@media (max-width:640px){
  .titleblock{grid-template-columns:1fr}
  .titleblock nav{flex-wrap:wrap; border-top:1px solid var(--hair)}
  .titleblock nav a{border-left:none; border-right:1px solid var(--hair); padding:12px 14px}
  .spec{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}